자유 (26) 썸네일형 리스트형 프로젝트 구성요소 생성 프로젝트 구성요소 생성프로젝트에 새로운 구성요소를 생성하기 위해서는 ng generate 명령어를 사용한다. 하지만 generate라는 단어를 구성요소를 생성할 때 일일히 입력하기엔 번거로우니 축약형인 ng g로 대부분 구성요소를 생성한다. 생성 대상 구성요소 명령어 축약형 컴포넌트 ng generate component ng g c 디렉티브 ng generate directive ng g d 파이프 ng generate pipe ng g p 서비스 ng generate service ng g s 모듈 ng generate module ng g m 가드 ng generate guard ng g g 클래스 ng generate class ng g cl 인터페이스 ng generate interface ng.. Angular CLI Angular CLI이 글에선 Angular CLI에 대해 알아보고 설치, 프로젝트를 생성하고 실행하는 것까지 진행하겠습니다. #1 Angular CLI란? Angular CLI는 간단한 명령어를 사용해 angular 프로젝트 스캐폴딩을 생성, 실행, 빌드할 수 있으며 angular의 다양한 구성요소를 선별적으로 추가할 수 있는 커멘드라인 인터페이스이다.개발용 서버를 내장하고 있어 간단히 프로젝트를 실행시켜 동작을 확인할 수 있다. Angular CLI가 지원하는 기능은● Angular 프로젝트 생성● Angular 프로젝트에 컴포넌트, 디렉티브, 파이프, 서비스, 클래스, 인터페이스 등의 구성요소 추가● LiveReload를 지원하는 내장 개발 서버를 사용한 Angular 프로젝트 실행● Unit/E2.. 제네릭 제네릭TypeScript는 정적 타입 언어이기 때문에 함수 또는 클래스를 정의하는 시점에 매개변수나 반환값의 타입을 선언해야 한다.그런데 함수 또는 클래스를 정의하는 시점에 매개변수나 반환값의 타입을 선언하기 어려운 경우가 있따. 다음 예제는 FIFO 구조로 데이터를 저장하는 큐를 표현한 것이다.class Queue { protected data = []; // data: any [] push(item) { this.data.push(item); } pop() { return this.data.shift(); } } const queue = new Queue(); queue.push(0); queue.push(1); // 의도하지 않은 실수! console.log(queue.pop().toFixed()).. 인터페이스 인터페이스인터페이스는 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다.또한 인터페이스는 여러 가지 자료형을 갖는 프로퍼티로 이루어진 새로운 자료형을 정의하는 것과 유사하다.ES6는 인터페이스를 지원하지 않지만 TypeScript는 인터페이스를 지원한다. 인터페이스는 프로퍼티와 메소드를 가질 수 없다는 점에서 클래스와 유사하나 직접 인스턴스를 생성할 수는 없고 모든 메소드는 추상 메소드이다.단, 추상 클래스의 추상 메소드와 달리 abstract 키워드를 사용하지 않는다.그럼 이제 본격적으로 인터페이스에 대해서 알아보자.#1 변수와 인터페이스1. 인터페이스는 변수의 타입으로 사용이 가능하다. 이때 인터페이스를 타입으로 선언한 변수는 해당 인터페이스를 준수해야 한다. 이는 새로운 .. 클래스 클래스ES6에서 새롭게 도입된 클래스는 기존 프로토타입 기반 객체지향 언어보다 클래스 기반 언어에 익숙한 개발자가 보다 빠르게 학습할 수 있다는 단순명료한 문법을 제시하고 있다.하지만 클래스가 새로운 객체지향 모델을 제공하는 것은 아니며 사실 클래스도 함수이기 때문에 기존 프로토타입 기반 패턴의 문법적 설탕일 뿐이다.#1 클래스 정의ES6 클래스는 클래스 몸체에 메소드만 포함할 수 있다. 클래스 몸체에 클래스 프로퍼티를 선언할 수 없고 반드시 생성자 내부에서 클래스 프로퍼티를 선언하고 초기화한다. 그리고 TypeScript 클래스는 클래스 몸체에 클래스 프로퍼티를 사전에 선언해야 한다. class Person { // 클래스 프로퍼티를 사전에 선언해야 한다 name: string; constructor(.. TypeScript 정적 타이핑 TypeScript 정적 타이핑#1 타입 선언TypeScript는 아래와 같이 변수명 뒤에 타입을 명시하는 것으로 타입을 선언할 수 있다. // 변수 foo는 string 타입이다 let foo: string = 'hello'; TypeScript는 ES5, ES6의 상위 집합이므로 자바스크립트의 타입을 그대로 사용할 수 있으며 자바스트립트 타입 외에도 TypeScript 고유의 타입이 추가로 제공된다.다양한 타입을 선언하는 방법은 아래와 같다. // boolean let isDone: boolean = false; // null let n: null = null; // undefined let u: undefined = undefined; // number let decimal: number = 6; .. TypeScript??? TypeScript??? #1 TypeScript 타입스크립트는 자바스크립트 대체 언어의 하나로써 자바스크립트의 상위 집합이다.C#의 창시자인 아네르스 아일스베르가 개발을 주도한 타입스크립트는 마이크로소프트에서 2012년 발표한 오픈소스로, 정적 타이핑을 지원하며 ES6의 클래스, 모듈 등과 ES7의 데코레이터 등을 지원한다. TypeScript는 ES5의 상위 집합이므로 기존의 자바스크립트 문법을 그대로 사용할 수 있다.또한, ES6의 새로운 기능을 사용하기 위해 바벨과 같은 별도의 트랜스파일러를 사용하지 않아도 ES6의 새로운 기능을 기존의 자바스크립트 엔진에서 실행이 가능하다. #2 장점[ 정적 타입 ]TypeScript를 사용하는 가장 큰 이유 중 하나는 정적 타입을 지원한다는 것이다. funct.. Babel, Webpack을 이용해 ES6 개발환경 구축해보기 Babel, Webpack을 이용해 ES6 개발환경 구축해보기이번 포스팅은 ECMAScript6의 마지막 포스팅이다.마지막인 만큼 화이팅! 현재 브라우저는 ES6를 완벽하게 지원하지 않기 떄문에 따로 개발환경을 구축해야 하는데 바로 Babel과 Webpack을 이용한다.#1 Babel CLI 설치Babel은 트랜스파일러로서 ES6를 ES5 이하의 버전으로 트랜스파일링하는 역할을 한다. npm을 사용하여 Babel CLI를 로컬로 설치한다.설치가 완료된 후 package.json 파일은 아래와 같다. (불필요한 파일들은 삭제!) { "name": "es6-project", "version": "1.0.0", "devDependencies": { "babel-cli": "^6.26.0" } }#2 .babe.. 이전 1 2 3 4 다음
