[ Node.js ] Visual Code로 쉽게 Node.js를 테스트 해보자.

Visual Studio Code(이하 VS Code)에서 Node.js 애플리케이션을 실행하는 방법을 단계별로 설명드리겠습니다. VS Code는 강력한 편집 기능과 함께 디버깅 도구, 통합 터미널 등을 제공하여 Node.js 개발에 매우 유용한 환경을 제공합니다.

1. VS Code 설치 및 설정

먼저, VS Code가 설치되어 있는지 확인합니다. 설치되지 않았다면, VS Code 공식 웹사이트에서 다운로드하여 설치할 수 있습니다.

2. Node.js 설치

Node.js가 설치되어 있는지 확인합니다. 설치되어 있지 않다면 Node.js 공식 웹사이트에서 LTS 버전을 다운로드하여 설치할 수 있습니다. 설치 확인은 다음 명령어를 통해 가능합니다:

node -v
npm -v

위 명령어는 각각 Node.js와 npm의 버전을 출력합니다.

3. 프로젝트 디렉토리 설정

Node.js 프로젝트가 없는 경우, 새 프로젝트 디렉토리를 만들고, 해당 디렉토리에서 작업을 시작할 수 있습니다.

mkdir my-node-app
cd my-node-app

이제 VS Code에서 해당 디렉토리를 열어야 합니다.

4. VS Code에서 프로젝트 열기

VS Code를 실행하고, my-node-app 디렉토리를 열어 프로젝트를 시작합니다. VS Code에서 프로젝트를 여는 방법은 여러 가지가 있지만, 가장 쉬운 방법은 터미널에서 다음 명령어를 실행하는 것입니다:

code .

이 명령어는 현재 디렉토리를 VS Code에서 엽니다.

5. 기본 Node.js 파일 생성

프로젝트 디렉토리에서 app.js와 같은 기본 Node.js 파일을 생성합니다. 이 파일에 간단한 서버 코드를 작성해보겠습니다.

// app.js

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/plain');
    res.end('Hello, World!\n');
});

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

이 코드는 기본적인 HTTP 서버를 설정하여, http://127.0.0.1:3000/ 주소에서 "Hello, World!" 메시지를 반환합니다.

6. 터미널에서 Node.js 파일 실행

VS Code에는 통합 터미널이 있어, 별도의 터미널 창을 열 필요 없이 VS Code 내에서 바로 Node.js 파일을 실행할 수 있습니다.

VS Code에서 통합 터미널을 여는 방법:
- 상단 메뉴에서 View -> Terminal을 선택하거나, 단축키 Ctrl + ``` (백틱, 물결표 키 아래) 를 누릅니다.

통합 터미널에서 다음 명령어를 입력하여 app.js 파일을 실행합니다:

node app.js

이 명령어는 Node.js 서버를 시작하며, "Server running at http://127.0.0.1:3000/" 라는 메시지가 터미널에 출력됩니다.

웹 브라우저를 열고 http://127.0.0.1:3000/에 접속하여 "Hello, World!" 메시지가 표시되는지 확인합니다.

7. VS Code에서 디버깅 설정

VS Code의 강력한 기능 중 하나는 내장된 디버깅 도구입니다. 디버깅 설정을 통해 Node.js 애플리케이션을 디버깅할 수 있습니다.

디버깅 구성 설정:
- VS Code의 사이드바에서 디버그 아이콘(플레이 버튼이 있는 아이콘)을 클릭합니다.
- 상단의 "Run and Debug" 버튼을 클릭하고, 팝업되는 창에서 "Node.js"를 선택합니다.
- VS Code는 자동으로 launch.json 파일을 생성하고, 기본적인 디버깅 구성을 제공합니다.
디버깅 시작:
- app.js 파일에 디버깅을 위한 중단점(breakpoint)을 설정합니다. 중단점을 설정하려면 코드 라인 번호 옆을 클릭합니다.
- 다시 디버그 아이콘을 클릭하고, "Start Debugging" 버튼(녹색 삼각형)을 클릭합니다. 또는 F5 키를 누릅니다.
- 이제 애플리케이션이 디버깅 모드로 실행되며, 중단점에서 실행이 중지됩니다.
디버깅 도구 사용:
- VS Code의 디버깅 도구를 사용하여 변수 검사, 스택 추적, 단계별 실행 등을 수행할 수 있습니다.

8. NPM 스크립트 사용

프로젝트를 관리하고 명령어 실행을 간소화하기 위해 package.json 파일에서 NPM 스크립트를 설정할 수 있습니다.

package.json 파일 생성:
- 터미널에서 다음 명령어를 실행하여 기본 package.json 파일을 생성합니다.

npm init -y

NPM 스크립트 추가:
- 생성된 package.json 파일을 열고, scripts 섹션에 다음과 같이 start 스크립트를 추가합니다.

{
  "name": "my-node-app",
  "version": "1.0.0",
  "main": "app.js",
  "scripts": {
    "start": "node app.js"
  }
}

NPM 스크립트 실행:
- 터미널에서 다음 명령어를 실행하여 start 스크립트를 실행합니다.

npm start

이 명령어는 node app.js를 실행하여 애플리케이션을 시작합니다.

9. ESLint 및 Prettier 설정

코드 품질을 유지하고 코드 스타일을 통일하기 위해 ESLint와 Prettier를 설정할 수 있습니다.

ESLint 설치:

npm install eslint --save-dev

ESLint 초기화:

npx eslint --init

이 명령어는 프로젝트에 맞는 ESLint 설정을 생성합니다. 여러 질문에 답하여 환경과 스타일을 설정합니다.

Prettier 설치:

npm install prettier --save-dev

Prettier 설정:
- 프로젝트 루트에 .prettierrc 파일을 생성하고, 원하는 규칙을 추가합니다. 예:

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 80
}

VS Code 확장:
- VS Code의 확장 마켓플레이스에서 ESLint와 Prettier 확장을 설치합니다. 이를 통해 코드 작성 시 자동으로 린팅과 포맷팅을 적용할 수 있습니다.

10. 실시간 변경 반영 (Nodemon 사용)

개발 중에 코드를 변경할 때마다 서버를 수동으로 재시작하는 번거로움을 피하기 위해 nodemon을 사용할 수 있습니다.

Nodemon 설치:

npm install -g nodemon

Nodemon 사용:

nodemon app.js

이제 app.js 파일을 변경할 때마다 nodemon이 자동으로 서버를 재시작합니다.

요약

VS Code에서 Node.js 애플리케이션을 설정하고 실행하는 방법은 다음과 같습니다:

VS Code와 Node.js를 설치하고, 프로젝트 디렉토리를 생성합니다.
VS Code에서 프로젝트를 열고, Node.js 파일을 생성합니다.
통합 터미널에서 node 명령어를 사용하여 파일을 실행합니다.
디버깅 설정을 통해 코드의 중단점에서 실행을 중지하고 디버깅할 수 있습니다.
package.json에 NPM 스크립트를 설정하여 명령어 실행을 간소화할 수 있습니다.
ESLint와 Prettier를 설정하여 코드 품질을 유지하고 스타일을 통일할 수 있습니다.
nodemon을 사용하여 실시간 코드 변경을 반영할 수 있습니다.

이 모든 과정을 통해 VS Code에서 효율적이고 생산적으로 Node.js 애플리케이션을 개발할 수 있습니다.

소소한 개발 이야기