[Day 55] 2022-0907: TodoList gh-pages 배포

🐈오늘 공부한 것

✔️TodoList 리덕스 툴킷 리팩토링 및 배포

https://hyejj19.github.io/react-todo/

거의 한달간 useState를 사용했다가, styled-components를 연습해봤다가 리덕스 툴킷까지 적용하는 연습을 했던 투두리스트 버전 1을 깃헙 페이지로 배포했다. 최적화까지 해보려고 했는데 일단 다른 것도 만들어 본 뒤 다시 보면 새로울 것 같아 여기서 마무리... 상태를 많이 사용하지도 않고 컴포넌트도 몇 개 없다보니 새로 배운 내용으로 고치는 것은 별로 오래걸리지 않았는데, 좀 힘들었던 부분이 createSlice 를 만들어서 state를 셋팅해주는 부분... 처음 알게 되었는데 immer.js 라이브러리가 사용되면 state가 Proxy 객체로 보이기 때문에, 콘솔에 찍어서 확인하고 싶으면 current(state) 이렇게 작성해야 한다. 또 마지막에 build와 배포 과정에서 생각지 못한 에러를 많이 만나서 해결하느라 시간을 많이 사용했다. 결과적으로 95% 정도 성공했는데 마지막에 취소선 스타일링이 제대로 적용이 되지 않는다.. 나중에 해결하기로 하고...!

 

어려웠던 에러 한 가지만 정리하자면, 빌드 후 배포를 했는데 깃헙 페이지에 들어가서 보니 빈페이지와 함께 manifest.json 404 에러가 발생했다. cra 로 생성한 리액트 코드를 빌드하면 그 빌드 안의 index.html에 manifest 라는 부분이 있는데, 배포 후 빈 페이지가 나타난다면 이 부분을 지워서 해결하는 방법이 있다. 스택오버플로우에 따르면 이 부분이 인터넷 연결 없이 사용할 수 있도록 하는 부분이라 필요가 없다고 함. 해당 코드를 주석처리하고 다시 빌드하니 잘 동작했다.

 

글로 상세하게 정리하고 싶은데 시간이 오래 걸릴 것 같아서 주말이나 연휴에 작성하기로... 

🐈더 공부할 것

1. 알고리즘

2. 빅오 표기법

3. 클론코딩 

🐈오늘의 느낀 점

오늘은 리덕스 툴킷 리팩토링하면서 발생한 에러 핸들링과 빌드, 배포 과정에서 발생한 에러 핸들링에 시간을 많이 사용했다. 발생한 에러와 처리 과정을 기록하면서 했는데, 이렇게 메모하니까 나중에 각잡고 글 쓸 때도 참고를 잘 할 수 있을 것 같다. 지금 보니 해결 자체는 엄청 간단했는데 문제의 원인이 어딘지 파악하는 과정이 살짝 어려웠던 것 같다. 그리고 지금 고민은 이 과정을 어떻게 글로 작성할지.. 간단한 앱이여도 나중에 프로젝트 회고할 때 참고할 수도 있을 것 같아서 포맷을 딱 정리하고 작성해봐야지!