나만보는개발공부블로그

Angular 템플릿 문법 템플릿 문법은 템플릿을 작성하기 위한 Angular 고유의 확장 표기법으로 템플릿과 컴포넌트 클래스 간 데이터 공유를 위한 데이터 바인딩과 동적으로 DOM 구조, 스타일 등을 변경할 수 있는 빌트인 디렉티브 등을 지원한다. 템플릿 엔진 - Pug, Handlebars, EJS, JSP .. - 데이터 바인딩(Data Binding) 인터폴레이션(Interpolation) 프로퍼티 바인딩(Property Binding) 어트리뷰트 바인딩(Attribute Binding) 클래스 바인딩(Class Binding) 스타일 바인딩(Style Binding) 이벤트 바인딩(Event Binding) 양방향 데이터 바인딩(Two-way Binding) - 빌트인 디렉티브(Built-in ..

1. 컴포넌트의 코드 구조 컴포넌트는 임포트, @Component 데코레이터, 컴포넌트 클래스 영역으로 구분할 수 있다. import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'foodiv-frontend'; } Import Area - 컴포넌트에 필요한 의존 모듈을 임포트한다. Angular가 제공하는 Angular 라이브러리 모듈의 경우 @가 붙어있어서 경로를 명시하지않는다. 또한 npm을 사용하여 설치한 의존 모듈도 ..

1. Component - 템플릿과 메타데이터 그리고 컴포넌트 클래스로 구성되며 데이터 바인딩에 의해 연결된다. 컴포넌트는 화면을 구성하는 View를 생성하고 관리하는 것이 주된 역할이다. 2. Directive - 애플리케이션 전역에서 사용할 수 있는 View에 관련한 공통 관심사를 컴포넌트에서 분리하여 구현한 것으로 컴포넌트의 복잡도를 낮추고 가독성을 높여준다. Structural Directive와 Attribute Directive로 구분할 수 있으며 큰 틀에서는 Component와 Directive로 구분한다. 3. Service - 다양한 목적의 애플리케이션 공통적인 로직을 담당한다. Component에서 애플리케이션 전역 관심사를 분리하기 이해 사용하며 Dependency Injection이..

Angular Application Flow 흐름이란? 파일이 호출되는 방식과 애플리케이션을 개발할 때 실행되는 파일 순서를 의미한다. 앵귤러는 고유의 파일 호출방식을 갖는데 어떤식으로 실행되는지 살펴본다. 1. Angular.json 파일 - Angular 프로젝트의 다양한 프로퍼티와 설정정보를 가진 파일이다. 실행할때 이 파일을 처음 참조하고 builder가 모든 경로와 설정들을 찾고 어떤것이 메인파일인지 확인한다. { ... "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/foodiv-frontend", "index": ..

Angular 프레임워크 애플리케이션 파일 구조 글로벌로 angular-cli를 설치하고 ng new 을 실행하면 angular 스타일 가이드의 기본 애플리케이션 구조, 네이밍 룰, 코딩 컨벤션 등을 준수하고 생성된다. 1. src 폴더 - Angular 프로젝트는 컴포넌트, 디렉티브, 서비스, 모듈 등 Angluar 구성요소와 각종 설정 파일로 구성된다. src 폴더에서는 Angular의 모든 구성요소, 공통 CSS, 이미지와 폰트와 같은 정적 파일, 설정 파일 등 애플리케이션의 필수 파일을 담고 있다. app/app.component.{ts, html, css, sepc.ts}: 모든 컴포넌트의 부모 컴포넌트인 루트 컴포넌트를 구성하는 컴포넌트 클래스, 템플릿, CSS, 유닛 테스트용 스펙 파일이다...

Angluar - SPA(Single Page Application) 개발을 위한 구글의 오픈소스 자바스크립트 프레임워크 - 정적 타입을 제공하는 TypeScript를 주력 언어로 채택하여 대규모 애플리케이션 개발에 보다 적합한 환경을 제공 - AngularJS에서 후속 버전의 Angular / Angular CLI를 제공 AngularJS ? Angular - AngularJS의 Controller와 $Scope 기반 개발에서 Component 기반 개발로 전환됨. (CBD=Component Based Development) - AngularJS의 angular.module과 jQlite보다 향상된 모듈 시스템과 DOM 제어 기능을 제공하고 API 단순화 - 선택적 데이터 바인딩인 양방향, 단방향을 지..