3장. 타입스크립트

위의 책을 공부하며 정리하는 포스트이다.

AngularJS

디렉티브

HTML 태그나 어트리뷰트의 기능을 새롭게 만드는 개념. 애플리케이션의 요구 사항에 맞게 HTML 태그를 확장할 수 있다.

ng-app

<div>에 ng-app 어트리뷰트를 추가하면 그 <div>만 AngularJS의 영향을 받는다.

바인딩

뷰와 모델이 서로를 갱신하는것. AngularJS는 모델이 갱신될 때마다 전체 애플리케이션에 영향을 미치는 $digest 함수를 실행하면서 데이터 바인딩을 점검하고 DOM 객체의 값을 갱신한다.

socpe

모델의 값은 $scope라는 스코프 안에 선언되며 AngularJS에서는 이 스코프를 여러 계층으로 구성한다.

Angular

NgModule

모듈은 클래스에 @NgModule 어노테이션을 붙여서 지정하고 이 어노테이션 안에서 모듈 내용을 설정한다.

SystemJS 모듈로더

JS는 script 태그 안에서 로드하고 실행하지만 Angular도 이 방법을 사용할 수 있지만 SystemJS 라이브러리를 사용해서 불러오는것을 권장한다.
why? 스크립트 태그를 삭제하지 않으면 이를 불러오려고 하고 불필요한 부하 발생 , 스크립트 태그의 실행순서를 보장하지 않기 때문에 문제가 될 수 있다.

environment.ts 파일 -> 빌드를 위한 개발환경 설정 정보들

빌드명령어

Angular-CLI로 만들어진 프로젝트의 코드는 타입스크립트 기반이기 때문에 빌드를 통해 브라우저에서 동작 가능한 자바스크립트로 변환해야 한다.

ng build

프로덕션용 빌드 명령어
ng build –prod

3장 타입스크립트

1.let을 이용한 변수선언

ES 5 이하에서 호이스팅 문제가 발생하므로 이를 해결하기 위해 ES6의 좋은 특징인 let 선언자를 이용

타입스크립트는 변수명 뒤에 타입을 명시해야 한다. 타입스크립트를 타입 언어라고 하는 이유는 이와 같은 이유이다.
let 변수명 : 타입;
let emotion2:string=”happy”;

배열타입

배열정의 형태1

let fruits: string[] = [“a”,”b”];

let fruits2: string[] = [];
fruits2.push(“a”);

배열정의 형태2

let num:Array = [1,2,3];

유니언 타입 56p

유니언 타입은 2개 이상으로 입력된 타입에 대해 하나의 타입으로 정의하는것. 메소드의 파라미터로 사용가능.
var unionX: string | number = 1;
console.log(typeof unionX, unionX); // number 1 출력

문자열 표현 58p

+와 \n을 써서 줄바꿈이 가능하지만 다음과 같이 가능하다.
let w: string =”world”;
let one: number = 1;
function hi(){
return “hi”;
}

let hello_message: string =hello ${w} 1 + ${one} = ${1+1} ${hi()}
console.log(hello_message);

디스트럭처링 지원 60p

ES6에 포함된 특징으로 배열이나 객체에서 데이터를 선택적으로 추출할 수 있는 자바스크립트 할당식이다.
var params2 = [‘happy 동물원’, 100];
let[m_name2, m_num2] = params2;

Share