오늘 했던 것
- 담당 기능 리팩터링
- 2차 병합
리팩터링
1. 타입 지정
- 타입이 정해지지 않아 any로 지정했던 부분들에
타입을 명확하게 해주었다.
처음에는 타입 명시가 귀찮은 느낌이 없지 않았지만,
막상 하나씩 타입을 지정하는 과정에서 약간 재미를 느끼게 됐다.
명확한 타입으로 리팩터링 해보니
구조적으로 뭔가 단단해진 느낌이 든다.
2. 컴포넌트 분리
- 리액트의 컴포넌트를 볼 때
스크롤을 엄청 많이 해야한다면,
무언가 잘못된 것이라는 말을 어디선가 본적이 있다.
그 말을 되새기며 작성한 코드를 보는데 내 코드는 뭔가 잘못됐다.
스크롤양이 어마어마했다.
2-1. 일차적으로 스타일 컴포넌트를 분리
styled-components로 작업했기 때문에
각 컴포넌트와 동일한 위치에 style.ts를 만들어
스타일을 모두 옮겼다.
2-2. 이차적으로 컴포넌트 분리
map으로 그려지던 UI를 모두 분리했다.
props로 내려주어도 딱 한 번까지만 내려주는 직계 자식(?)까지만
컴포넌트를 분리했고
2-3. 함수 정리
제일 어려웠던 부분..
코드를 작성하는 과정에서 단일의 기능만 하도록 하고
함수가 순차적으로 톱니바퀴처럼 작동하도록 생각하고 짰는데..?
막상 정리하며 보니까 중복 코드가 엄청 많았다.
오늘은 내가 아는 개념 내에서만 정리를 했는데
supabase와 통신할 때의 코드 같은 것은
중복적으로 사용이 되는 것을 봐서는 어떻게 분리를 해서
공통으로 사용하는 함수로 만들 수 있을 거 같다는 느낌이 든다.
리팩터링 개념에 대해 공부를 좀 해야겠다.
문제
-
실시간 채팅의 실시간 메세지 기능이 작동하지 않는다.
이건 마치 홍철 없는 홍철팀...
오류 메세지도 안 뜨고, 그냥 지금 어디선가
재렌더가 일어나야 되는데 일어나지 않고 있는 거 같다🥺
메세지 전송을 해도 DB 테이블 업데이트에 대한 payload가 오지 않는다.
-
내일은 리팩터링 개념 학습 후 적용, 실시간 문제 해결, 디자인 적용을 해야겠다.
