[TypeScript 기초] 1. 환경 설정

저도 요즘 공부하고 있는 Front-end 개발 관련 기초에 대한 레슨을 해 보려고 합니다. 저도 계속 공부 중이기 때문에 틀린 부분이 있을 수도 있으니 혹시 오류를 발견하시면 댓글 부탁드립니다. 특히 Front-end 개발에 반드시 필요한 TypeScript 관련된 기초 내용을 포스팅합니다.

Node.js, TypeScript가 무엇인지 왜 사용하는지는 너무나 많은 블로그 포스트가 있기에 생략합니다. 여기서는 실제 간단한 예제 위주의 프로젝트로 진행합니다.

우선 Node.js와 Visual Studio Code를 다운 받아 설치합니다. Node.js는 Javascript 기반을 프레임워크이고 Visual Studio Code는 마이크로 소프트에서 제공하는 무료 IDE 입니다. Notepad++ 이나 Atom 같은 무료 텍스트 에디터나 Web Storm 같은 유로 IDE를 사용할 수 도 있으나 무료에다가 강력한 플러그인들을 보유하고 있는 VS Code는 Front-end 개발 최적화 툴 중 하나입니다.

우선 Node.js는 https://nodejs.org/ko/ 에서 다운 받아 설치합니다.

VS Code는 https://code.visualstudio.com/ 에서 다운 받아 설치합니다.

TypeScript 개발을 할 것이므로 당연히 TypeScript 설치가 필요하며, Browserify도 같이 설치합니다. Browserify는 TypeScript에서 JavaScript로 변환된 파일을 번들링을 하기 위한 Tool입니다. 최근에는 webpack을 많이 사용하나 여기서는 간단한 예제 위주로 설명하므로 Browserify를 이용합니다.

VS code 설치가 완료되면 실행시켜 터미널 창을 엽니다. 터미널 창이 안 보일 경우 View > Integrated Terminal로 터미널 창을 열 수 있습니다.

다음 두 command를 실행 시킵니다.

1) npm install -g typescript

2) npm install -g browserify

-g 옵션은은 global 옵션으로 해당 프로젝트 뿐 아니라 모든 프로젝트에서 global하게 사용할 수 있도록 install을 하라는 의미입니다. 그러므로 여러 프로젝트에서 TypeScript와 Browserify를 이용할 수 있습니다.

이상으로 TypeScript를 이용한 개발에 필요한 환경 설정을 완료하였습니다. 다음에는 Object 바인딩 부분에 대한 레슨을 준비해 보도록 하겠습니다.