프로젝트 초기 셋팅하기 (CRA와 Backend 분리하기)

/* 정보 전달 목적의 글 보다는 공부하면서 기억하기 위해 적는 글입니다.
따라서 깊이가 얕으며, 잘못된 정보가 있을 수 있습니다. */

---

아래 사진처럼, goodfaithbox(만들고자하는 프로젝트명)라는 폴더안에 frontend 폴더와 backend폴더를 만들어서 각각 진행하고자 한다. 이 때, frontend는 CRA를 이용하여 만들 예정이다.

 

 

지금부터 초기 셋팅을 시작해보자!

 

 

---

 

1. 우선 github에서 repository를 만들어준다.

 

 

2. 로컬에서 goodfaithbox 폴더를 만들고, 해당 폴더로 이동한 후 git init을 해준다.

 

 

3. .gitignore, readme.md, .gitmessage.txt를 작성한다.

 

.gitignore

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
node_modules
/.pnp
.pnp.js

...

# env file
.env

/node_modules를 node_modules로 바꿔주자.

 

.gitmessage.txt

################
# <타입> : <제목> 의 형식으로 제목을 아래 공백줄에 작성
# 제목은 50자 이내 / 변경사항이 "무엇"인지 명확히 작성 / 끝에 마침표 금지
# 예) feat : 로그인 기능 추가
################
# 필요한 것을 앞에 주석을 지우고 사용하세요 !!
# [✨Feat] : 새 기능
# [🔨Refactor] : 리펙토링
# [🐛bug] : 버그 수정
# [🛠setting] : config 파일 수정
# [💄style] : UI/스타일 파일 추가/수정	
# [📝docs] : 문서 추가/수정
################

# 바로 아래 공백은 지우지 마세요 (제목과 본문의 분리를 위함)

################
# 본문(구체적인 내용)을 아랫줄에 작성
# 여러 줄의 메시지를 작성할 땐 "-"로 구분 (한 줄은 72자 이내)

################
# 꼬릿말(footer)을 아랫줄에 작성 (현재 커밋과 관련된 이슈 번호 추가 등)
# 예) Close #7

 

 

4. CRA를 이용하여 frontend 폴더를 만들어준다.

 

npx create-react-app frontend

 

5. frontend 폴더에 있는 .gitignore, readme는 삭제해준다.

 

 

6. git add후, commit을 한다.

 

만약, add를 했을때 'warning: LF will be replaced by CRLF in cashbook/app.js. The file will have its original line endings in your working directory' 와 같은 오류가 난다면, 아래 명령어를 입력하여 해결해주자.

 

git config --global core.autocrlf true

 

 

7. 현재 브랜치(master)를 main으로 rename해준다.

 -M 옵션은 <oldbranch> 의 이름을 <newbranch> 로 바꿔준다.

 

git branch -M main

 

 

8. github에 있는 저장소를 origin으로 등록시켜준다.

 

git remote add origin https://github.com/내아이디/레포이름.git

 

 

9. 원격저장소에 push한다.

 

git push -u origin main

 

 

 

---