템플릿 (11) 썸네일형 리스트형 프로젝트 템플릿 만들기 리액트 애플리케이션을 생성하면 기본적으로 생성된 폴더들이 있는데요. 불필요한 폴더들을 삭제하고 기본 템플릿을 만들어 보겠습니다. 완성된 템플릿 불필요한 파일을 제거하고 완성된 템플릿은 아래와 같습니다 App.js function App() { return ( Test ) } export default App index.js import React, { StrictMode } from "react"; import ReactDOM from 'react-dom/client' import App from './App' import './index.css' const root = ReactDOM.createRoot(document.getElementById('root')) root.render( ) 앱 구조 먼저.. 자바스크립트 컴포넌트 - 고무고무 카드 바닐라 자바스크립트로 제작된 컴포넌트로 웹 사이트 메인 헤더로 활용가능합니다. 마우스를 카드 위로 가져가면 해당 카드가 확장되는 기능을 가지고 있습니다. 구현 먼저 HTML에 사용할 만큼 박스를 아래와 같이 지정합니다. 애플리케이션의 특성상 바탕색이나 배경이미지는 아래와 같이 인라인 스타일로 삽입하는 방식이 구현에 편리합니다. 아래와 같이 스타일을 지정합니다. 개인적으로 각 요소는 기본적으로 가지는 스타일 리셋을 하고 각각의 스타일을 지정하는 방식을 선호합니다. 플렉스 속성의 grow를 활용하면 쉽게 구현이 가능합니다. /* main.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; background-col.. 파이어베이스 - 연결하기 (앵귤러, 리액트) 파이어베이스는 데이터 저장에 필요한 데이터베이스, 인증 및 호스팅 등 다양한 서버 측 기능을 제공하는 구글의 통합 서비스입니다. 이미 구축된 서버에 프론트 애플리케이션을 연동하고 파이어베이스에서 필요한 기능을 가져다 사용하기 때문에 백엔드 개발 없이 완전체의 애플리케이션을 개발할 수 있는 장점이 있습니다. 파이어베이스는 파이어 스토어 기준으로 1GB의 총 데이터와 하루에 20,000번의 쓰기, 20,000번의 지우기, 50,000번의 읽기를 무료로 제공하므로 테스트 목적의 애플리케이션을 충분히 가동 가능합니다. 파이어베이스 사용을 위한 첫 단계인 파이어베이스와 개발하고자 하는 애플리케이션의 연동방법을 살펴보겠습니다. HTML 삽입 미리보기할 수 없는 소스 앵귤러 템플릿 - Pipes 파이프는 템플릿에서 사용가능한 function들을 말합니다. 사용방법 사용은 아래와 같이 변화를 주고자 하는 값의 우측에 ' | ' 기호를 두고 사용하고자 하는 파이프를 호출하여 사용합니다. {{ value | pipeName }} 앵귤러 자체 파이프들 1. date Date 파이프를 원시타입 변수의 값이 바뀌거나 참조된 객체가 바뀔 때마다 작동합니다. {{ value | date : format : timezone : locale }} {{ value | date : 'short' }} {{ value | date : 'medium' }} {{ value | date : 'long' }} {{ value | date : 'full' }} {{ value | date : 'MM-dd-yyyy' }} {{.. 앵귤러 템플릿 - style binding & ngStyle 앵귤러 style 바인딩은 특정 요소에 동적으로 스타일을 추가하거나 제거하는 기능입니다. style 바인딩과 ngStyle 디렉티브는 기능이 동일하고 사용법이 유사하기 때문에 같이 설명하도록 하겠습니다. 사용방법 1. style binding 한 가지의 스타일을 추가하는 경우 아래와 같이 해당 속성을 지정 style. 뒤에 지정해 줍니다. 이때, 문법은 html 스타일 문법과 camelCase문법 둘 다 사용가능합니다. 단위를 가지는 스타일의 경우 아래와 같이 두 가지 방법으로 단위 지정이 가능합니다. 복수의 스타일을 적용하는 경우 아래와 같이 구현가능합니다. // class.componet.ts import { Component } from '@angular/core'; @Component({ sele.. 앵귤러 템플릿 - two-way binding 이벤트바인딩은 화면에서 일어나는 이벤트만 감지하여 데이터소스로, property 바인딩은 데이터소스에서 일어나는 데이터의 변화만 감지하여 화면으로 보내줍니다. 따라서, 이벤트바인딩은 데이터소스의 변화를, property 바인딩은 화면의 변화를 감지하지 못하는데 요. two-way 바인딩은 화면과 데이터소스의 데이터 변화를 동시에 감지하고 양방으로 보낼 수 있게 해 줍니다. 한 가지 주의할 점은 해당하는 대상이 이벤트와 값을 모두 가져야 하기 때문에 단일 요소에 대한 two-way 바인딩은 사용할 수 있는 범위가 상대적으로 줄어든다는 점입니다. 사용방법 예시를 위해 ngModel directive를 사용해 보겠습니다. /* app.modules.ts */ import { AppComponent } from.. 앵귤러 템플릿 - event binding 이벤트 바인딩은 화면에 입력된 유저의 행동을 감지하고 해당 정보를 데이터 소스로 보내주는 역할을 합니다. 사용방법 앵귤러이벤트는 HTML에서 제공하는 이벤트 명 (on 제외)을 괄호로 감싸서 이벤트바인딩에 사용되는 이벤트임을 표시하는데요. 문법은 아래와 같이 템플릿에서 이벤트 지정 후 큰따옴표 안에 원하는 행동이나 값을 넣으면 됩니다. event.component.html Click 위와 같이 function을 사용한 경우 해당 function을 TypeScript class 파일에 만들어 주어야 제대로 작동합니다. event.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-event', template.. 앵귤러 템플릿 - template expression (statement) template expression은 interpolation과 같은 문법을 사용하지만 가치를 템플릿에서 생성한다는 차이점이 있습니다. 주의할 점은 JavaScript의 일부 표현은 템플릿에서 사용이 불가한데요. 사용할 수 없는 표현들은 아래와 같습니다. 정의 (Assignments): =, +=, -=, ... Operators: new, typeof, or instanceof ( ; ) or ( , ) 를 사용한 연계표현 (Chaining expressions) 가감식: ( ++ )이나 ( -- ) 일부 ES2015+ operators bitwise operators: ( | ), ( & ), ... 또 statement (expressiont)에는 사용된 표현이 속하는 문맥 (context)이 존재.. 이전 1 2 다음
