프론트엔드 개발 환경 이해하기 (Vite, Node.js, npm, bun 개념 정리)

1. Vite란 무엇인가?

Vite는 프론트엔드 프로젝트를 빠르게 만들어주는 도구이다.

 

https://vite.dev/

Vite

 

 

예를 들어 React나 Vue 프로젝트를 시작하려면 원래는 이런 작업이 필요하다.

• 프로젝트 폴더 만들기
• 개발 서버 설정
• 빌드 설정
• 라이브러리 설치
• 개발 환경 구성

이걸 하나하나 직접 설정하면 시간이 많이 걸린다.

그래서 등장한 것이 Vite다.

 

Vite를 사용하면 명령어 한 줄로

• 프로젝트 구조 생성
• 개발 서버 준비
• 기본 설정 완료

이 모든 것이 자동으로 만들어진다.

 

즉!!!!

Vite = 프론트엔드 프로젝트를 쉽게 시작하게 해주는 도구

그리고 특징은 매우 빠르다.

 

 

 

2. Node.js는 무엇인가?

Node.js는 자바스크립트를 컴퓨터에서 실행할 수 있게 해주는 프로그램이다.

 

원래 자바스크립트는

브라우저에서만 실행된다.

 

하지만 Node.js가 있으면

• 자바스크립트로 서버 실행
• 개발 서버 실행
• npm 사용
• 패키지 설치

같은 작업을 할 수 있다.

그래서 프론트엔드 개발을 할 때도 Node.js가 반드시 필요하다.

 

 

 

3. npm은 무엇인가?

npm은 자바스크립트 패키지를 설치하는 도구이다.

예를 들어 React 같은 라이브러리를 설치할 때 사용한다.

npm install react

 

이 명령어의 의미는

React 라이브러리를 다운로드해서 프로젝트에 설치해

 

npm은 동시에

• 라이브러리 다운로드
• 프로젝트 실행
• 개발 도구 실행

같은 역할도 한다.

 

 

 

4. bun은 무엇인가?

bun은 npm과 비슷한 역할을 하는 도구이다.

 

하지만 차이가 있다.

속도가 매우 빠르다.

 

그래서 최근에는 bun을 사용하는 개발자도 많다.

	npm	bun
역할	패키지 설치	패키지 설치
개발 서버 실행	가능	가능
속도	보통	매우빠름

 

 

2026.03.06 - 개인 학습 기록