초간단 Typescript 개발환경 셋업
마틴파울러의 Refactorying책에 나온 예제 자바코드를 타입스크립트 코드로 변경해 공부해보고 있는 요즈음 최대한 쉽고 빠르게 Typescript 테스트 환경을 구축할 수 있는 방법을 찾아보다가 알게 된 내용을 정리해보았다. tsx파일을 컴파일하여 개발서버에 띄우고, 코드가 수정되면 자동으로 반영되는 환경까지를 구축해볼 것이다.
Typescript로 작성된 .tsx파일은 브라우저에서 바로 읽어낼 수 없기 때문에 tsc(Typescript compiler)를 통해 transpileing되고 minify(Optional)된 es5코드로 변경해주어야 한다. 이를 위해 tscompiler를 위한 tsconfig.json파일 등을 추가적으로 설정해주어야 한다. 또한 수정된 코드가 즉각적으로 반영되도록 하려면 webpack dev server등을 추가적으로 설치해주어야 했는데 한층 간편하게 환경을 셋업할 수 있는 방법을 정리해보았다.
- 먼저 개발을 위한 디렉토리를 생성하고 npm프로젝트를 초기화한다.
$ mkdir ts-setting && cd $_
$ npm init -ynpm init시 -y옵션을 지정해주지 않으면 개발환경에 대한 초기 설정을 정할 수 있다. 특별히 설정해줄 내용이 없다면 엔터키를 계속 눌러서 넘어가주면 되고, 그게 귀찮다면 -y옵션을 넣어주면 된다.
package name: (ts-setting)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/apple/Documents/posting/ts-setting/package.json:{
“name”: “ts-setting”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1"
},
“author”: “”,
“license”: “ISC”
}
2. npm명령어를 통해 Typescript를 설치한다.
$ npm install -D typescript권한문제로 설치가 거부되는 경우가 있는데 그럴 경우 ‘sudo’명령어를 통해 설치하면 된다. ‘-D’옵션은 ‘ — save-dev’의 축약형으로, 개발환경에서만 사용되는 모듈로 설치한다는 의미이다.
3. npm명령어를 통해 Preact를 설치한다.
기존에는 react와 react-dom, 그리고 typescript 실행을 위한 @types/react와 @types/react-dom을 설치해 주어야 했지만, typescript 정보를 내장하고 있고 훨씬 가벼운 preact를 설치해준다.
$ npm install preactpreact만 설치해준다면 별도의 다른 모듈 설치없이 react와 typescript 문법의 명령어를 컴파일해줄 수 있다.
4. html파일과 tsx파일을 작성한다.
<!-- index.html --><!DOCTYPE html><html><head> <title>App</title> <meta charset=”utf-8"></head><body> <h1>Mini React app ❤</h1> <div id=”app”></div> <script src=”/app.tsx”></script></body></html>
index.html파일에서는 번들링될 app.js파일을 로드한다.
// app.tsximport * as React from 'preact';import * as ReactDOM from 'preact';
// 'h is not defined' error가 뜬다면 하위 코드를 추가var h = React.createElement;
class App extends React.Component<{greeting: string}, {count:number}> { state = {count: 0}; render() { return ( <div> <h2>{this.props.greeting}</h2> <button onClick={() => this.setState({count: this.state.count+1})}> This button has been clicked {this.state.count} times. </button> </div>); }}ReactDOM.render( <App greeting="Hello, world!"/>,
document.getElementById('app'));
greeting prop을 받아 타이틀로 보여주고, 버튼을 클릭할 때마다 count state를 1 증가시키는 간단한 앱을 작성하였다.
5. *npm명령어를 통해 parcel을 설치한다.
$ npm install --global parcel-bundler다음은 이번 포스팅의 하이라이트라고 할 수 있는 parcel bundler를 설치한다.
참조한 포스팅의 내용에 따르면 81.9M로 용량이 큰 모듈이기 때문에 글로벌로 설치하고 사용해야 한다고(should) 한다.
이후에는
parcel index.html명령어를 통해 해당 앱을 실행하면 된다.
parcel은 다음과 같은 기능을 지원한다.
- React나 Preact가 설치되어 있지 않은데 코드상에서 사용하고 있다면, 자동으로 설치해준다.
- 소스코드를 싱글파일(
app.dd451710.js)로 번들링해준다. - 번들링된 파일과 의존성 관계를 통합한
index.html파일을 생성해준다. - 새로 생성된 파일들을
distDirectory에 생성해준다. - 컴파일된 코드를 웹브라우저에서 확인할 수 있도록
http://127.0.0.1:1234미니 웹서버를 실행시킨다. - app.tsx와 index.html파일을 확인하고 있다가 변경사항이 있을 경우 반영하여 다시 컴파일시켜준다.
- 이후에는 웹 브라운저에 command를 날려 자동으로 화면을 refresh시켜준다.
- Hot Module Replacement 기능을 이용해 페이지를 완전히 리로딩하지 않고 update시켜준다.
최종적으로 우리는 이제 typescipt개발환경을 셋업할 때 typescript와 preact, parcel-bundler이 세가지 모듈만 설치해주면 수정사항을 실시간으로 반영해주는 웹 서버에서 typescript코드를 사용할 수 있게 되었다!