[React] 리액트 시작하기

📌 VSCode에서React 개발 환경 설정

---

✅ 1) npm create vite@latest

Vite를 사용해 react를 사용하는 프로젝트를 생성합니다.

1️⃣ 프로젝트를 생성할 폴더의 통합터미널 열기
2️⃣ npm create vite@latest 명령어 입력

Project name: 프로젝트 폴더명  
Package name: package.json의 "name": 속성값 으로 지정  
Select a framework: React  
Select a variant: TypeScript

프로젝트가 생성 완료된 모습

---

✅ 2) npm install

package.json 에 의존성을 설치합니다

---

✅ 3) npm run dev

개발 서버를 실행하는 명령어 입니다.

정상적으로 설정이 완료되면 해당 화면이 출력됩니다.

💡 핫 리로딩

• 앱을 처음부터 다시 시작하지 않고, 새로운 코드 변경에 따른 해당 변경 사항만 실시간 반영하는 기능

---

✅ 4) npm install --save-dev @types/node

vite.config.ts는 Node.js 환경에서 실행

vite.config.ts에서 src 폴더 절대 경로를 '@' 로 설정하려 했지만

절대 경로 설정 alias:@ 타입스크립트 내장 모듈 타입정보 부족으로 인식이 안됐습니다.

문제를 해결하기 위해 해당 내용에 대해 검색해본 결과

Node.js 환경에서 실행하여 path의 기능을 사용할 수 있도록 했습니다.

방법은 다음과 같습니다.

✅ npm install --save-dev @types/node 명령어를 입력

📌 tsconfig.app.json 환경 설정

✅ baseUrl

✅ paths

오류가 발생하지 않는 모습!!

---

✅ 5) npm install react-router-dom / npm install --save-dev @types/react-router-dom

페이지간 라우팅을 쉽게하기 위해서 router dom 라이브러리를 설치하는 과정입니다

Ts를 이용해 개발하는 환경이므로 개발 의존성도 설치해줍니다

1️⃣ React에서 페이지 이동(라우팅)을 가능하게 해주는 라이브러리

2️⃣ SPA인 React가 페이지 새로고침 없이 하나의 페이지에도 화면이 렌더링

💡 주소(URL)에 따라 다른 컴포넌트를 보여주고 싶을 때 사용

라이브러리 적용이 완료된 화면!!