Nodejs 개발환경 셋팅

Neovim에서 Node.js 개발에 필요한 Mason

 

• typescript-language-server: TypeScript LSP 서버로, Neovim에서 TypeScript 코드 완성, 오류 검사 등을 지원합니다.
• eslint: 코드 품질과 일관성을 위해 사용하는 JavaScript/TypeScript 린터입니다.
• prettier: 코드 포매터로, 코드 스타일을 일관되게 유지할 수 있습니다.
• vscode-eslint: ESLint 확장 기능을 위한 도구로, Neovim에서도 지원됩니다.

:MasonInstall typescript-language-server eslint prettier

 

---

TypeScript + Node.js (Express)로 백엔드를 구축

1. 프로젝트 초기화 및 설정

mkdir my-project # 선택에 따라 폴더 생성 
cd my-project
npm init -y

TypeScript & Express 설치

# Typescript 
npm install typescript --save-dev
tsc --init

# Express
npm install express
npm install @types/express --save-dev

---

폴더 구조

src/
  controllers/
  routes/
  middlewares/
  services/
dist/
tsconfig.json
package.json
# 선택에 따라 nodeMon

테스트 index.ts 파일 생성

import express, { Request, Response } from 'express';
const app = express();
const port = 3000;

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

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

---

Nodemon 설치

nodemon은 파일 변경을 감지하고 자동으로 서버를 재시작해 주는 도구

npm install nodemon --save-dev

# 실제 nodemon.json 파일에서는 주석을 제거하여 사용

{
  "watch": ["src"],      // 파일 변경 감지할 디렉토리 (src 폴더)
  "ext": "ts",           // 감지할 파일 확장자 (TypeScript 파일)
  "exec": "ts-node src/index.ts",  // ts-node로 TypeScript 파일을 실행
  "ignore": ["src/**/*.spec.ts"]  // 테스트 파일은 감지하지 않도록 설정 (선택 사항)
}

---

Packge.json 파일 설정

package.json에서 nodemon을 사용할 수 있도록 dev 스크립트를 추가,,, 또한 TypeScript를 컴파일하는 스크립트도 함께 추가

# 개발 모드 : npm run dev
# 빌드 이후 실행 : npm start 
# 빌드 : npm run build

{
  "name": "backend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon",
    "build": "tsc",
    "start": "tsc && node dist/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/express": "^5.0.0",
    "nodemon": "^3.1.9",
    "ts-node": "^10.9.2",
    "typescript": "^5.7.2"
  },
  "dependencies": {
    "express": "^4.21.2"
  }
}

---

tsconfig.json 파일 설정

{
  "compilerOptions": {
    "outDir": "./dist",          // 컴파일된 JavaScript 파일을 저장할 폴더
    "rootDir": "./src",          // TypeScript 소스 코드가 위치한 폴더
  },
  "include": [
    "src/**/*"                   // 컴파일할 파일 포함 (src 폴더 내 모든 파일)
  ],
  "exclude": [
    "node_modules"               // 컴파일에서 제외할 파일 (node_modules 폴더)
  ]
}

---

결과

폴더 이름
│
├── src/                         # TypeScript 소스 코드 폴더
│   ├── index.ts                 # 서버 엔트리 파일
│   ├── controllers/             # 컨트롤러 파일
│   ├── routes/                  # 라우팅 파일
│   └── services/                # 서비스 파일
│
├── dist/                        # 컴파일된 JavaScript 코드 폴더 (자동 생성됨)
│   ├── index.js                 # 빌드된 서버 파일
│
├── node_modules/                # npm 의존성 폴더
├── package.json                 # npm 설정 파일
├── nodemon.json                 # nodemon 설정 파일
└── tsconfig.json                # TypeScript 설정 파일

---

개발 모드로 실행

---

빌드 시에 나오는 결과물