TypeSrcript를 사용하여 Express 세팅

안녕하세요. 사이드 프로젝트를 시작하며, TypeScript를 사용하여 Express 서버를 세팅해봤는데, 생각보다 찾아보고 설정해야할 항목이 많아서, 같은 상황에 도움이 될까하여 포스팅을 진행해봅니다.

---

1. 설치 환경
2. npm init 및 nodemon 설치
3. typescript 및 ts-node 설치 및 세팅
4. express 설치 및 세팅

---

1. 설치 환경 

운영체제	Windows 10 Pro
사용 툴	VSCode 1.59
node	v14.17.3
npm	6.14.13

 

---

2. npm init 및 nodemon 설치

프로젝트를 진행 할 디렉토리를 생성해주고, npm init을 하여  package.json 파일을 생성해 줍니다.

npm init

저는 github에서 클론 생성한 디렉토리라 README.md 가 있습니다. 일반적으로 디렉토리를 생성했다면 없는 것이 정상입니다.

nodemon은 파일을 수정 후 재기동 없이 변경사항을 적용 시키기 위해 사용 됩니다. 자세한 정보는 링크에서 확인 부탁드립니다.

npm install -g nodemon

https://www.npmjs.com/package/nodemon

환경변수 세팅이 번거로워 글로벌로 설치를 진행했습니다만 진행 도중에 환경변수 세팅하여, 진행 되었음을 알려드립니다. 환경변수 세팅에 대해서는 다음에 포스팅을 진행하겠습니다.

설치 완료 확인은, 간단한 콘솔로그를 보여주는 js 파일을 생성하여 nodemon 으로 실행 시켜보는 방법입니다. 

// TEST Code
// Filename : index.js or index.ts
// TEST console : nodemon . or nodemon ./index.js

setInterval(() => {
  console.log(`nodemon Test Time : ${new Date().toLocaleTimeString()}`);
}, 1000);

실행 시켜본 후 nodemon을 종료하지 않은 상태에서, 파일을 수정하여 종료 없이 적용이 되는지를 확인 합니다.

---

3. typescript 및 ts-node 설치 및 세팅

 nodemon까지 무리 없이 설치가 진행 되었다면, typescript 설치를 진행해 보겠습니다.

https://www.npmjs.com/package/ts-node

ts-node

npm install -D typescript
npm install -D ts-node

정상적인 설치가 진행 되었다면, tsc 명령어를 사용할 수 있습니다. 테스트를 하기 위해 tsc -v 로 tsc 버전을 확인해 봅니다.

tsc -v

만약 위와 같은 오류가 뜬다면, 따라서 진행 부탁드립니다. 정상적으로 버전 확인이 가능하다면 따라하지 않아도 됩니다.

windows 10 기준 [시작]버튼 을 클릭하고, (또는 [Windows 버튼]) "windows powershell" 이라고 쳐줍니다.

Windows PowerShell이 보이면, 우 클릭하여 [관리자 권한으로 실행]을 눌러 창을 띄웁니다.

Set-ExecutionPolicy Unrestricted 를 실행 후 Y로 기재후 엔터를 줍니다.

Set-ExecutionPolicy Unrestricted

다음에 tsc -v 를 이용하여 다시 버전을 확인을 진행합니다. 위 그림처럼 나오면 정상입니다.

tsc --init 명령을 사용하여 tsconfig.json 파일을 생성합니다.

tsc --init

{
  "compilerOptions": {
    "target": "es5" ,
    "module": "commonjs" ,
    "outDir": "./build" ,
    "strict": true ,
    "baseUrl": "./" ,
    "esModuleInterop": true ,
    "skipLibCheck": true ,
    "forceConsistentCasingInFileNames": true 
  }
}

저는 위와 같이 세팅을 했습니다.

//  구성 파일에서 입력을 찾을 수 없습니다. 지정된 '포함' 경로는 '[]'이고 '제외' 경로는 '[]'이었습니다.

