Node.js와 npm(Node Package Manager)의 설치 및 환경 설정

Node.js와 npm은 JavaScript 개발을 위해 중요한 도구입니다. Node.js는 JavaScript를 서버 측에서 실행할 수 있는 런타임 환경이며, npm은 Node.js 패키지 매니저로, 다양한 라이브러리와 도구를 쉽게 설치하고 관리할 수 있게 해줍니다. 초보자를 위한 설치 및 환경 설정 과정을 자세히 설명하겠습니다.

1. Node.js와 npm 설치

Step 1: Node.js 웹사이트 방문

먼저, Node.js 공식 웹사이트에 방문합니다. 이 웹사이트에서 최신 안정 버전(LTS)을 다운로드합니다. LTS 버전은 장기 지원 버전으로, 안정성과 호환성이 보장됩니다.

 

Step 2: 설치 파일 다운로드

웹사이트에서 운영 체제에 맞는 설치 파일을 다운로드합니다. Node.js는 Windows, macOS, Linux 등 다양한 운영 체제를 지원합니다.

 

Step 3: 설치 파일 실행

다운로드한 설치 파일을 실행합니다. 설치 과정은 일반적인 소프트웨어 설치와 비슷합니다.

  1. Windows: 설치 마법사를 따라 Next 버튼을 클릭하고, 라이센스 동의 후 Install 버튼을 클릭하여 설치를 완료합니다.
  2. macOS: 다운로드한 패키지 파일을 열고, 설치 마법사를 따라 진행합니다.
  3. Linux: 배포판에 따라 다르지만, 보통 다음 명령어를 터미널에 입력하여 설치할 수 있습니다.
sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

 

Step 4: 설치 확인

설치가 완료되면, 터미널(또는 명령 프롬프트)을 열고 다음 명령어를 입력하여 Node.js와 npm이 올바르게 설치되었는지 확인합니다.

node -v
npm -v

 

이 명령어들은 각각 Node.js와 npm의 버전을 출력합니다. 버전 번호가 출력되면 설치가 성공적으로 완료된 것입니다.

 

2. Node.js 기본 개념

Node.js란?

Node.js는 Chrome의 V8 JavaScript 엔진을 기반으로 한 JavaScript 런타임입니다. Node.js를 사용하면 브라우저가 아닌 서버 측에서도 JavaScript를 실행할 수 있습니다. 주요 특징으로는 비동기 이벤트 기반 모델과 높은 성능이 있습니다.

Node.js의 특징

  • 비동기 I/O: Node.js는 비동기식 입력/출력(I/O) 작업을 처리하여 높은 처리량과 성능을 자랑합니다. 이는 파일 읽기/쓰기, 네트워크 요청 등의 작업에서 중요합니다.
  • 이벤트 기반: Node.js는 이벤트 루프를 사용하여 이벤트 기반의 비동기 프로그래밍을 쉽게 구현할 수 있습니다.
  • 싱글 스레드: Node.js는 싱글 스레드 이벤트 루프 모델을 사용합니다. 이는 메모리 사용을 줄이고, 동시성을 유지하면서도 높은 성능을 제공합니다.

3. 간단한 Node.js 애플리케이션 작성

Node.js를 설치한 후, 간단한 "Hello, World!" 애플리케이션을 작성하여 Node.js의 기본 사용법을 익혀봅시다.

 

예제: "Hello, World!" 서버

  • 파일 생성: 프로젝트 폴더를 만들고, 그 안에 app.js 파일을 생성합니다.
mkdir my-first-node-app
cd my-first-node-app
touch app.js

 

  • 코드 작성: app.js 파일을 열고, 다음 코드를 작성합니다.
const http = require('http');

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

server.listen(3000, '127.0.0.1', () => {
  console.log('Server running at http://127.0.0.1:3000/');
});

 

  • 서버 실행: 터미널에서 다음 명령어를 입력하여 서버를 실행합니다.
node app.js

 

 

