1) vite를 이용한 리액트(v19) 프로젝트 생성

리액트에 대한 관심이 높아져서 vite를 사용하여 리액트 프로젝트를 생성하고, 스프링부트를 이용하여 프로젝트를 새로 시작하여 최대한 실무적인 관점에서 진행하려고 합니다. 리액트 프로젝트에서 사용하는 프로그램과 의존성은 아래와 같습니다.

 

프론트

• VSCode
• Node.js (v22.14.0)
• TypeScript
• Vite
• MUI (CSS 라이브러리)
• Axios (백엔드와 통신하기 위해 사용)

 

백엔드

- 추후 기술

---

[리액트 프로젝트 생성 및 의존성 추가]

>  리액트 프로젝트 생성시 필요한 프로그램들은 다른 블로그나 AI를 활용하면 금방 찾으실 수 있습니다. 바로 vite를 이용하여 프로젝트를 생성하고 의존성을 추가하도록 하겠습니다.

 

가. 프로젝트 생성

npm create vite@latest

1. 터미널에서 위 명령어를 입력 합니다.
2. Need to install the following packages: ~~ 라는 메세지가 나오면 y를 눌러 패키지를 설치합니다. 
3. 프로젝트 명을 적절히 입력하고, 프레임워크는 리액트를 선택하였습니다.
4. variant 는 자바스크립트가 아닌 타입스크립트를 선택하였습니다.

위 작업을 진행하였으면 해당하는 폴더에 입력한 프로젝트명으로 리액트 프로젝트가 정상적으로 생성되었음을 알 수 있습니다. 이제 터미널에서 새로 생성한 프로젝트 폴더로 이동하여 아래와 같은 의존성을 추가해 줍니다.

 

나. 의존성 추가

axios 설치

npm install axios

 

MUI 설치

npm install @mui/material @emotion/react @emotion/styled
npm install @mui/icons-material

 

위 과정을 통해 의존성 추가를 완료하였다면 package.json 파일에 의존성이 추가된 것을 확인할 수 있습니다.

 

[로컬 환경 확인]

터미널에서 npm run dev 명령어를 입력하면 VITE가 실행되고 로컬 환경이 활성화됩니다.

Local에 해당하는 URL로 접근하면 아래와 같은 화면이 나타나면 성공입니다.

 

다음은 백엔드 프로젝트 구성 전에 Axios를 셋팅하도록 하겠습니다.