2019-06-15 TIL
2019-06-15
Angular
현시점 한글문서와 영문문서의 버전이 다르고 튜토리얼 내용도 다르다.
기본 개념은 크게 달라지지 않았을 것이고 한글 문서가 이해하기 더 빠르니까 버전이 7.2.0이지만 먼저 보면서 친해지고, 영문 문서 튜토리얼을 하자.
angular-cli 주요 명령어
angular-cli를 사용한다.
-
워크스페이스 생성
$ ng new <workspace name> -
개발서버 띄우기
$ ng serve --open -
컴포넌트 생성
$ ng generate component <component name>새 프로젝트에는 AppComponent 셸만 존재함. 안에 들어갈 컴포넌트를 생성해야 한다.
-
서비스 생성
$ ng generate service <service name>
주요 메서드 ?
ngOnInit() 라이프사이클 후킹 함수 : 컴포넌트를 생성한 직 후 호출된다. (constructor()보다는 뒤에 호출됨.)
컴포넌트를 초기화 하는 로직을 작성하기 적당하다. 서버에서 받아오는 값으로 컴포넌트를 초기화 해야 할 때에도 사용할 수 있음. (constructor에는 지역변수 초기화 정도만 할 것)
문법 정리
템플릿 문법 > 바인딩
-
interpolation binding
// app.component.html (템플릿) <h1>{{title}}</h1> // {{ }} : interpolation binding -
two-way binding 템플릿에
[(ngModule)]을 사용. ngModel은 앵귤러의 FormsModule에서 제공하는 디렉티브. FormControl 인스턴스를 만들고 Form을 컨트롤하는 엘리먼트에 바인딩함.AppModule에서 @NgModule 데코레이터의 imports 속성에 FormsModule을 추가해야 하며, @angular/forms 모듈에서 import해줘야함.
<input [(ngModel)]="hero.name" placeholder="name"> -
event binding
<li ... (click)="onSelect(hero)">onSelect()는 이벤트 핸들러 함수. hero를 인자로 전달. -
class binding
<li ... [class.selected]="hero === selectedHero"> ... </li>조건식에 따라 .selected 클래스를 적용/미적용할 수 있다.
-
property binding
<app-hero-detail [hero]="currentHero"></app-hero-detail>
-
Pipe 리눅스 명령어에 사용하는
|와 같은 개념. 서로 독립된 프로세스를 연결해 사용한다. 템플릿에서 바인딩 문법 안에 사용함. 예를들어{{hero.name | uppercase}}하면 hero.name의 스트링이 대문자로 변환되어 표시된다. 기본 제공하는것 외에 커스텀으로 만들수도 있다! -
Directive
ngModel,*ngFor,*ngIf
용어? 정리
-
abstract class 적어도 하나의 추상 메서드가 선언되어야 함. 일반 메서드도 선언 가능. interface와의 차이: interface는 모든 메서드가 추상 메서드 — abstract method: 이름과 타입만 정의된 메서드
-
접근 제한자 — public : 클래스 내부, 자식 클래스 내부, 인스턴스 — protected: 클래스 내부, 자식 클래스 내부 — private: 클래스 내부
-
class implements
class Foo implements IFoo { ... }Foo 클래스는 IFoo 인터페이스를 구현해야 한다. IFoo에 정의한 메서드를 반드시 포함해야 함.
-
Duck Typing (structural typing)
코드는 Poiema Web 참조할 것
어떤 함수의 파라미터의 타입으로 특정 인터페이스를 지정했을 때, 인자로 전달되는 인스턴스가 해당 인터페이스를 implement 하고있지 않더라도, 정의한 메서드를 갖추고 있다면 implement한 것으로 판정해 에러를 띄우지 않는다.
-
meta data
개발자가 만든 Angular 구성요소나 서드파티 파일, 라이브러리를 Angular가 조합할 때는 이 구성요소들에 대한 정보가 필요합니다. 이런 정보를 메타데이터 (metadata) 라고 합니다.
컴포넌트 클래스에 지정해야 하는 메타데이터는 @Component 데코레이터에 지정합니다. 그리고 애플리케이션 동작에 필요한 메타데이터는 보통
@NgModule데코레이터에 지정합니다. -
서비스, 주입
service는provider가 인스턴스를 만들어(혹은 그냥 가져와서)injector에 등록하면 목적지(컴포넌트 등?)에 주입한다.@Injectable()은 사용되지 않는 클래스를 최종 빌드 결과물에서 제거할 대상으로 등록하는 역할도 한다.
기타
-
@Component 데코레이터의 속성 관련..
@Component({ templateUrl: `./..html`,// 템플릿 파일의 경로 styleUrl: [`./..css`],// 스타일 파일의 경로 // 이렇게 파일로 분리도 가능하지만 template: ` <h1> .. </h1> `, // html 그대로 인라인 작성 가능 styles: [` .heroes { background-color: black; } `] // css 그대로 인라인 작성 가능 }) -
*ngIf<div *ngIf="selectedHero"> <!-- *ngIf: selectedHero가 truthy일때 DOM에 표시. falsy면 DOM에서 제거함--> -
타입스크립트 > 제네릭
제네릭은 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다