설치 후 그림과 같이 경로 문제로 에러처럼 보일 수 있으나 당황하지 않고 따라오시면 해결이 됩니다. 해당 문제를 해결하기 위해 tsconfig-paths를 설치합니다.

https://www.npmjs.com/package/tsconfig-paths

tsconfig-paths

npm install --save-dev tsconfig-paths

설치 후에도 오류 처럼 보일 수 있으나, 시간이 지나면 해결 될겁니다.(저는 그랬습니다.) 뭔가 속도가 느린 느낌이긴 하더라구요.

여기까지만 진행해도 됩니다만, 추가 적으로 좋은 코드를 작성하기 위해 eslint를 설치 및 세팅을 하겠습니다.

https://www.npmjs.com/package/eslint

eslint

npm install eslint --save-dev

설치만 하면 끝나는 것이 아니라 세팅을 해줘야 합니다.

./node_modules/.bin/eslint --init

만약 . 를 읽을 수 없다는 등 문제가 생기면, node 환경 변수 세팅을 진행하시길 바랍니다. 추 후 포스팅을 진행하게 된다면 링크를 하단에 달아 두도록 하겠습니다.

실행하면 몇가지 설문(?)을 진행합니다. 저와 똑같이 진행하실 필요는 없으며, 저는 node 및 react를 진행할 예정임을 알려드립니다. 참고 정도로 확인하시면 될 듯 합니다.

항목을 수정하고 싶다면 spacebar키를 사용하여 선택 및 해제가 가능합니다.

 How would you like to use ESLint? · problems     (to check systax and find problems)
 What type of modules does your project use? · esm     (JavaScript modules (import/export))
 Which framework does your project use? · react     (React) // 노드만 사용하실 분은 none으로 설정하셔도됩니다
 Does your project use TypeScript? · No / Yes     (Yes)
 Where does your code run? · browser, node     (browser, node)  // 해당 항목은 어떻게 적용될지 알 수 없어 둘다 적용했습니다.
 What format do you want your config file to be in? · JavaScript     (JavaScript)
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest       
 Would you like to install them now with npm? · No / Yes     (Yes)

마지막 항목을 YES를 선택한다면 NPM을 통해 모듈들을 설치를 진행합니다.

---

4. express 설치 및 세팅

본격적으로 서버로 사용할 수 있는 express를 설치 진행 전 필수 항목은 아니나 한 가지 작업을 진행해 줍니다.

npm install --dev @types/node

사실 정확이 어떤 기능을 하는지 알 지 못합니다만, 저는 진행 했기에 권유 드립니다. 정확한 이유를 아시는 분은 댓글 부탁드립니다.

express를 설치합니다.

npm install express

설치가 완료 되었다면, 편한 실행을 위해 scripts를 등록합니다.

저는 서버기동으로 사용할 파일을 src/server.ts로 지정했기때문에 그림과 같이 설정했습니다. 주로 일반적으로 파일명을 index.ts 또는 app.ts 등으로 설정합니다.

src 디렉토리를 생성 한 후 src 밑에 server.ts 파일을 생성 및 작성합니다.

import express from "express";

const app = express();

app.get("/", (req, res) => {
  console.log(req);

  res.send("성공입니다 고생하셨어요!");
});

app.listen(3000);

작성이 끝났다면 앞서 등록해둔 scripts 인 start 명령을 이용하여, 서버를 기동 합니다.

npm start

 

사용하시는 브라우저를 열고 지정한 3000번 포트로 접속 시도하여 서버가 기동되었는지 확인합니다.

 

---

마지막 문구를 성공적으로 보였다면 express 기본 세팅을 끝났다고 말씀 드릴 수 있습니다. 현재 사이드 프로젝트를 진행 중입니다. 따라서 추가적으로 포스팅 할 내용이 있다면 이어서 작성하도록 하겠습니다. 

여기까지 따라오시느라 고생이 많으셨습니다.