[React / TypeScript] CRA로 React + TS 프로젝트 세팅하기

 

📢 본 게시글의 명령어는 윈도우를 기준으로 하고 있습니다.

 

1. GitHub에서 프로젝트 repo 생성하기

 

GitHub에서 프로젝트용 repo를 생성한다. repo 생성 시에는 README 파일 없이 생성해 주었다.

 

 

 

 

repo 생성을 완료하면 README가 없는 레포가 위와 같이 만들어진다.

 

 

 

---

2. Local에서 CRA로 TS 프로젝트 만들기

VSCode로 해당 프로젝트를 만들 루트 폴더에 진입하고 아래와 같이 CRA로 프로젝트를 생성한다.

 

yarn create react-app 프로젝트명 --template typescript

 

예전에는 npm보다 yarn이 속도가 빨랐지만 요새는 큰 차이가 없다고 한다. 나는 고양이를 좋아하니까(💙😺💙) yarn으로 세팅해 주었다.

 

 

 

 

당장 필요하지 않은 파일들은 다 지우고, ESLint와 Prettier 설정까지 끝난 후의 파일 리스트는 위와 같다. (TS에서 ESLint와 Prettier, tsconfig.json 세팅 방법은 별도 글 작성 예정)

 

 

 

---

3. GitHub과 Local 프로젝트 연결하기

 

해당 폴더에 .git 파일이 있는지 확인하고 있으면 그대로 진행하고, 없으면 루트 경로에서 아래 명령어를 입력해 git이 해당 폴더 관리하도록 설정한다.

 

git init

 

 

 

git remote -v

 

위의 명령어를 이용해 연결된 GitHub 링크가 있는지 확인한다.

 

 

참고로 GitHub 주소는 위와 같은 주소를 말한다. 윈도우는 HTTPS, 맥은 (SSH 설정 끝마쳤을 경우) SSH로 진행한다.

 

 

1-1. 기존에 연결된 링크가 있을 경우

git remote set-url origin (.git으로 끝나는 GitHub repo 주소)

 

 

1-2. 새로 추가하는 경우

git remote add origin (.git으로 끝나는 GitHub repo 주소)

 

 

명령어 입력 시 이전과 다르게 remote 주소 설정된 걸 확인할 수 있다.

 

 

 

세팅한 파일들을 add하고 commit해 GitHub에 설정해 둔 파일들을 세팅한다.

 

 

 

 

commit을 마치고 GitHub의 해당 repo에 들어가 보면 push된 것을 확인할 수 있다! (chore가 아니고 init으로 했어야 했는데....!)

 

 

 

---

[이전 글]

https://oliviakim.tistory.com/155

[GitHub]　협업을 위한 Organization 만들기