react 프로젝트 생성하자

리액트를 공부해보자 !!! 

 

리액트를 사용하려면 Node 를 설치해야하는데 (node, npm)

 

노드 개발할때 경험을 살려서 이왕이면 nvm 으로 설치하자 ( 이건 본인 편한대로 해도 상관없다 )

 

https://github.com/coreybutler/nvm-windows

 

윈도우의 경우 이 링크를 사용하자 

 

https://github.com/coreybutler/nvm-windows/releases/tag/1.1.12  

 

 

그리고cmd (터미널) 에서다음과 같이 버전을 확인 할 수 있다  

 

 

 

이제 리액트 프로젝트르 만들어야 하는데 과거랑 좀 다른게

vite (비트) 라는거를 이용해서 리액트 프로젝트를 생성할 수 있다(리액트 뿐만아니라 뷰, 스벨트 등등 다양하게 지원한다)

 

vite를 사용해야 하는 이유도 사이트에 적혀있다.

https://ko.vitejs.dev/guide/why.html

Vite

 

 

 

 

1. 리액트 프로젝트 생성

 

위에서 말한 vite을 이용해서 리액트 프로젝트를 javascript 버전으로 (typescript도 가능) 생성해보자 

 

터미널에서 진행한다

 

npm create vite@latest

 

 

 

프레임워크를 리액트를 선택한다

 

 

 

 

 

잘 생성되었

 

내부 파일은 다음과 같다

 

 

이를 사용하는 IDE로 열어보자 ( 나는 webStorm 을 사용한다 )

 

 

아까 지시한대로 다음을 수행한다

npm install 

npm run dev

 

하지만 필자는 포트를 3000번으로 하고싶어서 

 

다음과 같이 추가했다

 

다음 명령어를 실행하면 3000 번 포트로 실행한다

 

npm run start