2018/07/11 - [개발자] - [TypeScript 기초] 1. 환경 설정에 이어서 실제 간단한 프로그래밍을 해 보겠습니다.
우리가 만들 프로젝트의 구조는 다음과 같습니다.
- root
- src : TypeScript 소스를 저장할 디렉토리
- built: TypeScript를 컴파일하여 나온 JavaScript를 저장할 디렉토리
이렇게 디렉토리를 만듭니다. 그 후 VS Code로 폴더 열기를 하여 root 디렉토리를 엽니다.
1장에서 반드시 필요한 패키지만 설치 하였는데, 개발에 필요한 패키지를 추가로 설치해 줍니다. 터미널을 연 후
1) npm init을 하여 package.json 파일을 생성합니다. 모두 기본 값으로 계속 엔터 연타
2) npm install light-server --save-dev : NodeJs에서 돌아가는 웹서버 입니다.
3) npm install knockout : 데이터 바인딩을 위해 knockout을 사용합니다.
4) npm install @types/knockout --save-dev : TypeScript는 3)에서 설치한 knockout library의 타입을 알지 못합니다. ko (Knockout)에 대한 타입이 정의되어 있는 패키지입니다.
모두 설치가 완료 되었으면 scripts 섹션이 start 부분을 추가하여 웹 서버를 구동할 수 있게 해 줍니다. 저는 3000번 포트에서 서비스가 돌아가게끔 설정하였습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | { "name": "typescript-example", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "light-server -s . -p 3000" }, "author": "", "license": "ISC", "dependencies": { "knockout": "^3.4.2" }, "devDependencies": { "@types/knockout": "^3.4.58", "light-server": "^2.5.1" } } | cs |
다음은 TypeScript가 컴파일 시 사용할 설정 파일인 tsconfig.json을 만들어 줍니다. 터미널에서 tsc --init 을 실행하면 자동으로 기본 설정을 담은 tsconfig.json이 생성됩니다. config를 아래와 같이 고쳐 줍니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | { "compilerOptions": { "target": "es5", "module": "commonjs", "sourceMap": true, "outDir": "./built/", "strict": true, "noImplicitAny": false }, "include": [ "./src/*.ts" ], "exclude": [ "node_modules" ] } | cs |
이제 웹서버를 구동시켜 봅니다. 터미널 창에서 npm start 후 Browser에서 http://localhost:3000으로 접속하면 Cannot GET / 라고 나오면 모든 것이 정상적으로 설치된 것입니다.
root 폴더에 index.html 파일을 아래와 같이 추가해 줍니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello Knockout!</title> </head> <body> <p> Hello from <strong data-bind="text: language">todo</strong> and <strong data-bind="text: framework">todo</strong>! </p> <p>Language: <input data-bind="value: language" /></p> <p>Framework: <input data-bind="value: framework" /></p> <script src="/built/bundle.js"></script> </body> </html> | cs |
그 후 src 폴더에 index.ts로 다음 파일을 추가합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 | import * as ko from "knockout"; class HelloViewModel { language: KnockoutObservable<string> framework: KnockoutObservable<string> constructor(language: string, framework: string) { this.language = ko.observable(language); this.framework = ko.observable(framework); } } ko.applyBindings(new HelloViewModel("TypeScript", "Knockout")); | cs |
1라인: @types/knockout로 설치된 knockout 모듈을 import하여 TyesScript에서 사용할 수 있게 해 줍니다.
3라인: class를 정의 합니다.
4-5라인: language property를 정의하여 타입을 KnockoutObseravble<string>으로 정의합니다. TypeScript의 가장 강점 중에 하나인 type를 지정하여 개발 시 버그를 최소화 해줍니다.
7라인: constructor를 정의하며 language와 framework를 파라미터로 받습니다. language와 framework 모두 type은 string으로 정의 되어 있습니다.
8-9라인: constructor에서 받은 parameter를 language, framework property에 할당 합니다.
13라인: HelloViewModel 클래스를 initiate한 후 knockout에 바인딩 시켜 줍니다.
이로써 코드는 모두 완성 되었으므로, TypeScript를 compile 해 보도록 하겠습니다.
웹 서버를 구동하는 터미널은 그대로 둔 채 오른쪽 상단의 플러스 버튼을 클릭하여 새로운 터미널을 엽니다.
1) tsc : 개발한 TypeScript를 compile 합니다.
2) browserify ./built/index.js -o ./built/bundle.js : 컴파일된 index.js 파일과 knockout.js을 bundle.js로 만듭니다.
이제 Browser에서 http://localhost:3000으로 페이지를 열면 개발된 TypeScript와 HTML 페이지를 볼 수 있습니다. Input 박스에 값을 변경시켜 보세요. 상단의 Hello from 부분이 같이 변경되게 됩니다. Knockout을 이용하였기 때문에 two way 바인딩이 가능합니다.
built 디렉토리 안의 bundle.js 파일이 최종 생성된 JavaScript 파일인데, 우리가 개발한 TypeScript와 Knockout 라이브러리가 모두 합쳐저 하나의 bundle로 서비스하게 됩니다. 왜 bundling을 하는지는 다음에 알아보도록 하겠습니다.
고생하셨습니다.
'개발 이야기' 카테고리의 다른 글
| [TypeScript 기초] 4. Ajax를 이용한 리스트 바인딩 (0) | 2018.07.14 |
|---|---|
| [TypeScript 기초] 3. 스크립트 번들링 (0) | 2018.07.13 |
| [TypeScript 기초] 1. 환경 설정 (0) | 2018.07.11 |
| Ajax 데이터 바인딩 - Knockout.js (0) | 2018.07.09 |
| 코드 리뷰 및 리팩토링 (0) | 2018.06.23 |
최근댓글