티스토리 뷰
목차
Node.js 생태계를 체험하자
TypeScript는 JavaScript로의 변환을 목적으로 만들어진 언어입니다. 공식적인 처리 루틴이 있고, 변환하면 JavaScript가 생성됩니다. 공부 목적으로 실행하려면 현재 몇 가지 옵션이 있습니다. 이 가운데 우선 안정적으로 사용할 수 있고, 비교적 간단한 것은 ts-node 입니다.
- 타입스크립트 웹 사이트 playground 1 : 공식 컴파일러로 변환하여 브라우저에서 실행
- tsc + Node.js : 공식 컴파일러로 변환하고 Node.js에서 실행
- babel + ts-loader + Node.js : Babel 통해 공식 컴파일러로 변환하고 Node.js에서 실행
- babel + @ babel / preset-typescript + Node.js : Babel에서 형식 정보만 떨궈 간이적으로 변환하고 Node.js에서 실행
- ts-node : TypeScript를 변환하고 그대로 Node.js에서 실행하는 처리
- deno : TypeScript를 네이티브 지원 (아직 테스트 버전)
Node.js는 JavaScript 파일 입출력이나 웹 서버 생성에 필요한 API 등을 더했습니다. 이 글에서는 타입스크립트 환경을 구축하고 Node.js를 중심으로 한 시스템 개요를 설명합니다.
프로그래밍 언어를 배우고 쓰기 시작하면 언어의 지식만으로는 부족함을 느끼게 됩니다. 어디에 소스 코드를 쓰고 어떻게 빌드 툴을 실행할지 어떻게 테스트할 것인지 등 언어 주변의 시스템을 배우지 않으면 어디서부터 손을 대야 할지 모릅니다. 이 글에서 소개하는 에코 시스템의 주변 도구와 설정 파일은 다음과 같습니다.
- Node.js : 처리계
- npm 명령 : 패키지 관리자
- package.json : 프로젝트 파일
- 의존 패키지 관리
- scripts 에서 개발 작업 실행기로 이용
- npx 명령 : Node.js 용 npm 패키지로 제공되는 도구 실행
- TypeScript 관련 패키지
- tsc : TypeScript 컴파일러 (프로젝트 TypeScript 설정 파일 작성)
- ts-node : 타입스크립트로 변환하면서 실행하는 Node.js의 래퍼 명령
우선 Node.js를 설치하고 npm 명령어를 사용하세요. 또한 이 글에서는 처음부터 환경을 구축합니다. (개인적으론 속도가 빠른 yarn도 좋아합니다. vue js 다룰 땐 주로 yarn를 이용했네요)
Node.js 설치
Node.js는 공식 사이트 https://nodejs.org 에서 다운로드하세요. 또는 chocolatey과 Homebrew, macports 등의 패키지 관리자 등을 사용해 설치할 수 있습니다. 만약 여러 버전을 전환하여 검증하는 경우에는 nvm을 사용할 수 있습니다. 그러나 프론트엔드 개발의 경우 코드 변환, 실행 환경(다른 환경 : 브라우저? 클라우드 서비스?) 등의 문제가 있기 때문에 공부가 목적이라면 일단 최신 LTS를 설치해도 문제없을 겁니다. (단, AWS Lambda 등의 특정 환경에서의 동작을 확인하고 싶은 경우는 제외).
Node.js를 설치하면 표준 패키지 관리자 npm도 설치됩니다. 혹시 패키지 관리자의 종류에 따라 설치되지 않는 경우도 있으므로, 그 경우는 추가 설치하십시오.
npm 명령은 패키지의 다운로드를 위해 인터넷에 접속하는 겁니다. 만약 사내 프록시 등이 있는 경우는 npm을 설치한 후 설정해 두는 것을 추천합니다.
프록시 설정
npm config set proxy http: // Account 이름 : 비밀번호@프록시 URL
npm config set https-proxy http: // Account 이름 : 비밀번호@프록시 URL
package.json작성 및 ts-node 설치
먼저 작업 폴더를 만들고 package.json을 만듭니다.
$ mkdir try_ts
$ cd try_ts
$ npm init -y
{
"name": "try_ts",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
package.json은 Node.js를 이용한 프로젝트의 핵심 파일입니다. 다음과 같은 정보가 들어 있습니다.
- 타입스크립트 프로젝트의 다양한 정보
- 프로젝트가 의존하는 (실행에 필요한 또는 개발에 필요) 라이브러리 정보
- 프로젝트의 빌드와 테스트 실행 등 프로젝트 개발에 필요한 작업의 실행
다른 사람이 작업하는 프로젝트의 코드를 볼 때도 우선 package.json을 기점으로 분석해야 효율적입니다. npm init 명령으로 생성되며 package.json은 우선 폴더 이름에서 부여된 이름, 고정 버전(1.0.0) 설명이 들어 있습니다. 이 파일은 패키지 저장소인 npmjs.org에 업로드할 때 필요한 정보도 들어 있습니다. "private": true를 추가해 보겠습니다.
{
"name": "env",
"version": "1.0.0",
"description": "",
"private": true
:
}
이어서 필요한 도구를 설치합니다. npm install에서 ts-node, typescript을 추가합니다. --save-dev를 쓰면 개발에 필요하지만 릴리스엔 포함하지 않는다는 의미입니다.
$ npm install --save-dev ts-node typescript
만약 실행(배포) 환경에서도 ts-node를 사용하여 빌드하고 싶다는 것이 있으면 --save-dev대신 --save를 붙입니다.
$ npm install --save ts-node
package.json을 보면 항목이 추가된 것을 확인할 수 있습니다. 또한 package-lock.json라는 환경을 구축했을 때의 전체 라이브러리 버전 정보가 포함된 파일도 생성됩니다. 이 파일을 직접 수정할 순 없습니다.
{
"dependencies": {
"ts-node": "^8.0.2"
},
"devDependencies": {
"typescript": "^3.3.1"
}
}
또한 node_modules 폴더 및 필요한 라이브러리 등이 설치되어 있는 경로도 알 수 있습니다. 다른 언어와는 달리 기본적으로 Node.js는 현재 폴더가 아닌 곳에 설치할 수 없습니다(캐시는 있지만). 여러 프로젝트를 맡은 경우에도 프로젝트 간에 설치하는 라이브러리와 도구의 버전이 어긋나는 것을 걱정할 필요가 없습니다.
프로젝트 팀 간에 공유할 때는 이 package.json이 있는 폴더를 버전 관리 시스템에 넣습니다. 그러나 node_modules는 배포할 필요가 없습니다. .gitignore 같은 이름을 넣어두면 좋습니다.
-- 미완성 문서입니다. --