프로젝트 링크: "포켓몬 덱스"로 이동하기

프로젝트 과정 및 트러블슈팅

🚀 TIL 및 트러블 슈팅

1. prop-drilling으로-구현하기 : 트러블슈팅(Array().fill().map() 체이닝)

2. react-toastify 적용, styled-components 분리

3. Context API 및 RTK로 리팩토링 : 트러블슈팅(불필요한 변수와 종속적인 함수)

4. vercel 배포 : 트러블슈팅(이미지 참조 경로 / 새로고침 404 에러)

KPT 회고

Keep - 현재 만족하고 있는 부분

1. 전에 했던 올림픽 메달 트래커는 모든 기능을 구현하지 못했지만 이번 포켓몬 덱스 프로젝트에는 필수 및 도전 기능을 모두 구현해냈다.
2. react가 바닐라 JS에 비해 훨씬 간편한 기능이라는 것이 이번 프로젝트를 겪으면서야 직접적으로 체감이 되었다
   • HTML/JS + styled components를 사용하면 CSS까지 모두 한파일에 사용가능하다(DOM 요소에 하나하나 접근할 필요없어 훨씬 편리해 졌다는 것이 체감이 되었다).
   • context API를 사용하니 prop-drillig에 비해 비약적으로 props관리가 쉽다고 느껴졌다(context API는 value 전체를 구독하기 때문에 하나만 바뀌어도 전체가 리렌더링 된다고 하지만 나는 아직까지 크게 와닿지는 못했다).
3. 처음 팀프로젝트였던 팀소개페이지에서는 git에서 많은 실수를 했었다. 그런데 이번에 git branch 전략을 하면서 비록 팀프로젝트를 진행했던 것은 아니었지만 git을 사용하는 데 있어 조그마한 자신감이 생겼다.

Problem - 불편하게 느끼는 부분

1. 솔직히 redux-toolkit의 장점을 느끼진 못했다. prop-drilling에서 context API를 사용할 때는 쓸모없이 내려지던 props들도 정리되고 코드가 간결해져서 체감이 바로 됐는데 반해 rtk는 하는 노력에 비해 얻는 게 없다고 느껴졌다. 아무래도 redux의 강점을 이해하고 활용하는 능력이 많이 떨어지기 때문이라고 생각된다.

2. react를 배포하는 것은 github page 뿐만이 아닌 vercel에서도 너무 많은 실행착오를 겪었다. 그런데 해결하기에 급급해서 자잘한 에러는 따로 정리하지 못해서 또 같은 일이 벌어질 우려가 있을 거 같다.

3. 너무 구현에 욕심을 낸 나머지 중복되는 코드를 작성하는 경우가 많았고 함수도 굉장히 꼬이고 꼬인 코드를 작성했다. 그래서 rtk를 진행하는데 많은 불편을 겪었다.

Try - Problem에 대한 해결책, 당장 실행 가능한 것

1. 코드를 짤 때 전에 어떤 코드를 짰고 그 코드에서 어느 부분을 다시 사용할 수 있을 지를 생각해서 신중하게 코드를 짤 필요성이 있다. 무작정 새로운 기능을 만들겠다고 필요없는 중복된 코드를 다시는 짜는 일은 없어야 한다.

2. 에러를 만났을 때 해결하기에만 급급하지 말고 왜 이런 에러가 발생했는지 원인 분석과 해결과정을 상세하게 기록하는 습관을 들여 똑같은 실수를 반복하지 않는다.

3. context API와 rtk를 보다 많이 연습하여 자연스럽게 쓸 수 있도록 만든다.