[React] React 프로젝트 만들기

공부하려면 직접 프로젝트를 만들어보는 게 가장 좋다!

먼저, React 프로젝트를 생성해보자.
이번 과정에서는 VS Code를 사용하여 개발을 진행할 예정이다. 🚀

 

✅ VS Code 를 다운받기 전, node 를 "최신 버전"으로 다운받는다.

맥북 유저들은 nvm으로 node버전을 관리하는 것을 추천한다. 그때 그때 필요한 버전으로 변경할 수 있어서 매우 편리함!

(nvm 이란 ? node version manager인데, 노드 버전을 관리하는 스크립트)

 

✅ nvm이 설치되어있다는 전제 하에 terminal에 들어가서 아래 명령어를 실행하면 lts 버전으로 설치가 된다.

nvm install --lts

 

✅ 설치가 되었다면 버전 확인

node -v
npm -v

 

✅ VS Code 다운받으러가기

https://code.visualstudio.com/

 

✅ 다운받은 뒤 VS Code를 실행한 뒤, 메뉴 바에서 View > Terminal 클릭

 

✅ 이제 VS Code 하단에 터미널 탭이 활성화 되는데, 이후부터는 터미널에서 작업을 진행하면 된다.

 

✅ 먼저, 프로젝트를 만들고 싶은 디렉토리로 들어간다.

cd folder-name

 

✅ 만약 원하는 폴더를 바로 터미널에서 만들고 싶다면 ?

mkdir folder-name

 

✅ 원하는 디렉토리에 리액트 프로젝트 생성해주면 완료 ! ! !

npx create-react-router@latest

 

✅ 프로젝트 생성 시 선택 옵션 간단 정리

옵션	설명	추천 선택
TypeScript	프로젝트에서 TypeScript 사용 여부	Yes (타입 안정성)
ESLint	코드 스타일과 품질 자동 검사 Linter 사용 여부	Yes (코드 품질 유지)
Tailwind CSS	Tailwind CSS 기본 설정 여부	선택 사항 (UI)
src directory	src/ 폴더 사용 여부	Yes (구조 정리)
App Router	Next.js 최신 App Router 방식 사용 여부	Yes (최신)
Turbopack	새로운 번들러 사용 여부 (next dev 속도 향상)	No (아직 실험적)
import alias	기본 @/* Import alias 유지 여부	No (기본값 유지)

 

어차피 공부하는 거니까 Turbopack 을 Yes 로 선택해봤다.

Next.js 에서 Webpack 을 대체해서 새로 나온 빌드 시스템인데 핫 리로딩 속도가 빠르지만 아직 베타버전이다.

안정성을 생각한다면 No 를 추천 !!