[FE] React + Vite + TypeScript/JavaScript 프로젝트 생성하기

Vite?

프론트엔드 프로젝트를 만들고 개발할 수 있게 해주는 빌드 도구 + 개발 서버다. 

> React 코드를 작성하면, 브라우저가 실행할 수 있는 형태로 준비해주고 개발 중에는 빠르게 확인할 수 있게 해주는 도구. 

 

프로젝트에서

npm run dev

 

를 실행하면 Vite가 서버를 띄운다. 

그럼 주어진 localhost에 접속해서 React 앱을 볼 수 있다. 

 

또, Vite가 React에서 사용하는 JSX / TSX를 브라우저가 이해할 수 있게 Script로 변환해주는 역할을 한다. 

 

만약 Vite가 없다면,

React 프로젝트에서 직접

• JSX 변환
• 모듈 연결
• 파일 압축
• 개발 서버 구성
• 빌드 설정

을 직접 해야 한다. 

 

즉, Vite를 사용하면 React 개발을 훨씬 빠르고 편하게 할 수 있다. 

---

Vite + React 프로젝트 생성하기

Visual Studio Code 열기

 

1. Open Folder를 클릭하여 원하는 폴더를 열어준다
2. 터미널을 연다
3. Node.js를 설치한다.

$ node -v
v22.16.0

npm -v
10.9.2

 

버전이 나오면 준비가 완료된 것! 

 

Vite로 React 프로젝트 생성하기

터미널에서 원하는 폴더로 이동하였으면,

npm create vite@latest 개발할폴더이름

 

그리고 설정을 선택하라는 안내문이 나오는데

 

내려서 React 선택하기

 

 

사용하실 언어 선택해주시면 됩니다. 

TypeScript 또는 JavaScript

 

 

어떤 linter를 사용할건지를 묻는 내용이 나오는데, ESLint를 선택하면 된다.

ESLint는 React 생태계 표준이라고 볼 수 있다:

 

• ESLint
  • 가장 많이 쓰는 JavaScript/React 린터
  • 자료와 설정이 많음
  • 회사 프로젝트에서 흔함
• Oxlint
  • 매우 빠른 최신 린터
  • 아직 React 생태계에서는 ESLint만큼 보편적이지 않음

 

린터 Linter ?
코드를 실행하기 전에 문법 오류, 잠재적인 버그, 잘못된 코딩 스타일을 찾아도는 도구

>> 코드 검사기

 

 

Yes를 눌러도 상관없지만, No를 눌렀을 때의 과정을 보여주기 위해서 일단 No를 선택하겠다. 

 

cd 개발할폴더이름
npm install
npm run dev

 

의 순서를 지키며 터미널에 코드를 입력하면 된다. 

 

 

기본 Vite + React 프로젝트 구조가 완성되고, 실행시켜보면 

 

이런 페이지가 웹 상에 뜬다. 그럼 리액트 프로젝트 만들기 성공 ~!~~!!

 

---

 

[FE] React란? DOM, 상태 State, 그리고 Hook까지