✏️ 무엇을 배웠나
1. 컴포넌트화의 중요성
오늘 수정 기능을 끝으로 도서 리뷰 CRUD 구현을 모두 끝냈다. 혼자 CRUD를 다 해보는 게 처음이었고 파이어베이스를 백엔드로 사용해서 알아야 할 게 많았다. 어제 알게 된 함수 사이에서 값을 주고 받을 때 꿀팁(어제자 TIL에 있음)을 기억하니 수정 기능은 생각보다 쉽게 됐다.
CRUD 기능 외에도 각종 피드백 메시지를 띄워주고, 예외처리를 해주다 보니 코드가 생각보다 너무너무 길어졌다. 거의 600줄에 육박함. 이게 맞나 싶고 이게 아닌 거 같다는 생각이 든다.
프로젝트 마감 때문에 정리를 못하고 뒀는데 여간 찜찜한 게 아님. 그리고 코드가 길어지고 복잡해지다보니까 컴포넌트로 잘게 쪼개줄 때 데이터 흐름도 생각해야 해서 생각보다 복잡한 작업이었다.
일단 작성하고 컴포넌트로 분리해도 되는데, 이번의 경우에는 좀 잘못됐다. 코드가 돌아가긴 하지만 에러가 뜰 때 한참 찾아야 해서 불편했고 나중에 유지보수를 생각하더라도 이건 좀... 아닌 것 같다.
다음에 덩어리가 큰 기능을 구현할 때는 단계별로 컴포넌트로 나눠줘야겠다. 컴포넌트화하면 유지보수에 좋다는 말이 오늘에서야 와닿아 기록으로 남겨둔다.
2. 협업 시 코드 포맷 통일 꼭 하자
어떤 사람은 싱글 쿼트를 쓰고 어떤 사람은 더블 쿼트를 쓰니까 별 거 아닌 거 같은데 문제가 생긴다. 사실 merge editor로 금방 해결할 수 있긴 한데 프로젝트 기간에 이런 작업을 반복적으로 하다보니 피로감이 있었다. 다음부터는 프리티어도 통일해두고 사용해야겠다.
3. null is not an object 에러 잡기
여러 케이스에서 발생할 수 있는 에러인데, 이 메시지는 객체에 접근할 때 주로 발생한다. 그러니까 결국은 지금 주어진 객체가 null값이라는 얘기다.
나의 경우에는
<IconBox disabled={currentUser?.uid !== review.creatorId}>
</IconBox>이 코드에서 currentUser만 로그를 찍어보면 잘 출력이 되는데 그 안에 있는 uid에 접근하려고 할 때 에러가 났다. 컴포넌트가 리턴하는 렌더링 부분에 포함된 코드였고 렌더링 부분 전에 넣어서 확인하니까 저 값 자체에는 문제가 없었다.
렌더링 부분에서 저 코드를 읽을 시점에서는 저 값을 못 읽어온다는, 그러니까 존재하지 않는다고 평가되는 거라 옵셔널체이닝을 사용해 해결해주었다.
🥵 무엇이 어려웠나
1. Render Error를 마주치는 게 무서웠음
오늘은 하루 종일 에러만 잡은 것 같다. 뭐만 하면 Render Error가 떴는데 디버깅의 결과는 항상 나의 실수였다. 휴먼 에러를 줄일 수 있는 방법이 뭐가 있을까 고민해봐야겠다.
