부스트캠프 멤버십 그룹프로젝트 3주차를 마쳤다.
벌써 4주차다... 2주차 밖에 남지 않았다.
배운 것
이번주는 꽤나 많은 도움을 받은 한 주였다.
도움을 줄때도 기분이 좋지만, 이제는 도움을 받을때도 참 기분이 좋다.
그 사람이 나를 위해 시간을 내고, 같이 고민해줬다는 것에 참 감사하다.
개발 환경 개선하기
이전 주에 구현했던 내용들에 엣지케이스가 상당히 많아서 이번주에는 이 부분을 개선하려고 노력을 많이 했다.
그러나 우리 서비스의 경우에는 쿠키를 통해 토큰을 전송하기에, 로컬-배포환경의 차이가 발생할 수 밖에 없었다.
이걸 해결하지 못하면 개발시에 오류를 만나보지 못하게 되고 배포하기 전까지 확인하기 어렵다는 문제점을 맞이했다.
지금까지 개발-로컬환경의 차이가 이렇게 크게 나는 경우(로컬에서 api테스트가 불가한 상황)는 처음이었기에 이 문제를 해결하는데에 많은 시간을 투자해야했다.
테스트서버를 배포하거나, E2E테스트를 구성할 수 있을텐데 해당 부분은 시간이 많이 들기에 최대한 로컬에서 테스트할 수 있는 방향으로 진행해보고자 했다.
이 과정에서 다른 조 캠퍼분의 도움을 받을 수 있었는데, 덕분에 그 분의 고민, 그리고 해결한 방식에 대해 빠르게 이해할 수 있었다. 고민했던 내용을 기록하고, 공유하는게 정말 중요하다는걸 새삼 느낄 수 있었다. 나도 더 많이 작성하고, 더 많이 공유해야겠다는 생각을 했다.
문제 해결과정은 여기에 남겼다.
성능 개선하기
이전 주의 피드백으로 모달의 책임문제, 렌더링 최적화에 대한 내용을 받았었는데, 해당부분을 개선해보고자 했다.
과정에서 페어와 함께 번들링 청크를 줄여보기도 했고, 데이터를 캐시해보기도 했고, 렌더링에 대한 내용도 학습할 수 있었다.
1. 청크
청크에 대한 내용이 흥미로웠다.
라이브러리를 쓰면 그냥 쓰는게 다인줄 알았는데, 필요한 부분만 쓰는게 중요하다는 것을 알게되었다.
청크사이즈가 커지면, 클라이언트 사용자가 받아야하는 js파일의 크키가 커지므로, 로딩이 오래걸리고, 이에따라 흰화면을 보는 등의 부작용이 생길 수 있다.
혼자 진행했다면 이런부분을 전혀 생각하지 못했을 것인데, 페어가 알려주어서 알 수 있었다.
이전의 청크를 시각화하면 이랬다. highlightjs라는 코드 하이라이팅 라이브러리를 사용했는데, 여기서 사용하지 않는 언어에 대해서도 번들링이 되었기때문이었다.
이걸 필요한 부분만 포함하도록 변경해주었고, 그 방법이 여러가지 방법이 있다는 것도 학습할 수 있었다. 현재는 부분만 import하고, 이걸 모아서 하나의 모듈로 만든다음 다시 export시켜주었다.
코드 스플리팅과 같은 방법이 있다는 것을 알게되었는데, 이부분은 이번주에 고려해볼 수 있을 것 같다.
2. 데이터 캐시 (react-query)
리액트 쿼리를 본격적으로 사용하면서 키를 통해 캐시를 관리해보았다.
사실 이전에 리액트쿼리를 사용해봤지만, 부끄럽게도 캐시데이터에 대해 더 고민해본 기억은 딱히 없다....
쿼리키 마다 데이터가 캐싱된다는 점을 전주에 ContextAPI에 대해 더 학습했기에 드디어 코드레벨에서 조금이나마 이해할 수 있었고, 그래서 조금 더 잘 활용할 수 있었던 것 같다.
그래서 이번에는 최적화를 위해 리액트 쿼리의 캐시를 제대로 사용해보고자 노력했다.
키마다 캐시가 유지된다는 사실, 이걸 무력화시킬 수 있다는 사실을 적극 활용해서 서버 데이터 통신을 최소화하고, 이를 통해 비용을 줄이고자 노력했다.
3. 렌더링 최적화
useCallback, useMemo, React.memo함수를 사용해서 컴포넌트를 메모아이징하고, 이걸 렌더링페이즈에서 어떻게 다룰 것인지에 대한 고민을 할 수 있었다. 또, 객체 참조값을 유지할 것인가? 변경할 것인가?와 props에 대한 고민들도 자연스럽게 할수 있었다.
(이 부분은 나중에 정리해서 블로그에 올려볼 예정이다.)
아무래도 렌더링 자체에 대한 고민들이다 보니 이전에 학습했던 리액트 실제 코드들, 그리고 리액트를 나름대로 만들어봤던 경험들이 아주 큰 도움이 됐다.
리액트와 관련해서 1년전만해도 그냥 이렇게 해보니까 되네? 했던 것들이 그때는 왜 안됐고, 지금은 왜 작동하는 것인지 명확하게 답할 수 있을 정도로 성장했다는 것을 느낄 수 있었다.
개선해야할 점
복잡해지는 디렉토리 구조와 읽기 힘들어지는 코드들
이번주 목표가 기능개발을 거의 완료하는 것이어서 그런지 빠르게 개발하였고, 이에 따라 디렉토리 구조가 점점더 복잡해지고, 코드도 읽기 힘들어지고 있다.
정말 개선이 필요할때이다.
기능 개발이 어느 정도 완료되었기에, 이제는 조금 더 읽기 쉽고, 역할과 책임이 명확한 코드로 바꾸어 조금 더 성능을 개선해보고자 한다.
읽기 힘들면 성능 개선도 힘들다... 반드시 필요한 부분이다.
이에 따른 테스트 코드 필요
이전주에도 그랬지만, 테스트코드가 부족하다. 예외케이스는 너무나도 많다.
이 부분을 해결하고, 코드 개선을 위해 테스트코드가 필요하다. 우리 코드가 제대로 동작하는지 검증해줄 코드가 필요하다!!!
4주차를 마치며...
이번 프로젝트는 뭔가 내가 했던 어떤 프로젝트보다 열심히, 문제해결과 구현에 대한 이유를 찾으며 진행하고 있다는 생각이 들었다.
한편으로는 이전의 플젝들은 근거가 부족한 상태로 라이브러리를 사용하기도 했고, 이유 없는 구현을 했다는 반성도 하게된다.
뭐 물론, 이걸 인지했다는게 이전보다 성장했다는 것이기도 하겠지만, 조금 부끄러워지는 것은 사실이다.
앞으로의 프로젝트들은 항상 이번 프로젝트처럼 백로그를 통해 관리하고, 고민들과 해결방법들을 문서화하며, 이유를 명확히 찾아가야겠다는 다짐을 하게 됐다.
그룹프로젝트도 이제 2주밖에 남지 않았다. 사실 마지막주는 발표준비라 개발할 수 있는 시간은 1주밖에 남지 않은 것이다. 남은 1주간 모든 것을 다 쏟아부어보자.
다음 주는 정말 화이팅이다.
