npm_nvm_npx

React, Node.js, npm, nvm, npx 개념 차이점 및 특징

by

React: 컴포넌트 기반 UI 라이브러리

  • 정의: Facebook이 개발한 UI 라이브러리로, 컴포넌트 단위로 화면을 구성
  • 주요 특징
    • 가상 DOM: 변경 사항만 실제 DOM에 반영하여 빠른 렌더링
    • 단방향 데이터 흐름: 상위→하위로만 데이터 전파, 예측 가능한 상태 관리
    • JSX: JavaScript 안에서 HTML 구조를 선언적으로 기술
  • 언제 사용하나?
    • 대규모 SPA(단일 페이지 애플리케이션)
    • 동적 UI(채팅, 대시보드)
    • SSR(서버 사이드 렌더링)·SSG(정적 사이트 생성) 필요 시 (Next.js 등)

Node.js: 서버·CLI용 JavaScript 런타임

  • 정의: Google V8 엔진 위에서 JavaScript를 서버와 CLI 환경에서 실행
  • 주요 특징
    • 이벤트 기반 비동기 I/O: 논블로킹 방식으로 높은 동시성 처리
    • 싱글 스레드 + 이벤트 루프: 메모리 효율성 극대화
    • CommonJS/ESM 모듈 시스템: require·import로 모듈 분리
  • 브라우저 JS와 차이
    구분 브라우저 JS Node.js
    실행 환경 클라이언트 서버/CLI
    전역 객체 window, document global, process
    I/O 모델 Blocking Non-blocking

npm: Node 패키지 매니저

  • 정의: Node.js 패키지 설치·관리 도구
  • 주요 기능
    • npm init → package.json 생성
    • npm install <패키지> → dependencies에 추가
    • npm install --save-dev <패키지> → devDependencies
    • npm run <script> → package.json scripts 실행
    • npm audit → 보안 취약점 점검
  • package.json 핵심 필드
    • dependencies, devDependencies, scripts, engines(node 버전)
  • 의존성 관리 팁
    • package-lock.json으로 정확한 버전 잠금
    • SemVer(주.부.패치) 정책 준수
    • 정기적 npm audit → npm audit fix

nvm: Node 버전 관리

  • 정의: 프로젝트별로 다양한 Node.js 버전 설치·전환
  • 설치·사용법 
    # 설치 (macOS/Linux)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash
source ~/.bashrc
nvm install 18.16.0
nvm use 18.16.0
nvm alias default 18.16.0
  • 활용 팁
    • 프로젝트 루트에 .nvmrc 파일 생성 → nvm use 만으로 전환
    • CI/CD에서 .nvmrc 참조 설정 (예: GitHub Actions)

npx: 패키지 실행 도구

  • 정의: npm 5.2.0+ 기본 포함, 설치 없이 CLI 패키지 실행
  • 주요 역할
    • 일회성 실행: npx create-react-app my-app
    • 버전 지정 실행: npx eslint@8.20.0 src/
    • 임시 설치 후 자동 삭제: npx cowsay hello
  • npm vs npx
    구분 npm npx
    기능 패키지 설치·관리 패키지 실행
    설치 필요 (local/global) 불필요 (임시 설치)
    실행 npm install·npm run npx <명령어>

다섯 도구의 상호관계

  1. nvm → 프로젝트별 Node.js 버전 설정
  2. npx → React 앱·CLI 도구 즉시 실행
  3. npm → 의존성 설치 및 scripts 실행
  4. Node.js → 백엔드 서버 구동 환경
  5. React → 프론트엔드 UI 구성
# 예시 워크플로우
nvm use               # 1. 버전 전환
npx create-react-app  # 2. React 초기화
cd my-app
npm install           # 3. 라이브러리 설치
npm start             # 3. 개발 서버 실행
npm run build         # 3. 빌드

실전 시나리오: 단계별 가이드

  1. 버전 고정 
    echo "18.16.0" > .nvmrc
nvm use
  2. 프론트엔드 생성 
    npx create-react-app frontend
  3. 백엔드 구성 
    mkdir backend && cd backend
npm init -y
npm install express cors dotenv
  4. 공통 스크립트 (package.json scripts) 
    {
  "start:fe": "cd frontend && npm start",
  "start:be": "cd backend && npm run dev",
  "build": "cd frontend && npm run build"
}
  5. CLI 도구 실행 
    npx eslint frontend/src --fix
npx stylelint "frontend/src/**/*.css" --fix
  6. 배포 
    npm run build
# build/ → 호스팅 서비스 업로드

FAQ

  1. Node.js와 React 차이점?
    • Node.js: 서버·CLI용 JS 런타임
    • React: 브라우저 UI 라이브러리
  2. npm vs npx 사용 시점?
    • npm: 패키지 설치·스크립트 실행
    • npx: 단발성 CLI 실행
  3. nvm 사용 이유?
    • 프로젝트별 Node 버전 충돌 방지
  4. .nvmrc 파일 없으면?
    • 직접 nvm install <버전> → nvm use
  5. Yarn 대신 npm 사용해도 되나?
    • 네, npm 7/8 이후 속도·기능이 개선되어 충분히 사용 가능
  6. lockfile(package-lock.json vs yarn.lock)?
    • 한 도구만 사용하고, 반드시 lockfile을 저장소에 커밋

결론

  • nvm으로 Node.js 버전 유연 관리
  • npx로 글로벌 설치 없이 CLI 즉시 실행
  • npm으로 의존성·스크립트 전체 관리
  • Node.js에서 서버 구축
  • React로 모던 프론트엔드 개발

이 순서대로 숙련하면, 효율적이고 일관성 있는 개발 워크플로우를 완성할 수 있습니다. 다들 즐거운 코딩 하세요~!

Leave a Comment