React 프로젝트 세팅01 - vite, bun

1. 프로젝트 폴더 생성

프로젝트를 작업을 진행 할 빈 폴더를 생성 한다.

 

 

2. Bun을 사용한 vite 설치

1) vite 명령어를 사용

bun create vite@latest learning-react

bun 도구를 사용하고

vite 최신버전을 이용해서 learning-react라는 이름의 새 프로젝트를 만들어라

 

[참고 url]

https://vite.dev/guide/

Vite

스캐폴딩(Scaffolding)이란?!
프로젝트 기본 틀을 자동으로 만들어주는 것

 

2) framework 선택

프레임워크 React 선택

 

3) 프로젝트에서 사용할 코드 스타일

TypeScript 선택

 

4) 스캐폴딩 완료

 

5) vite를 사용한 환경세팅

• eslint.config.js : 코드 스타일과 오류를 검사하는 ESLint 설정 파일
• index.html : Vite 프로젝트의 진입 HTML 템플릿 (개발 서버 시작점)
• package.json : 프로젝트 정보와 의존성(라이브러리), 실행 명령어를 관리하는 파일
• src : 실제 애플리케이션 코드가 작성되는 폴더
• public : 빌드 과정 없이 그대로 제공되는 정적 파일 폴더 (이미지 등)
• vite.config.ts : Vite 개발 서버와 빌드 설정을 정의하는 파일
• tsconfig.json : TypeScript 기본 설정을 모아두는 루트 설정 파일
• tsconfig.app.json : React 애플리케이션 코드용 TypeScript 설정
• tsconfig.node.json : Node.js / Vite 설정 파일용 TypeScript 설정
• main.tsx : React 앱을 브라우저에 렌더링하는 시작 파일 (TypeScript + JSX 사용)

 

 

3. Bun을 사용한 라이브러리 설치

1) bun install

$ bun install

프로젝트에 필요한 라이브러리를 설치해라

 

bun install

 >> package.json에 적힌 라이브러리를 실제로 설치하는 명령어

 

2) bun으로 실행되도록 scripts를 수정

vite를 node 방식이 아니라 bun으로 실행하도록 scripts를 수정한 것

 

3) bun dev 명령어로 local 서버 실행

 

 

React 프로젝트 세팅 01
vite와 bun을 사용하여 환경 구성을 한다.

---

2026.03.06 - 수업내용