끄적끄적

타입스크립트의 데코레이터에 대해서 알아보고 정리해 보고자 합니다. 타입스크립트로 개발을 진행하다보면 필연적으로 데코레이터란 것을 접하게 됩니다. 자바를 경험한 사람이라면 어노테이션과 굉장히 흡사하다고 생각이 들 정도로 비슷하게 보이더라구요 (제가...그렇습니다.) 데코레이터는 함수 라고 할 수 있습니다. 데코레이터는 말 그대로 코드 조각을 장식해주는 역할을 하며 타입스크립트에서는 그 기능을 함수로 구현할 수 있습니다. 데코레이터(decorator) 데코레이터는 클래스 선언, 메서드, 접근자, 프로퍼티 또는 매개 변수에 첨부할 수 있는 특수한 종류의 선언입니다. 데코레이터 함수에는 target(현재타겟), key(속성이름), descriptor(설명)가 전달됩니다. 메소드나 클래스 인스턴스가 만들어지는 런..

우리가 구성한 패키지에 대해 알아보고 먼저 프로젝트를 진행하는게 좋을 것 같아 이번 포스팅은 우리가 환경 세팅에 활용한 패키지 구성에 대해 알아보려 합니다. "dependencies": { "babel-loader": "^8.0.6", "extract-text-webpack-plugin": "^3.0.2", "html-webpack-plugin": "^3.2.0", "path": "^0.12.7", "source-map-loader": "^0.2.4", "ts-loader": "^6.0.1", "typescript": "^3.4.5", "webpack": "^4.32.2", "webpack-cli": "^3.3.2", "webpack-dev-server": "^3.4.1", "webpack-merge":..

본격적으로 타입스크립트 프로젝트를 하기 위한 셋팅은 끝났습니다. 프로젝트를 들어가기전에 알아 두셔야 하는 개념부터 알고 들어가 보도록 합시다. 타입스크립트는 모든 변수나 파라미터, 프로퍼티 등의 타입을 정의 해야 합니다. (실제로 타입정의에 대한 비용 때문에 타입스크립트 도입에 대해 고민을 많이하죠^^) 타입 예제 const numberArray: number[] = [1, 2, 3]; const number: number = 1; const string: string = 'text'; const stringArray: string[] = ['1', '2', '3']; const boolean: boolean = true; function example(param: string): string { ret..

타입스크립트 프로젝트는 웹팩을 이용해 구현해 보기로 합시다. 먼저 간단히 프로젝트를 구성하기 위해 NPM을 설치합니다. 프로젝트를 설정하기 위해 프로젝트폴더를 생성하고 mkdir typescript-project $cd typescript-project $npm init $npm i webpack webpack-cli npm 패키지를 이용해 타입스크립트 프로젝트를 구성합니다. 타입스크립트 패키지를 인스톨 합시다. $npm install --save typescript ts-loader 프로젝트 구성도입니다. typescript-project |- /build |- base.js |- build.js |- dev.js |- /src |- types |- index.d.ts |- app.ts |- tscon..

TypeScript는 Microsoft에 의해 개발/관리되고 있는 오픈소스 프로그래밍 언어입니다. 대규모 애플리케이션을 개발하는 데 자바스크립트가 어렵고 불편하다는 불만에 대응하기 위해 개발되었습니다. TypeScript는 스크립트 언어의 표준인 ECMA Script (줄여서 ES)의 표준을 따르기 때문에 JavaScript 영역을 침범하지 않고 최신 ES를 지원합니다. '새로운 ES가 나올 때 마다, TypeScript 역시 버전 업을 하여 최신 ES의 기능을 지원합니다.' 타입스크립트의 특징 컴파일 동작 정적 타입 지정 객체 지향 프로그래밍 지원 interfaces & namespaces & modules generic mixins TypeScript를 사용하면 정적 타이핑이 가지는 장점을 Javas..