이 명령어를 실행하면 "Server running at http://127.0.0.1:3000/" 메시지가 출력됩니다. 웹 브라우저를 열고 http://127.0.0.1:3000/에 접속하면 "Hello, World!" 메시지를 볼 수 있습니다.

 

VS Code에서 Node.js 환경 설정 및 예제 실행

1. VS Code 설치

VS Code가 설치되어 있지 않다면, VS Code 공식 웹사이트에서 다운로드하여 설치합니다.

 

2. Node.js 설치 확인

Node.js와 npm이 설치되어 있는지 확인합니다. 터미널을 열고 다음 명령어를 입력하여 설치를 확인합니다.

node -v
npm -v

 

이 명령어들은 각각 Node.js와 npm의 버전을 출력합니다. 버전 번호가 출력되면 Node.js와 npm이 올바르게 설치된 것입니다.

3. VS Code에서 프로젝트 폴더 열기

  1. VS Code를 실행합니다.
  2. 파일 -> 열기를 선택하고, 프로젝트 폴더(예: my-first-node-app)를 선택합니다.
  3. VS Code에서 프로젝트 폴더가 열리면, 왼쪽 사이드바에서 폴더 구조를 확인할 수 있습니다.

4. 프로젝트 폴더 구조 설정

  1. 프로젝트 폴더 안에 app.js 파일을 생성합니다.
  2. app.js 파일에 다음 코드를 작성합니다
const http = require('http');

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

server.listen(3000, '127.0.0.1', () => {
  console.log('Server running at http://127.0.0.1:3000/');
});

 

5. 터미널 열기

VS Code에서 통합 터미널을 열어 프로젝트를 실행할 수 있습니다.

  1. 보기 -> 터미널을 선택하여 통합 터미널을 엽니다.
  2. 통합 터미널이 열리면, 현재 디렉토리가 프로젝트 폴더(my-first-node-app)인지 확인합니다.

6. 서버 실행

통합 터미널에서 다음 명령어를 입력하여 Node.js 서버를 실행합니다.

node app.js

 

이 명령어를 실행하면 "Server running at http://127.0.0.1:3000/" 메시지가 출력됩니다. 이는 서버가 성공적으로 실행되었음을 의미합니다.

7. 웹 브라우저에서 확인

웹 브라우저를 열고, 주소 표시줄에 http://127.0.0.1:3000/를 입력합니다. 그러면 "Hello, World!" 메시지가 브라우저에 표시됩니다.

VS Code에서 Node.js 디버깅

VS Code는 강력한 디버깅 기능을 제공합니다. Node.js 애플리케이션을 디버깅하는 방법을 알아보겠습니다.

  1. 디버깅 구성 설정
    • VS Code에서 왼쪽 사이드바의 디버그 아이콘을 클릭합니다.
    • 실행 및 디버그 패널에서 디버그 구성 생성을 클릭합니다.
    • 팝업 메뉴에서 Node.js를 선택합니다.
    • 그러면 launch.json 파일이 생성되고 기본 설정이 추가됩니다.
  2. 브레이크포인트 설정
    • app.js 파일에서 디버깅하고자 하는 줄 번호를 클릭하여 브레이크포인트를 설정합니다. 예를 들어, res.end('Hello, World!\n'); 줄에 브레이크포인트를 설정할 수 있습니다.
  3. 디버깅 시작
    • 디버그 패널에서 디버그 시작 버튼을 클릭합니다.
    • 디버그 콘솔에 디버깅 정보가 표시되며, 브레이크포인트에서 코드 실행이 중지됩니다.
    • 변수 값을 확인하고, 코드의 흐름을 따라가며 디버깅할 수 있습니다.

이렇게 하면 VS Code에서 Node.js 환경을 설정하고, 간단한 서버를 구현하고, 실행 및 디버깅할 수 있습니다. VS Code의 편리한 기능을 활용하여 Node.js 개발을 더욱 효율적으로 할 수 있습니다.

 

+ Recent posts