리액트 프로젝트 구조 리팩토링

개발을 시작한지 3주가 되었다. 처음에는 무작정 코드를 작성하느냐고 프로젝트 구조를 잡지 않고 마구잡이로 생산했는데, 코드를 작성하면서 이 파일은 어디에 있는 것인지 헷갈렸고 개발 속도를 늦춘다고 생각하여 더 늦기 전에 구조를 잡게 되었다.

1. 프로젝트 구조 잡기

현재 나의 로컬 프로젝트 디렉토리는 다음과 같다.

• .github: issue template과 git action시 사용되는 workflows가 있다.
• dist: asset들과 빌드할때 생겨나는 파일들이 이 폴더에 존재한다.
• node_modules: 프로젝트에 사용되는 라이브러리들이 담겨있다.
• public: 정적인 파일들을 주로 담으며, 컴파일이 필요없는 파일들이 위치한다.
• src: 작성한 거의 모든 파일이 이 폴더에 담겨있다.
  • component: 재사용되는 컴포넌트들을 담는다.
  • layout: 페이지의 layout에 해당하는 파일들을 보관한다. (css파일, custom theme 파일등)
  • mocks: msw를 이용하기 위해 만든 파일들과 mock json파일을 보관한다. src파일 외부의 폴더(ex. public)에 저장해서 xhr로 불러와서 이용하면 좋다. (하지만 나의 경우 더이상 mocks를 쓰지 않으므로 굳이 옮기지 않았다.)
  • page: router에 붙는 페이지들을 보관한다.
• .gitignore: git으로 push되지 않는 폴더 및 파일을 정의해 놓은 파일이다. dist, node_modules, .env 등이 작성되어 있다.

---

+추가하면 좋은 폴더들

• assets: 이미지/폰트 파일 저장 (public에 넣는 경우는 컴파일이 필요 없는 경우)
• hooks (=hoc): 커스텀 훅이 위치
• constants: 공통적으로 사용되는 상수
• contexts: contextAPI를 사용할 때 관련 파일들 위치. (redux 사용시 store)

2. git 명령어로 디렉토리 구조 바꾸기

구조화하기 위해 파일 및 폴더를 옮기는 작업이 필요하다. 이 때 로컬에서 직접 변경하는 것보다 git 명령어를 통해 하는 것이 안전하다!
만약 로컬에서 파일이름 수정 및 삭제 후 git push를 하게 되면 git에 그대로 반영이 되지 않는 문제가 있다.
예전에 파일 이름을 모두 카멜케이스를 바꾼다고 로컬에서 MyLayout.tsx을 myLayout.tsx 파일으로 바꾸었는데, git push 할 때 git에서 파일명의 대소문자를 구분하지 못하여 이름변경 반영이 안되었다. 하지만 코드 상에서는 대소문자 구분이 당연히 되서 배포시에 파일을 찾지 못하는 문제가 발생하였다.

git config core.ignorecase false

이 명령어를 사용하여 대소문자를 구분하라고 한 후, push를 했더니 myLayout.tsx과 MyLayout.tsx가 두개 다 git에 생기는 이슈가 있었다!
이러한 이슈등을 방지 하려면 파일 이동, 삭제, 파일명 변경시 다음과 같은 명령어를 사용하여야 한다.

파일 이동/ 파일 이름 변경

• 파일 이동

git mv [파일/폴더 상대경로] [폴더 상대경로]

명령어를 사용하지 않고 옮기면, delete되고 create 된 것처럼 git이 인식한다. 하지만 위의 명령어를 사용하면 rename으로 인식한다.

• 파일 이름 변경

git mv [현재 파일명] [변경할 파일명]

파일 삭제

나는 .gitignore에 dist를 시간이 흐른 후 추가하게 되서, git에 dist가 남아있었다. 이 경우 로컬에는 그대로 두고, git에 있는 dist만 지워야 한다. 이때는 다음 명령어를 사용할 수 있다.

• git에 있는 폴더/파일 만 지우기

git rm --cached -r [삭제할 폴더/파일 경로]

• git, 로컬 둘다 지우기

git rm -r [삭제할 폴더/파일 경로]

• git 명령어를 사용하지 않고 로컬의 파일을 지웠을 때
  • add에 -u 옵션 붙여주기
    git add -u
    수정되거나 삭제된 파일을 반영할 수 있다.
  • commit에 -a 옵션 붙여주기
    git commit -a -m "massage"
    삭제된 파일만 반영된다