Node Express 백엔드 서버에 TypeScript 기반 설정

haerim·2024년 2월 5일

ESLint Prettier node.js nodemon typescript

프로젝트 개발 일지

목록 보기

1/7

현재 하고 있는 개인 프로젝트가 있는데, 백엔드 서버는 대강 다 만들어 둔 상태였다.
이대로 굴려도 큰 문제는 없겠지만 좀 더 리팩토링을 해보고 싶다는 생각이 들었다.

프로젝트 ASIS-TOBE

ASIS

순수 자바스크립트 환경이다.
크게 App - Route - Controller 로만 구성되어 있다.
현재는 코드 수정을 하면 서버를 수동으로 껐다가 켜야 한다.
배포가 되어 있지 않다.

TOBE

TypeScript 환경으로 변경한다.
MVC 모델 패턴으로 변경한다.
코드 수정을 해도 자동으로 서버가 재실행되도록 변경한다.
EC2 같은 AWS 서비스로 배포를 한다.

백엔드 서버 TypeScript 환경 설정

먼저 TypeScript 환경으로 변경한 다음에 MVC 패턴을 적용하면 조금 더 쉬울 거 같아서 JS를 TS로 변경하는 것부터 시작했다.

일단 TS 환경에서 코드 수정을 해도 자동으로 서버가 재실행되도록 변경하기 전에, JS 환경에서 먼저 코드 수정을 해도 자동으로 서버가 재실행되도록 nodemon 라이브러리를 사용했다.

nodemon

nodemon은 node monitor의 약자다. 노드가 실행하는 파일이 속한 디렉터리를 감시(monitoring)하고 있다가, 파일이 수정되면 자동으로 노드 애플리케이션을 재시작하는 확장 모듈이다. 설치하고 script도 설정해두면 CLI에서 command를 입력해서 편하게 서버를 켜고 끌 수 있다.

설치 방법

npm install nodemon --save-dev

설치 자체는 어렵지 않다. 깔고 나서

npx nodemon app.js

command로 CLI에 입력하면 서버가 실행되는 걸 확인할 수 있다. 매번 이렇게 입력해주는 건 간지가 없기 때문에 나는 스크립트에 넣었다.

"scripts": {
	"dev": "nodemon ./bin/www app.js"
},

이렇게 넣고 서버를 돌리면
js-nodemon-scripts

nodemon 모듈에 의해 서버가 시작되는 걸 볼 수 있다.

이제 여기서 Ts 환경으로 바꿀 것이다.

프로젝트 TS 환경 설정

TS 환경을 설정하려면 받아야할 모듈이 생각보다 많다.
여기서 나는 욕심을 내서 eslint와 prettier도 적용하기로 했다.

"devDependencies": {
  "@typescript-eslint/eslint-plugin": "^6.20.0",
  "@typescript-eslint/parser": "^6.20.0",
  "add": "^2.0.6",
  "eslint-config-prettier": "^9.1.0",
  "eslint-plugin-prettier": "^5.1.3",
  "typescript": "^5.3.3"
}

먼저 devDependencies에 해당 모듈들을 넣었다.
이 모듈들을 dependencies에 안 넣고 devDependencies에 넣은 이유는 어차피 배포해서 올릴 땐 ts에서 js로 컴파일이 되고 파일이 압축시킨다. 즉 ts 환경 및 ts로 적용하는 lint 설정들이나 코드 가독성을 지킬 의미가 없어진다. 그래서 devlopment 환경에서만 해당 모듈들을 사용하기 때문에 굳이 부피 더 나가게 dependencies에 넣을 필요가 없다고 판단했다.

tsconfig.json

그리고 디렉토리 루트 경로에 tsconfig.json을 만들어준다.
이건 npx tsc --init 이나 tsc --init(글로벌 설치 했을 경우) 커맨드로 쉽게 만들 수 있지만, 본인이 스스로 옵션 같은 걸 직접 커스텀 해서 만들 수도 있다. 나는 init을 한 뒤 그때그때 필요한 설정의 주석을 푸는 식으로 사용했다.

.eslint.cjs, .prettierrc

.eslint.cjs 파일은 eslint 설정을, .prettierrc 파일은 prettier 설정을 담당한다.
내가 사용하는 code editor는 VSCode(Visual Studio Code)라 다른 에디터를 사용할 때는 이하 설정하는 방식과 좀 다를 수 있다.

먼저 VSCode 내 확장 모듈로 ESLint와 Prettier를 받아줘야 한다. (받아주지 않으면 동작하지 않는다.)
일전에는 TSLint라는 확장 모듈이 존재했으나 현재는 ESLint가 TSLint의 기능도 동시에 하고 있고, 더이상 TSLint는 지원하지 않기 때문에 그냥 ESLint 모듈만 받아주면 된다.

그리고 사용자 설정 모드에서 설정해줄 부분이 있다.

format on save 체크
defult formatter를 prettier - code formatter로 설정

또 settings.json 부분도 수정해줘야 한다. (사용자 설정 모드와 다르다.)
settings.json 부분은 사람에 따라 설정된 부분들이 좀 틀린데 VSCode를 처음 설치한 사람이라면 이 부분이 텅 비어있을 수도 있다.
나 같은 경우는 테마도 적용했고 이전에 TS 환경 프로젝트도 다뤄봤고 ESLint나 Prettier도 좀 써서 몇 가지 설정이 이미 들어가 있다.

...
// 파일을 저장할 때마다 `eslint` 규칙에 따라 자동으로 코드를 수정
"editor.codeActionsOnSave": { "source.fixAll.eslint": true },
...
// `prettier`를 기본 포맷터로 지정
"editor.defaultFormatter": "esbenp.prettier-vscode",
...
//있는지 확인해야 함
"editor.formatOnSave": true,
"eslint.codeActionsOnSave.rules": null,

보통 이 정도 들어 있으면 어느 정도 에디터 상에서 인식이 되게 만든 셈이다.

이제 .eslint.cjs 파일과 .prettierrc 파일을 만들어준다.

.eslint.cjs

module.exports = {
    root: true,
    // eslint에 어떠한 parser를 사용할지 알려주는 옵션
    // eslint가 typescript 문법을 이해할 수 있게 해준다.
    parser: '@typescript-eslint/parser',
    // typescript-eslint에서 제공하는 규칙들을 사용할 수 있게 해준다.
    plugins: ['@typescript-eslint'],
    // 어떠한 규칙들과 설정으로 eslint를 사용할지 명시한다.
    // 아래와 같이 작성하면 default 값으로 적용이 된다.
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:prettier/recommended'
    ],
    parserOptions: {
        project: ['./tsconfig.json']
    },
    rules: {
        'prettier/prettier': 'error',
        // 세미콜론이 없으면 에러로 취급한다.
        semi: 'error',
        // 기존 프로젝트에서는 'warn'으로 취급되지만, 'error'로 설정하면 에러로 취급한다.
        '@typescript-eslint/no-unused-vars': 'error'
    }
};

.prettierrc

{
    "doubleQuote": true,
    "semi": true,
    "useTabs": false,
    "tabWidth": 4,
    "printWidth": 80
}

그리고 eslint나 prettier가 굳이 검사하거나 가독성 좋게 만들지 않아도 되는 파일이나 폴더, 모듈이 있을 수 있어서 .eslintignore 파일과 .prettierignore 파일을 추가로 만들어두면 더욱 좋다.

여기까지 간단하게 ts 환경 및 eslint, prettier를 설정해보았다.

haerim

멋진 프론트엔드 개발자가 되고 싶은

다음 포스트