2026-01-20

개발 도구 체인 (Frontend Toolchain)

• 패키지 매니저 (Package Manager) → npm, yarn, pnpm
• 빌드 도구 / 개발 서버 (Bundler & Dev Server) → Vite, Webpack, Parcel
• 프로젝트 스캐폴딩 도구 (Scaffolding Tool) → create-vite, create-react-app

패키지 매니저 (Package Manager)

외부 라이브러리 설치, 버전 관리, 실행 스크립트 관리 담당

• react, axios, zustand 같은 라이브러리 설치
• 버전 충돌 관리
• npm run dev 같은 명령 실행

| 구분 | npm | yarn | pnpm | | — | — | — | — | | 정체 | Node 기본 패키지 매니저 | npm 개선판 | 최신 고성능 | | 속도 | 보통 | 빠름 | 매우 빠름 | | 안정성 | 보통 | 좋음 | 매우 좋음 | | 디스크 | 보통 | 보통 | 최적화 최고 |

• npm
  • Node.js 기본 패키지 매니저
  • 가장 범용적이고 호환성이 좋음
  • 학습/실무 모두 무난한 선택
• yarn
  • npm보다 빠른 설치와 안정성을 목표로 등장
  • lock 파일 기반으로 의존성 관리 강화
  • 현재는 npm/pnpm에 비해 사용 비중 감소
  • Yarn Berry (Yarn v2+)
    • node_modules 없이 Plug’n’Play(PnP) 방식 사용
    • 의존성 구조가 매우 엄격 → 대규모/모노레포에 적합
    • 주로 대기업·표준화된 FE 조직에서 채택
• pnpm
  • 의존성을 공유 저장소로 관리해 디스크 사용 최적화
  • 설치 속도 빠르고 의존성 구조가 명확함
  • 최근 실무에서 채택 증가 중

빌드 도구 / 개발 서버

• Vite: 빠른 개발 환경을 제공하는 차세대 프론트엔드 빌드 도구
  • 개발 중에는 ESM 기반으로 필요한 모듈만 로드
  • 개발 서버 실행 (npm run dev)
  • 코드 번들링 (배포용 파일 생성)
  • HMR, 최신 JS 문법 지원
• Webpack: 사전 번들링 기반의 전통적인 빌드 도구
  • 프로젝트 규모가 커질수록 개발 서버 속도가 느려질 수 있음

개발 생산성과 DX 측면에서 최근에는 Vite가 표준처럼 사용된다. 개발 환경은 Vite, 실서비스 프레임워크는 Next.js를 주로 사용한다.

참고자료

• https://ldd6cr-adness.tistory.com/entry/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C-%EB%8F%84%EA%B5%AC
• https://despiteallthat.tistory.com/256
• https://www.fullstackfamily.com/qna/211
• https://disco-biscuit.tistory.com/81
• http://daleseo.com/js-package-manager/
• https://summermong.tistory.com/521
• https://engineering.ab180.co/stories/yarn-to-pnpm
• https://judahhh.tistory.com/103
• https://young-taek.tistory.com/366
• https://hi-claire.tistory.com/64