프로그래밍/Node.js

Node.js 완벽 가이드: 설치부터 npm 활용까지

shimdh 2025. 2. 18. 09:37
728x90

1. Node.js 설치하기

Node.js를 사용하기 위한 첫 번째 단계는 컴퓨터에 Node.js를 설치하는 것입니다. 아래의 단계를 따라 진행하세요.

1.1 Node.js 다운로드 및 버전 선택

  1. 공식 웹사이트 방문: Node.js 공식 웹사이트(https://nodejs.org)에 접속합니다.
  2. 버전 선택:
    • LTS (Long Term Support): 안정성이 중요한 프로젝트나 기업 환경에 적합하며, 장기간 지원을 제공하는 버전입니다.
    • Current: 최신 기능과 개선 사항을 사용하고 싶을 때 선택하며, 새로운 기술을 실험하거나 최신 기능을 활용하는 프로젝트에 유용합니다.
  3. 설치 파일 다운로드: 운영체제(Windows, macOS, Linux)에 맞는 설치 파일을 다운로드합니다.

1.2 Node.js 설치 진행

  1. 설치 파일 실행: 다운로드한 설치 파일(.msi 또는 .pkg)을 실행하여 설치 마법사를 시작합니다.
  2. 설치 진행: 화면의 안내에 따라 설치를 진행합니다. 특별한 변경 사항이 없다면 기본 설정을 그대로 사용해도 무방합니다.
  3. 환경 변수 설정 (Windows):
    • Windows의 경우, 설치 과정에서 자동으로 환경 변수가 설정되지만, 다음 단계에 따라 확인하는 것이 좋습니다.
    • "내 컴퓨터" -> "속성" -> "고급 시스템 설정" -> "환경 변수"를 클릭합니다.
    • 시스템 변수에서 Path 변수를 찾아 편집을 클릭하고, Node.js가 설치된 경로(예: C:\Program Files\nodejs\)가 추가되어 있는지 확인합니다. 추가되어 있지 않다면 직접 추가합니다.

1.3 설치 확인 및 상세 정보

터미널 또는 명령 프롬프트에서 다음 명령어를 입력하여 Node.js와 npm이 정상적으로 설치되었는지 확인합니다.

node -v  # Node.js 버전 확인 예시: v18.16.0
npm -v  # npm 버전 확인 예시: 9.5.1

각 명령어는 설치된 Node.js와 npm의 버전을 출력합니다. 버전 정보가 올바르게 출력되면 설치가 성공적으로 완료된 것입니다.

추가 예제:

  • 설치된 Node.js의 상세 정보 확인:
    node -p process.versions
    이 명령어를 통해 Node.js, V8 엔진, npm 등 다양한 버전 정보를 JSON 형식으로 확인할 수 있습니다.
  • 특정 버전의 npm 설치:
    npm install -g npm@8.0.0
    이 명령어를 사용하여 npm 버전을 지정하여 설치할 수 있습니다. 필요에 따라 특정 버전의 npm을 사용해야 할 때 유용합니다.
  • node 및 npm 설치 경로 확인:
    where node
    where npm
    Windows 환경에서 node와 npm이 설치된 경로를 확인할 수 있습니다. macOS 또는 Linux에서는 which nodewhich npm 명령어를 사용합니다.

2. Node.js 개발 환경 설정

Node.js를 설치한 후에는 효율적인 개발을 위한 환경 설정이 필요합니다.

2.1 IDE 선택 및 확장 설치

Node.js 개발에 적합한 IDE(통합 개발 환경) 또는 텍스트 편집기를 선택합니다. Visual Studio Code (VSCode)는 다양한 확장 기능과 강력한 디버깅 기능으로 널리 사용되고 있습니다.

  • VSCode 설치: 공식 웹사이트(https://code.visualstudio.com)에서 VSCode를 다운로드하여 설치합니다.
  • 필수 확장 설치: VSCode를 실행하고 다음 확장을 설치하여 개발 환경을 최적화하세요.
    • JavaScript (ES6) code snippets: JavaScript 코드 스니펫을 제공하여 코딩 속도를 향상시킵니다.
    • ESLint: 코드 품질을 유지하고 잠재적인 오류를 줄이는 데 도움을 줍니다.
    • Debugger for Chrome: Chrome 브라우저를 이용하여 Node.js 애플리케이션을 디버깅할 수 있습니다.
    • (선택 사항) Prettier: 코드 포맷팅을 자동으로 처리하여 가독성을 높입니다.
    • (선택 사항) npm Intellisense: package.json 파일에서 npm 패키지 이름을 자동 완성해줍니다.
    • (선택 사항) GitLens: Git 커밋 기록을 시각적으로 표시하여 코드 변경 이력을 추적하기 용이하게 합니다.
  • 터미널 통합: VSCode 내장 터미널을 사용하여 명령어를 편리하게 실행할 수 있습니다.

추가 예제:

  • VSCode 설정 파일 (settings.json) 예시:
    {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true,
        "eslint.alwaysShowStatus": true,
        "javascript.validate.enable": false,
        "editor.tabSize": 2,
        "editor.insertSpaces": true,
        "terminal.integrated.defaultProfile.windows": "PowerShell"
    }
    이 설정은 Prettier를 기본 포맷터로 지정하고, 파일을 저장할 때마다 자동 포맷팅을 적용합니다. ESLint 상태를 항상 표시하고, 탭 크기를 2로 설정하며, 기본 터미널을 PowerShell로 설정합니다.
  • VSCode 단축키 설정 (keybindings.json) 예시:
    [
        {
            "key": "ctrl+shift+c",
            "command": "workbench.action.terminal.focus",
            "when": "editorFocus"
        }
    ]
    이 설정은 ctrl+shift+c 단축키를 사용하여 터미널에 빠르게 포커싱할 수 있도록 합니다.
  • VSCode 확장 기능 활용 예시:
    • 자동 완성: VSCode의 IntelliSense 기능을 활용하여 변수, 함수, 모듈 등을 자동 완성할 수 있습니다.
    • 디버깅: VSCode의 디버깅 기능을 사용하여 Node.js 코드의 오류를 쉽게 찾고 수정할 수 있습니다.
    • Git 연동: VSCode는 Git과 연동되어 있어 코드 변경 사항을 추적하고 커밋하는 작업을 IDE 내에서 편리하게 처리할 수 있습니다.

2.2 프로젝트 초기화

  1. 프로젝트 디렉토리 생성: 프로젝트를 저장할 빈 디렉토리를 생성합니다.
    mkdir my-node-app
    cd my-node-app
  2. package.json 파일 생성: 다음 명령어를 실행하여 package.json 파일을 초기화합니다.
    npm init -y
    -y 플래그는 모든 질문에 기본값으로 응답하여 초기화 과정을 빠르게 진행합니다. package.json 파일은 프로젝트의 메타데이터와 의존성 정보를 포함합니다.

2.3 필수 패키지 설치

프로젝트에 필요한 패키지를 설치합니다. express는 웹 프레임워크이며, nodemon은 개발 중 코드 변경 시 서버를 자동으로 재시작해주는 유용한 도구입니다.

npm install express nodemon --save-dev

--save-dev 옵션은 해당 패키지가 개발 환경에서만 사용되는 의존성임을 명시합니다.

추가 예제:

  • 다른 개발 의존성 설치: jest를 설치하여 테스트 환경을 설정합니다.
    npm install jest --save-dev
  • 특정 버전의 패키지 설치: 특정 버전의 express를 설치할 수 있습니다.
    npm install express@4.17.1
  • 패키지 최신 버전 업데이트: 설치된 패키지를 최신 버전으로 업데이트합니다.
    npm update express
  • 글로벌 패키지 설치: 모든 프로젝트에서 사용할 수 있도록 pm2(프로세스 관리 도구)를 글로벌로 설치합니다.
     npm install pm2 -g

2.4 스크립트 추가 및 활용

package.json 파일의 scripts 섹션에 코드를 추가하여 npm을 통해 스크립트를 실행할 수 있도록 설정합니다.

"scripts": {
    "start": "node app.js",
    "dev": "nodemon app.js",
    "test": "jest",
    "lint": "eslint ."
}
  • start: node app.js 명령어를 실행하여 서버를 시작합니다.
  • dev: nodemon app.js 명령어를 실행하여 개발 모드로 서버를 시작합니다. nodemon은 코드 변경 시 서버를 자동으로 재시작합니다.
  • test: jest 명령어를 실행하여 테스트를 수행합니다.
  • lint: eslint . 명령어를 실행하여 코드 스타일을 검사합니다.

추가 예제:

  • 병렬 스크립트 실행: npm-run-all을 사용하여 여러 스크립트를 병렬로 실행할 수 있습니다.
    npm install npm-run-all --save-dev
    package.jsonscripts 섹션을 다음과 같이 수정합니다.
    "scripts": {
        "start": "node app.js",
        "dev": "nodemon app.js",
        "test": "jest",
        "lint": "eslint .",
        "build": "npm run lint && npm run test",
        "serve": "npm run dev",
        "all": "npm-run-all --parallel build serve"
    }
    이제 npm run all 명령어를 실행하면 buildserve 스크립트가 병렬로 실행됩니다.
  • 환경 변수 설정: 스크립트에서 환경 변수를 설정할 수 있습니다.
    "scripts": {
        "start": "PORT=3001 node app.js",
        "dev": "PORT=3001 nodemon app.js"
    }
    위 설정은 서버를 3001 포트로 실행하도록 설정합니다.

3. npm (Node Package Manager) 사용법

npm은 Node.js 생태계에서 패키지를 관리하고 공유하는 데 핵심적인 역할을 합니다.

3.1 패키지 검색 및 정보 확인

npm 레지스트리에서 필요한 패키지를 검색하고 정보를 확인할 수 있습니다.

npm search <package-name> # 패키지 검색
npm view <package-name>   # 패키지 정보 확인

추가 예제:

  • 특정 키워드로 패키지 검색:
    npm search express framework
    expressframework 키워드를 모두 포함하는 패키지를 검색합니다.
  • 패키지 상세 정보 확인:
    npm view express
    express 패키지의 버전 정보, 의존성, 설명 등 자세한 정보를 확인할 수 있습니다.

3.2 패키지 설치 및 제거

프로젝트에 필요한 패키지를 설치하고, 더 이상 필요하지 않은 패키지를 제거할 수 있습니다.

npm install <package-name>    # 패키지 설치
npm uninstall <package-name>  # 패키지 제거

추가 예제:

  • lodash 라이브러리 설치:
    npm install lodash
    lodash 유틸리티 라이브러리를 설치합니다.
  • 특정 버전의 패키지 설치: 특정 버전의 패키지를 설치할 수 있습니다.
    npm install <package-name>@<version>
    예를 들어, npm install react@17.0.0 처럼 특정 버전을 지정하여 설치할 수 있습니다.
  • 전역 패키지 설치:
    npm install -g <package-name>
    npm 패키지를 전역으로 설치하여 모든 프로젝트에서 사용할 수 있게 합니다.
  • 패키지 설치시 버전 충돌 방지: package-lock.json 파일은 패키지 설치시 버전을 고정하여 의존성 관리를 쉽게 합니다. 따라서, npm install 명령어 실행 후 package-lock.json 파일이 생성되는데, 이 파일은 변경하지 않는것을 권장합니다.

3.3 패키지 관리 및 업데이트

package.json 파일을 통해 프로젝트의 의존성을 관리하고, 패키지를 최신 버전으로 업데이트할 수 있습니다.

npm install <package-name> --save  # 의존성 저장
npm install <package-name> --save-dev # 개발 의존성 저장
rm -rf node_modules package-lock.json && npm install  # 의존성 일괄 삭제 후 재설치
npm update <package-name>    # 패키지 업데이트

추가 예제:

  • 설치된 패키지 목록 확인:
    npm list
    프로젝트에 설치된 패키지 목록을 확인할 수 있습니다.
  • 특정 패키지 버전 확인:
    npm list <package-name>
    설치된 특정 패키지의 버전을 확인합니다.

3.4 스크립트 실행

package.json 파일의 scripts 섹션에 정의된 스크립트를 실행할 수 있습니다.

npm run <script-name>  # 스크립트 실행

추가 예제:

  • 스크립트 실행 시 추가 인자 전달:
    "scripts": {
        "greet": "node greet.js"
    }
    다음과 같은 코드를 가진 greet.js 파일을 만듭니다.
    const args = process.argv.slice(2);
    const name = args[0] || 'World';
    console.log(`Hello, ${name}!`);
    이제 터미널에서 npm run greet -- "John" 명령어를 실행하면 Hello, John!이 출력됩니다. npm run greet 명령어를 실행하면 Hello, World!가 출력됩니다.
  • 특정 스크립트 이름으로 실행: npm <script-name> 명령어로도 npm run <script-name> 와 동일하게 스크립트를 실행할 수 있습니다. 예를 들어, npm devnpm run dev와 동일하게 작동합니다.

4. 간단한 서버 예제

app.js 파일을 생성하고 다음 코드를 작성하여 간단한 HTTP 서버를 만들어보세요.

// app.js
const express = require('express');
const app = express();
const port = process.env.PORT || 3000; // 환경 변수가 없을 경우 기본값 3000 사용

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

// 새로운 엔드포인트 추가
app.get('/api/users', (req, res) => {
    const users = [
        { id: 1, name: 'John Doe' },
        { id: 2, name: 'Jane Doe' },
    ];
    res.json(users);
});

app.listen(port, () => {
  console.log(`서버가 http://localhost:${port} 에서 작동 중입니다.`);
});

이제 터미널에서 npm run dev 또는 npm start 명령어를 실행하여 서버를 시작할 수 있습니다. 웹 브라우저에서 http://localhost:3000에 접속하면 "Hello World!" 메시지를 확인할 수 있고, http://localhost:3000/api/users에 접속하면 JSON 형식의 사용자 데이터를 확인할 수 있습니다.

추가 예제:

  • 미들웨어 추가: express에서 미들웨어를 사용하여 요청 처리 과정을 추가할 수 있습니다.

    // app.js (미들웨어 추가)
    const express = require('express');
    const app = express();
    const port = process.env.PORT || 3000;
    
    app.use((req, res, next) => {
        console.log('요청이 들어왔습니다:', req.method, req.url);
        next();
    });
    
    app.get('/', (req, res) => {
        res.send('Hello World!');
    });
    
    app.get('/api/users', (req, res) => {
        const users = [
            { id: 1, name: 'John Doe' },
            { id: 2, name: 'Jane Doe' },
        ];
        res.json(users);
    });
    
    app.listen(port, () => {
        console.log(`서버가 http://localhost:${port} 에서 작동 중입니다.`);
    });

    위 코드는 모든 요청이 들어올 때마다 콘솔에 로그를 출력하는 미들웨어를 추가합니다.

  • 정적 파일 제공:

     // app.js (정적 파일 제공)
    const express = require('express');
    const app = express();
    const path = require('path');
    const port = process.env.PORT || 3000;
    
    app.use(express.static(path.join(__dirname, 'public')));
    
    app.get('/', (req, res) => {
        res.sendFile(path.join(__dirname, 'public', 'index.html'));
    });
    
    app.get('/api/users', (req, res) => {
        const users = [
            { id: 1, name: 'John Doe' },
            { id: 2, name: 'Jane Doe' },
        ];
        res.json(users);
    });
    
    app.listen(port, () => {
        console.log(`서버가 http://localhost:${port} 에서 작동 중입니다.`);
    });

    위 코드는 public 폴더에 있는 정적 파일(HTML, CSS, JavaScript 등)을 제공합니다. index.html 파일을 public 폴더에 넣으면 http://localhost:3000에서 확인할 수 있습니다.

  • JSON 데이터 전송: /api/users 엔드포인트에서 JSON 데이터를 전송하는 방법을 보여줍니다.

결론

이 가이드에서는 Node.js 설치부터 개발 환경 설정, npm 사용법 및 간단한 서버 예제까지 Node.js 개발의 전반적인 과정을 상세하게 다루었습니다. 추가된 예제들을 통해 Node.js에 대한 이해를 높이고, 자신감 있게 프로젝트를 시작하고 개발 효율성을 향상시키시기를 바랍니다.

728x90