[Node] Node.js & NPM 기초 개념

프론트엔드 개발을 하다 보면 자연스럽게 Node.js와 NPM을 접하게 됩니다.

하지만 처음 배우는 개발자들에게는 "이게 뭔데?" 하는 의문이 들 수 있습니다.

이번 글에서는 Node.js, NPM, 패키지 관리, Babel 등 꼭 알아야 할 개념을 쉽고 간단하게 정리해보았습니다!

Node.js란?

Node.js는 브라우저 밖에서도 JavaScript를 실행할 수 있도록 만들어진 런타임 환경입니다.

기존에는 JavaScript가 웹 브라우저에서만 실행되었지만, Node.js 덕분에 백엔드 개발도 가능해졌습니다.

✅ Node.js 등장 전: JavaScript는 프론트엔드(클라이언트 측)에서만 실행 가능
✅ Node.js 등장 후: JavaScript를 백엔드(서버 측)에서도 실행 가능

즉, Node.js 덕분에 JavaScript는 풀스택 개발이 가능한 언어가 되었습니다!

NPM이란?

NPM(Node Package Manager)은 Node.js의 패키지 관리자입니다.

Node.js를 설치하면 자동으로 함께 설치되며, 수많은 오픈소스 패키지를 쉽게 다운로드하고 관리할 수 있도록 도와줍니다.

1. NPM의 역할

전 세계 개발자들이 만든 오픈소스 패키지를 쉽게 다운로드하고 관리
프로젝트의 **의존성(Dependencies)**을 효율적으로 관리

2. 주요 명령어

npm init  # package.json 파일 생성
npm install  # package.json에 있는 패키지 설치
npm install lodash  # lodash 패키지 설치

쉽게 말해, NPM은 JavaScript 생태계에서 라이브러리를 설치하고 관리하는 필수 도구입니다!

package.json과 package-lock.json

Node.js 프로젝트의 핵심 파일은 package.json입니다. 이 파일에는 프로젝트의 이름, 버전, 의존성 정보 등이 포함됩니다.

1. package.json 이란?

Node.js 프로젝트의 핵심 설정 파일이다. 프로젝트의 이름, 버전, 의존성 정보 등이 포함되어 있습니다.

✅ package.json의 역할

프로젝트 정보 저장
필수 패키지 목록 (dependencies) 관리
개발용 패키지 목록 (devDependencies) 관리

2. package-lock.json 이란?

패키지의 정확한 버전을 기록하여 모든 팀원이 동일한 환경에서 개발할 수 있도록 도와주는 파일입니다.

💡 package.json과 package-lock.json만 있으면, 누구든지 npm install을 실행하여 같은 환경을 만들 수 있다!

dependencies vs devDependencies

package.json에는 두 가지 종류의 의존성이 있습니다.

종류	설명	설치 명령어
dependencies	실제 프로젝트 실행에 필요한 패키지	npm install express
devDependencies	개발할 때만 필요한 패키지(테스트, 빌드 도구 등)	npm install eslint --save-dev

✅ dependencies 예시:

express (서버 프레임워크)
react (UI 라이브러리)

✅ devDependencies 예시:

eslint (코드 스타일 검사)
webpack (번들러)

dependencies → devDependencies로 옮기기

npm uninstall eslint
npm install eslint --save-dev

또는 package.json에서 직접 수정 후 npm install 실행하면 됩니다!

node_modules 폴더 관리

node_modules는 프로젝트의 모든 패키지를 저장하는 폴더입니다. 하지만 GitHub에 업로드하지 않는 것이 좋습니다. 🚨

1. node_modules를 공유하지 않는 이유

용량이 매우 크다 (수백 MB~GB)
패키지 관리가 어렵다
npm install만 실행하면 동일한 환경을 만들 수 있다

2. Git에서 제외하는 방법

.gitignore 파일에 아래 코드 추가만 하면 끝입니다!

node_modules/

3. 삭제된 경우 다시 설치하는 방법

아래 명령어 한 줄이면 다시 복구 가능합니다.

npm install

Babel이란?

Babel은 최신 JavaScript(ES6+) 코드를 하위 버전에서도 실행 가능하도록 변환하는 도구입니다.

✅ 예제: 최신 ES6 코드

const greet = (name) => {
  console.log(`Hello, ${name}!`);
};

✅ Babel이 변환한 코드 (ES5 지원 가능)

"use strict";

var greet = function greet(name) {
  console.log("Hello, " + name + "!");
};

즉, 최신 JavaScript 기능을 자유롭게 사용하면서도, 구형 브라우저에서도 문제없이 실행 가능하도록 변환해줍니다!

NPM 관련 주요 질문 & 답변

1. npm i와 npm i express의 차이점?

npm i → package.json에 있는 모든 dependencies와 devDependencies 설치
npm i express → express 패키지만 설치

2. 프로젝트에서 node_modules을 공유해야 하나요?

아니요! 대신 package.json과 package-lock.json만 공유하면 됩니다.
다른 사람이 코드를 받을 때 npm install을 실행하면 동일한 환경을 만들 수 있습니다.

3. GitHub에 node_modules을 업로드해도 되나요?

절대 비추천! .gitignore에 추가해야 합니다.

4. 패키지를 dependencies에서 devDependencies로 이동하는 방법?

package.json에서 직접 수정 후 npm install 실행

또는 아래 명령어 실행

npm uninstall <패키지>
npm install <패키지> --save-dev

마무리

Node.js는 JavaScript를 브라우저 밖에서도 실행할 수 있는 런타임
NPM은 패키지 관리 도구
package.json은 프로젝트의 의존성을 관리하는 핵심 파일
dependencies는 실행에 필요한 패키지, devDependencies는 개발할 때만 필요한 패키지
node_modules는 GitHub에 올리지 말고, .gitignore에 추가해야 함!