프론트엔드/앵귤러 (41) 썸네일형 리스트형 앵귤러 라이브러리 - Angular Forms 폼은 많은 애플리케이션에서 사용되는 기능 중 하나이죠. 앵귤러 폼 라이브러리 사용 시 validation 등 다양한 기능을 사용할 수 있는데요. 앵귤러 폼 라이브러리에서 제공하는 폼은 크게 'reactive'와 'template-driven' 방식으로 나누어집니다. 차이점 reactive 폼은 컴포넌트에서 폼객체 생성, 설정 (제약조건 포함) 하고 이를 템플릿에서 binding의 형식으로 사용하기 때문에 확장성이 높고 보안성이 뛰어난 장점이 있습니다. 반면, template-driven 폼은 템플릿에서 폼객체 생성, 설정 (제약조건 포함)을 하기 때문에 가시성이 좋으나 확장성은 떨어집니다. reactive template-driven Setup of form model Explicit, created i.. 앵귤러 라이브러리 - Angular Router 앵귤러는 싱글페이지 애플리케이션으로 URL경로가 바뀌지 않는데요. 하지만 앱의 구조상 페이지 분리가 필요할 때도 있습니다. 앵귤러 라우팅은 이러한 기능을 담당하는 모듈로 사용법을 알아보겠습니다. 모듈생성 라우팅을 사용하기 위해서는 라우터를 만들어야 하는데요. 라우팅을 위한 모듈을 따로 만드는 것을 권장합니다. 해당 모듈은 최초 애플리케이션을 만들 때 라우팅을 사용할 건지 물어보는데 이때 'y'를 선택하면 자동 생성됩니다 (추후 따로 생성하는 것도 물론 가능합니다). 만약, no를 선택한 경우 아래 커멘드를 통해 추가할 수 있습니다. ng new my-app --routing 라우터모듈은 아래와 같이 AppModule에 자동으로 등록됩니다. 모듈은 등록된 순서대로 위에서부터 순차적으로 발동되기 때문에 Ap.. 앵귤러 라이브러리 라이브러리는 자주 쓰이는 기능들을 개별적으로 구해 놓은 코드의 집합을 말합니다 (JavaScript의 대표적 라이브러리로 Jquery 등 이 있죠). 앵귤러는 다양한 기능을 구현하게 해 주는 자체 라이브러리를 가지고 있는데요. 앵귤러 라이브러리에 대해서 알아보겠습니다. 라이브러리들 Angular Router Angular Forms Angular HttpClient Angular Animations Angular PWA Angular Schematics 참고 Angular angular.io HTML 삽입 미리보기할 수 없는 소스 어헤드 오브 타임 컴파일러 작동원리 변환단계 코드분석 (code analysis) 코드생성 (code generation) 템플릿 체크 (template type checking) 소스코드 표본 생성하지만 변환은 하지 않는 단계. 메타데이터 문법 오류만 기록 메타데이터 오류 분석을 계속 실시하고 오류 표시 옵션 단계로 템플릿 내에 binding 문법 확인 템플릿 체크 옵션 켜기 tsconfig.json 파일에서 "strictInjectionParameters": true { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", // ... }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, "strictI.. 앵귤러 콤파일러 저스트 인 타임 VS 어헤드 오브 타임 앵귤러에서 작성된 HTML과 Component (TypeScript), Declarative code, 는 JavaScript로 변환 (compilte)을 거쳐야만 브라우저에 시 인식이 가능합니다. 변환하는 시기에 따란 JIT와 AOT가 있는데요. 그 차이점을 알아보겠습니다. JIT (Just In Time) Compiler 브라우저가 작동할 때 해당코드를 변환 (runtime compilation). 파일 별로 변환하는 방식이고 브라우저가 코드를 변환하기 위해 ㅇ앵귤러 콤파일러를 다운로드하기 때문에 속도가 느리고 용략이 커짐. 로컬 개발환경에 적합. AOT (Ahead Of Time) Compiler 브라우저가 작동하기 전에 작성된 코드를 사전에 변환하는 방식 (build time compliation.. 앵귤러 프로젝트 폴더구조 생성된 앵귤러 프로젝트의 각 파일에 대해서 알아보겠습니다. 생성된 프로젝트 기본구조 앵귤러 씨엘아이를 통해 프로젝트를 생성하면 아래처럼 자동으로 깃과 관련된 파일을 포함한 아래 파일들이 생성됩니다. .editorconfig 코드 편집기 구성파일 EditorConfig. .gitignore 깃 레포에 올릴 때 제외되는 파일 README.md 리드미 파일 angular.json CLI 구성파일 package.json npm dependency 리스트 package-lock.json dependency 버전 이력 src/ 어플리케이션 제작에 필요한 모든 파일 저장 (데이터, assets,...) node_modules/ 모든 npm package 저장 tsconfig.json TypeScript 파일. 어플리.. 앵귤러 - 씨엘아이 앵귤러 씨엘아이는 (커맨드라인 인터페이스)는 앵귤러 어플리케이션을 만들고 관리하는데 권장되는 도구입니다. CLI 설치 npm install -g @angular/cli CLI 업데이트하기 npm uninstall -g @angular/cli npm install -g @angular/cli@latest 글로벌환경에서 업데이트를 하더라도 프로젝트에서 사용하는 버전이 우선적용되기 때문에 기존에 생성해 둔 프로젝트는 따로 업데이트를 해야 합니다. 방법은 해당 프로젝트 파일에서 아래 명령어를 실행하면 됩니다. rm -rf node_modules npm uninstall @angular/cli --force npm install @angular/cli@latest --force npm i --force 비주얼 스.. 앵귤러 모달 웹프로그로밍에서 모달은 팝업이나 dialog를 의미합니다. Vanilla JavaScript (framework 사용 없이 HTML, CSS, JS만으로 만들어진 어플케이션)를 사용하여 모달을 만드는 것도 가능하지만 앵귤러에서 제공하는 기능들을 활용하면 모달의 재사용성을 높이고 정보를 공유를 보다 손쉽게 할 수 있습니다. 앵귤러를 사용하여 모달을 구현하는 방법을 살펴보겠습니다. 먼저 모달 구현을 위해 사용할 기능들을 살펴볼까요? 1. 모달 Component (모달 닫기 등 공통된 기능과 layout 제공) 2. 모달 Service (모달의 상태를 관리하고 공유하는 기능 제공) 3. 개별 모달 Component (로그인 등 특정된 내용을 제공하고 기능 수행) 구현된 코드는 아래와 같습니다 공통 모달 Com.. 이전 1 2 3 4 5 6 다음
