TypeScript와 함께 Node.js + Express 환경 세팅(feat. npm, yarn)

만두·2021년 9월 7일

express node.js npm yarn

Node.js + Express + Typescript 환경 세팅법 입니다.
뭔가 처음 개발할때도 이렇게 삽질하진 않았던 것 같은데 다시 찾아보지 않기 위해 기록합니다. VS Code를 사용했습니다.

😺 TypeScript란?

MS에서 개발하고 관리하는 오픈소스 프로그래밍 언어입니다.

자바스크립트 기반으로 변수의 데이터 타입을 지정하여 예측 가능한 코딩이 가능하게 만듭니다.

TypeScript 파일(.ts)은 브라우저에서 동작하지 않으므로 TypeScript 컴파일러(tsc)를 이용해 자바스크립트 파일로 변환해야 합니다.
타입스크립트란? 참고 글

😺 세팅 전 npm, yarn에 대하여

1. npm이란?

Node.js는 자바스크립트 기반 개발 환경입니다.
전 세계 개발자들이 자바스크립트로 패키지를 만들었고, 그 패키지를 포장해서 모아 놓은 곳이 npm입니다. 우리는 선물을 가져다가 풀어보면 됩니다.🤩
Node.js로 자바스크립트 개발 환경을 구축하고, npm으로 필요한 자바스크립트 앱 개발 도구들을 설치 해 사용합니다.

Spring Framework의 maven 같은거라고 하니까 확 와닿았습니다.

2. yarn이란?

npm의 단점들을 보완하여 나온 패키지 관리 도구 입니다.
npm과 yarn의 차이점을 찾던 중 이 글을 읽어봤는데요!
아래의 차이점이 마음에 들어서 yarn을 사용 해 보게되었습니다.
npm은 패키지가 설치 될 때 자동으로 코드와 의존성을 실행할 수 있도록 허용했다. 이 특징은 편리하나 안정성의 위험도가 증가했다. 특히 정책 없이 등록하였던 패키지 제출물 부분에서 위험도가 높았다. 반면에 yarn은 yarn.lock이나 package.json으로 부터 설치만 한다. 더 구체적으로 말하자면 yarn.lock은 모든 디바이스에 같은 패키지를 설치하는 것을 보장하여 다른 버전을 설치로 부터 버그가 오는 많은 양을 줄여버렸다.

✨ Node.js + Express + Typescript 세팅 시작!

1. packages.json 파일 생성

packages.json 파일이란?

프로젝트 정보와 의존성(dependencies)을 관리하는 문서입니다.
패키지 설치 시 여기에 그 정보가 기록됩니다.(이름, 버전 등)

아래 커맨드를 입력하여 package.json 파일을 생성합니다.

$ yarn init

서버를 세팅할 폴더를 만들고 거기서 vs code를 열고 터미널을 여세요. 뭔가를 많이 물어볼텐데 entry point만 app.ts로 입력해주시면 됩니다! (제 포스팅 샘플 코드 파일명이 app.ts입니다)

2. 필요 구성 요소 설치

express, typescript, ts-node, nodemon을 설치합니다!

yarn add -D express typescript ts-node nodemon @types/node @types/express

nodemon : 서버 코드를 변경 할 때마다 서버를 재시작하는건 귀찮은 일입니다. 이 일을 자동으로 대신 해줍니다!
ts-node : Node.js 상에서 TypeScript Compiler를 통하지 않고도, 직접 TypeScript를 실행시키는 역할을 합니다.

3. tsconfig.json 파일 생성

TypeScript로 짜여진 코드를 JavaScript로 컴파일하는 옵션을 설정하는 파일입니다. TypeScript 컴파일은 tsc 라는 명령어를 사용합니다.
아래 커맨드로 tsconfig.json 파일을 생성합니다.

$ npx tsc --init

저는 이렇게 설정해줬습니다!

{
  "compilerOptions": {
    "target": "es6", // 어떤 버전으로 컴파일할지 작성 
    "module": "commonjs", //어떤 모듈 방식으로 컴파일할지 설정
    "outDir": "./dist",	//컴파일 후 js 파일들이 생성되는 곳
    "rootDir": ".",	//루트 폴더
    "strict": true,	//strict 옵션 활성화
    "moduleResolution": "node",	//모듈 해석 방법 설정: 'node' (Node.js)
    "esModuleInterop": true,
     "jsx": "react"
  }
}

esModuleInterop 속성이 true로 설정될 경우, ES6 모듈 사양을 준수하여 CommonJS 모듈을 가져올 수 있게 됩니다. 저는 세팅 중 import 에러가 나서 추가해줬어용

tsconfig.json 파일의 각 옵션에 대한 자세한 설명은 여기를 참조하세요!

4. express 코드 작성

root 폴더 아래 src/app.ts를 작성해줍니다.

import express, { Request, Response, NextFunction } from 'express';

const app = express();


app.get('/welcome', (req: Request, res: Response, next: NextFunction) => {
    res.send('welcome!');
});

app.listen('1234', () => {
    console.log(`
  ################################################
  🛡️  Server listening on port: 1234🛡️
  ################################################
`);
});

app.get의 url로 접속을 하면 해당 블록의 코드를 실행합니다.
app.listen의 포트로 접속하면 해당 블록의 코드를 실행합니다.

5. packages.json 파일 수정

package.json 파일을 수정합니다.
scripts 안에 있는 요소는 터미널에 $ yarn dev 이런식으로 써주면 실행됩니다. 아까 설치한 nodemon과 ts-node를 이용하여 서버를 시작하는 스크립트를 작성합니다.

...
"scripts": {
    "start": "node dist/app.js", 
    "build": "tsc -p .", 
    "dev": "nodemon --watch \"src/**/*.ts\" --exec \"ts-node\" src/app.ts"
  }
 ...

"start": "node dist/app.js" : 컴파일된 js파일로 시작
"build": "tsc -p ." : typescript를 javascript로 빌드