vite로 리액트 프로젝트 생성하기 + git hub 저장소 연결

 
 

 

 
한달전에 리액트 포폴 만드는 과정을 이 티스토리에 기록해보자 하며

리액트 환경세팅 : 프로젝트 생성 후 뜨는 에러

 
이런 포스팅을 작성했었는데...


밥먹다 알게 된 사실...
cra로 프로젝트를 생성할때, 에러가 많이 떴던 이유는 이제 리액트를 만든 페이스북에서 더이상 라이브러리 업데이트를 해주지 않는다고???
22년부터 더이상 릴리즈가 되고 있지 않고...

24년 말부터 cra로 리액트 프로젝트를 생성하면 무.조.건
에러가 뜬다는 커뮤니티 게시글이 스물스물 올라왔다고 한다!

일단 포트폴리오 프로젝트는 cra로 많이 진행해왔기 때문에... cra로 마저 진행하고, 새로운 토이 프로젝트는 vite로 진행해보는걸로...
 
 

📍 vite로 리액트 프로젝트 생성하기

 
☑️ node를 설치하고 제대로 설치가 되었는지 node 버전과 npm 버전 확인하기

node -v
// node 버전 확인

npm -v
// npm 버전 확인

 
 
 
☑️ vite로 js 리액트 프로젝트 설치

npm create vite@latest my-react-app --template react

 
 
☑️ vite로 ts 리액트 프로젝트 설치

npm create vite@latest my-react-ts-app -- --template react-ts

 
 
☑️ 폴더 이동

cd my-react-ts-app

 
 
☑️ 의존성 설치

npm install

 
 
☑️ 개발서버 실행

npm run dev

 
 

 
npm run dev로 개발서버를 실행하면 이런 화면이 뜬다...!
기존 cra로 프로젝트를 생성할때와는 다른 화면!
 
 

---

 

📍 생성한 프로젝트와 git hub 연결하기

 
☑️ 해당 명령어로 git 초기화

git init

 
 
☑️ 깃허브에 로그인 해서 새로운 프로젝트 폴더를 생성
- 빨간 박스 친 부분은 체크하지 않고 프로젝트 생성

 
 
☑️ 생성한 git repository의 url을 복사
- url 형식은 https://github.com/사용자이름/저장소이름.git
 
☑️ 터미널에 복사한 git repository url을 로컬과 깃 저장소와 연결

git remote add origin https://github.com/사용자이름/저장소이름.git

 
 
☑️ 수정한 사항을 깃에 커밋

// 프로젝트의 모든 파일을 깃에 추가
git add .

// 초기파일 커밋
git commit -m "Initial commit"

 
 
☑️ git에 커밋

// 기본 브랜치가 main 일 경우
git push -u origin main

// 기본 브랜치가 mater 일 경우
git push -u origin master