💻TIL 23.04.05

😏그동안 진행 상황

근 2~3주 동안 나는 Migration을 진행하였다. 처음에는 단순히 Next에서 React로 옮기는 거니까 "뭐....금방 하겠지?"라는 생각을 했었다. 하지만 이것은 나의 착각.... 내 생각보다 과거 나의 코드는 더 엉망진창이였다.

우선 위에서 말했듯이 나의 예전 코드는 정말 생각하지 않고 "구현"만 될 수 있게 짜여있었다. 이는 내가 어느 부분을 수정해야하는지 찾는데만 5~10분이 걸렸는데 이게 쌓이다 보니 몇시간씩이나 걸리게 됐다.
다음으로는 clubstudy는 기존 여러가지의 domain을 사용했었는데, 이는 배포하는 과정에서도 불편했지만, 생각보다 학생 domain과 mainPage의 domain이 겹치는 부분이 많았다. 그래서 domain을 줄이기로 했는데 여기서 다른 문제가 발생한다.
- 기존 mainPage는 Emotion만을 사용해서 직접 모든 component들을 styled로 수정해서 그려나갔다. 하지만 studentPage에서는 mui를 기본으로 해당 mui component를 emotion을 통해 수정했기 때문에 mainPage와 studentPage는 합치기 불가능한 상황이였다.

내 판단으로는 아 이건 mainPage를 뜯어서 고쳐나가는 것보다는 mainPage 코드를 참고해서 아예 새로 코드를 짜는 것이 낫다고 판단했다.
mainPage를 처음 만들었을 때는 거의 3개월이 걸렸었던 것으로 기억하는데, 이번엔 기존 코드가 있고 구조도 미리 짠 뒤에 코드를 작성하다보니 2주일? 정도의 시간 밖에 걸리지 않았다.
기존 mainPage 폴더 안에 새롭게 cra(create react app)을 통해서 코드를 작성했고 모두 정상적으로 작동이 됐기 때문에 해당 cra를 기존 메인 폴더로 옮겨 놨어야 했다.
```
  // before
  ├── node-modules
  ├── components
  ├── page
  ├── new Create React App
  ├── style
  └── run
```
하지만 폴더 구조를 보면 node-modules라는 것이 있는데 이 파일이 진짜 너무 커서 지우는데 하루종일 걸리는 듯한 느낌을 받았고 이게 무엇인지 알아봤다.

node_modules 디렉토리에는 package.json에 있는 모듈 뿐만 아니라, package.json에 있는 모듈이 의존하고 있는 모듈 전부를 포함하고 있다. 그래서 node_modules 디렉토리안에는 정말 많은 모듈들이 들어가 있다. npm으로 새로운 모듈(패키지)를 설치하게 되면, package.json과 node_modules에 추가된다.

출처
https://cheonmro.github.io/2018/12/23/package-json/

즉 우리 프로젝트에 들어가는 모든 모듈들을 포함한 파일이다. 그래서 그렇게 용량이 컷던 것이다.
이를 해결하는 방법을 한가지 찾았는데