리액트 쇼핑몰만들기(프로젝트 세팅)

작년 초에 학원에서 리액트로 쇼핑몰을 만드는 수업을 받았었다.  

다시 리액트를 사용하려고보니 빌드툴도 vite라는 것을 사용하고 상태관리쪽도 새로운 라이브러리가 떠오르고있는듯해서 

다시 연습하는겸 쇼핑몰 프로젝트를 다시만들어보려고한다. 

지금 다니는 회사에서도 리액트 , 타입스크립트 , 넥스트 같은 기술들을 도입하려고 준비하다보니 따라가는 입장에서 연습을 해보고 사용할수있는 api도 회사에서 사용하는 기술인 fastAPI 프레임워크를 통해서 만들어보겠다. 

 

1. 프로젝트 세팅

npm create vite@latest 프로젝트이름

프레임워크와 옵션을 선택할수있게 나올텐데 방향키로 움직여서 원하는 옵션에서 엔터를 누르면 해당 옵션과 프레임워크가 설치된다.

 

나는 리액트 프레임워크에 타입스크립트와 swc를 사용하게 설정해주었다. 

 

이제 vscode로 프로젝트를 열어주고 프로젝트를 실행하기위해 라이브러리를 설치해준다.

npm i

 

라이브러리들이 다 설치되면 잘 실행되는지 확인해본다.

npm run dev

이렇게 running 되었다고 뜰텐데 저 localhost 주소로 들어가보면 페이지가 정상적으로 동작하는지 확인하면 된다.

이렇게하면 리액트 프로젝트를 시작할준비가 끝이났다.