8월 19일 (월) 회고 - dev-FEFIVE/NadoCat GitHub Wiki

각자 자유로운 형식으로 작성해주세요.

문소영

박민혜

• 회원가입을 완료하면 바로 로그인 화면으로 연결되는게 이게 불친절하다는 생각이 들어, 중간에 모달을 하나 넣어주기로 했다.
• 회원가입을 완료하면 회원가입 축하 모달이 뜨고, 확인을 누르면 로그인 화면으로 이동하는 방식으로 변경하였다.

박소현

• 조회수 어뷰징 방지 기능을 구현했다. 어떤 사용자 정보를 어느 저장소에 넣을 것인지에 대한 고민을 정말 많이 했는데, Redis로 사용자 IP를 저장하는 방식을 선택하기로 했다.

이화정

• 게시글을 삭제하는데 문제가 있었다. 게시글을 삭제하면 바로 이전 페이지로 이동하도록 구현했는데 새로고침 없이 뒤로 가기를 누르면 NotFound UI와 이전 데이터들이 그대로 노출되는 현상이 있었다. invalidateQueries를 하면 자동으로 캐시 삭제가 될 줄 알았는데 queryKey 때문인지 **그렇지 않았다. 뭔가 옵션 설정을 더 해주면 되는지 잘 모르겠다. 일단은 removeQueries를 사용하여 캐시를 삭제해 주었더니 정상적으로 동작했다.
• 모달창 같은 경우에는 createPotal을 이용해서 만들고 싶었는데 스크롤 때문에 가운데 정렬이 안된다. 묘하게 오른쪽으로 밀리는데 매우 거슬린다. 그래서 일단은 createPotal 없이 만들었는데 해결 방법이 없을지 고민해 봐야겠다.
• 컴포넌트를 재사용하고 싶어서 구현할 때 최대한 노력을 하고 있는데 쉽지 않았다. 일단 내가 담당하는 게시판의 경우 UI나 기능은 거의 동일한데 일부 값들이 조금 다르다. 조건문을 사용하면 될 거라고 생각했는데 타입 때문에 고통받았다. extends도 해서 확장을 노려보기도 하고 제네릭도 시도해 봤는데 쉽지 않았다. 결국 혼자 해결을 못해서 공식 문서 Using type predicates 내용으로 해결하라고 해서 GPT가 알려준 코드와 공식 문서를 보고 해결했다. 컴포넌트의 재사용이라는 게 어느 범위까지를 의미하는지 생각을 해봐야겠다.
• 댓글 폼 UI를 만드는데 줄바꿈이 일어나면 textarea 높이가 자동으로 변하게 구현하고 싶었다. 그런데 한 글자만 입력해도 높이가 변하는 문제가 발생했었다. 유튜브에 검색해서 구현하는 영상을 여러 개 봤는데 내가 기본 높이를 지정하지 않아서 그랬다. 이번에 해봤으니 다음에는 더 잘할 수 있을 것 같다.
• 댓글이 여러 개 있을 경우 댓글 하나를 삭제하면 삭제 메뉴 모달창이 계속 떠있는 버그가 있었다. 하나하나 console.log를 찍어보면서 확인했는데 이벤트 버블링이 원인이었다. 간단하게 stopPropagation을 사용할까 했으나 예전에 자바스크립트 배울 때 들었던 강의에서 사용하지 말라고 배운 내용이 생각나서 e.target === e.currentTarget 를 이용해서 이벤트 버블링을 막았다. 멘토님에게 stopPropagation를 현업에서 사용하는지 여쭤봤는데 굉장히 많이 쓴다는 답변과 함께 이벤트가 여러 개 엮여 있다면 stopPropagation 사용에 주의하라는 답변을 받았다.
• 댓글 삭제, 수정이나 게시글 삭제, 수정 버튼은 기본 UI가 같아서 재사용을 하려고 코드를 짜다 보니 정말 힘들었다. 일단 commentId 값을 받아와야 하는데 props drilling이 발생하고 값이 여기저기 왔다 갔다 해서 결국은 zustand를 사용했는데 일단 내가 공부를 확실하게 하고 사용한 것이 아니라서 올바르게 사용했는지 잘 모르겠다. 일단 원하는 동작을 하고 있어서 큰 문제는 없지만 공식 문서를 정독해 봐야 겠다.
• 댓글 수정 기능을 만들었는데 UI가 매우 구렸다. 팀원들에게 컨펌을 받으면서 수정했는데 디자인 관련 사이트를 찾아보면서 어떤 식으로 UI를 만들어야 좋은지 공부할 필요가 있을 것 같다.
• 로딩 스피너는 createPotal을 사용하고 싶었는데 또 스크롤 넓이 때문에 가운데 정렬이 안됐다. 처음에는 스크롤 넓이만큼 빼볼까 했으나 브라우저마다 스크롤 넓이가 다르다. 결국 이 문제는 body에 overflow -y: scroll; 해놔야 해결될 문제 같다.
• 구현하면서 Lighthouse를 돌려봤는데 dev 모드라 그럴 수 있지만 점수가 심각하다. 기능 구현이 끝나면 코드 개선이 필요할 것 같다.
• 기능 구현하면서 궁금했던 점들을 멘토링 시간에 멘토님에게 질문드렸는데 궁금한 점들이 많이 해결되었다. 만족스럽다.

장세림

• 동네 고양이 지도에 kakaomap api를 붙였다. 일단은 단순히 고정된 좌표값을 지도로 띄우고, 마커 디자인을 변경해주는 정도만 구현했다. 공식 문서 설명이 잘 되어 있어서 편했다. app key는 env파일에 넣어서 불러오는 방식으로 사용했다.
• 프론트에 만들어둔 API를 연동하는 작업을 진행하면서 자잘한 수정사항들이 보이고 있다. 그럴 때마다 백엔드와 프론트를 같이 수정하고 있다. 블로킹 되는 현상이 줄어들긴 하지만 수정하는 데 시간을 할애하는 만큼 다른 기능을 개발하는 데 그만큼 지연되는 것 같다.
• 저번에 컴포넌트를 어떻게 나눠야 할지 고민이라고 적었는데, 팀원 분께서 비슷한 질문을 해서 멘토님이 답변을 주셨다. 한 마디로 정의하자면 취향 차이이기 때문에 정답은 없다는 답이었다. 다만 기준을 명확히 세운다면 스스로 개발하는데도 일관성을 유지할 수 있고, 컴포넌트를 더 쪼개 달라는 리뷰 요청이 들어오는 상황이 발생하더라도 나름대로 자신의 논리를 펼칠 수 있을 거라고 하셨다. 정답이 없는 부분이기 때문에 더욱 나만의 생각과 기준이 중요한 것 같다.