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

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

문소영

박민혜

• 회원가입에는 스크롤바가 필요 없는데 아무리 수정해도 스크롤바가 없어지지 않았다. 다시한번 살펴보니, layout이 scss가 아니라 css가 import되어있어 적용이 되지 않던 거였다.
• 마이페이지의 프론트를 만들었는데, 만들 때마다 생각하는 거지만 스타일은 참 어려운 것 같다.

박소현

• 이미지를 AWS S3에 업로드 하고 삭제하는 함수를 만들었다. 배포 담당으로서 이걸 지금까지 잊어버리고 있었다니! 아차 싶다. multer로 업로드 미들웨어 함수를 작성했다. 업로드 전에 sharp 라이브러리로 이미지 파일을 Webp로 압축 및 변환하는 함수를 작성했다. 저장 사이즈나 퀄리티는 인스타그램의 규격을 참조하였다. 기존 파일의 약 60%의 용량으로 압축이 되니, S3 프리티어 용량을 넘어설 걱정은 안해도 되겠다.

이화정

• 게시글 작성을 할 때 태그를 입력하는 기능이 있는데 이 태그를 작성하는 폼을 구현하는 것을 했다. 생각보다 복잡했다. 상세한 것들 하나하나 설정해 줘야 했다. 삭제되는 태그와 추가되는 태그 기존 태그 하나하나 다 고려해야 했고 심지어 태그 글자 수, 태그의 중복 여부 등등 고려할게 너무 많았다. 처음에는 잘 안돼서 좀 화가 났지만 내가 구현할 사항에 대해서 하나하나 적어보고 그것을 순서대로 구현하면서 문제들을 해결했다. 역시 무작정 구현하는 것보다 요구사항 분석이 중요한 것 같다.
• 로컬 이미지를 업로드하는 UI를 만들었는데 생각보다 쉽지 않았다. 이미지가 많아지면 옆으로 드래그하면서 이미지를 스크롤(?) 하는 기능을 구현해야 했는데 처음에는 캐러셀 슬라이드로 해볼까 하다가 드래그 기능에 너무 많은 버그가 발생해서 결국 가로 스크롤을 이용하는 방식 발견해 그 방법을 적용했다. 구글링을 통해 찾은 구현 방법인데 너무 많은 이벤트 발생을 방지하게 위해 throttling를 적용한 것을 보고 나도 똑같이 코드에 적용했다. 기본적인 UI 구현 공부를 좀 열심히 해야겠다.

장세림

• 가끔은 아주 기초적인 실수를 바로잡는 데 오히려 시간이 더 오래 걸리는 것 같다. 지도 중심지 location 데이터 값을 받아와 지도에 마커를 보여주어야 했는데, DB에 테스트로 넣은 값을 넣으려고 하면 브라우저에서 지도가 하얗게 보이는 오류가 있었다. 에러메세지는 없었다. 하드코딩이나 함수 내에서 변수에 담은 값을 넣으면 작동에 문제가 없는데 DB에서 가져오려고 할 때만 문제였다. 포스트맨으로 테스트 했을때도 데이터를 받아오는 부분에는 문제가 없었다. 원인은 아주 허무하게도 DB내 위도와 경도 값이 반대로 적혀있던 것이었다..! 당연히 위도, 경도 순으로 컬럼이 생성되었으리라 생각하고 값을 반대로 작성해 문제가 발생했던 것이다. 코드는 아무런 문제가 없었다... 깨닫고 난 뒤에는 컬럼 순서를 변경해 정상화했다. 이거 하나로 시간을 많이 잡아먹은 게 아쉽다.
• 내 도감에 좋아요 한 순서로 목록이 나열되지 않는게 사용자 경험 측면에서 굉장히 아쉬운 부분으로 느껴졌다. 가장 최근에 좋아요한 도감 순으로 정렬되도록 하기 위해 created_at 컬럼을 추가해주었다.
• 좋아요 기능을 컴포넌트로 분리했다. 도감 목록, 내 도감 목록, 도감 상세 페이지에서 중복해서 사용하는 부분이기 때문에 공용으로 사용할 수 있도록 만들었다.
• 썸네일은 쿼리문으로 필터링을 해서 해당 게시글의 가장 첫 번째 이미지를 사용하기로 했다. 다행히 모든 목록 페이지가 커서 기반 페이지네이션으로 만들어졌기 때문에 postId가 없어도 조회가 가능했다.