2024.03.07 ~ 2024.03.25 Codeit FE Sprint 중급 프로젝트(Party-Time-Job)를 진행했다.
프로젝트를 진행하면서 느꼈던 점과 다짐들을 KPT 형식으로 적어본다.
👍 Keep
1. 프로젝트 로드맵에 맞춰 마감 기한을 엄수했다.
- github issue, 로드맵 기능을 이용해 일정을 관리했다.
- 공통 컴포넌트, 유틸함수 등 다른 팀원이 필요한 작업물을 우선적으로 완료했다.
- 다른 팀원이 도움을 요청한 문제를 함께 해결하여 마감 기한을 맞출 수 있었다.
- presigned URL을 받고 이미지를 S3에 업로드하는 과정에서 어려움을 겪었다.
- 이미지 파일을
e.target.files?.[0] 로 가져오면 된다는 것을 알려주었다.
const imageUrl = presignedUrl.split('?')[0]; '?' 뒤의 쿼리스트링 앞부분을 가져오면 된다는 것을 알려주었다.
2. 맡은 기능을 기한 내에 빠짐없이 구현했다.
- 공고 목록 페이지 제작
- 마감, 지난 공고 표시 기능
- 공고 마감임박순, 시급많은순, 시간적은순, 가나다순 정렬 기능
- 주소, 시작일, 시급 필터링 기능
- 유저 주소 맞춤 추천 공고 기능
- 공고 검색 기능, 최근 본 공고 표시 기능
- 공고 지원/취소 기능
3. 코드 컨벤션과 협업 규칙을 준수했다.
- 내가 작성한 코드를 팀원들이 이해하기 쉽게 JsDoc을 작성했다.
- 팀원의 PR이 올라오면, 최소한 6시간 안에 코드 리뷰를 작성하는 나만의 룰을 지켰다. 원래의 규칙은 24시간 안에 리뷰를 작성하는 것이다.
🤔 Problem
1. 데이터를 fetch 하는 로직과 최적화에 익숙하지 않은 것 같다.
- 공고 목록 페이지의 공고 카드 컴포넌트 각각에 해당 공고가 날짜가 지난 공고인지, 마감된 공고인지 확인하는 로직을 만들었다.
그 결과 공고 목록 페이지에 접속하면 공고 카드의 갯수만큼 API 요청이 날라간다. 서버 컴포넌트 기능이나 react-query를 사용하면 이러한 문제를 해결할 수 있을 것 같다.
2. 확장성 있는 컴포넌트를 만들지 못한 것 같다.
- 공고 상세 페이지와 사장님 공고 상세 페이지에 쓰이는 공고 상세 컴포넌트를 만들었다.
하지만 사장님 공고 상세 페이지에 들어가야 하는 데이터 형식이 따로 있었는데, 그것을 고려하지 못한 채 컴포넌트를 설계했다. 컴포넌트에 쓰이는 유틸함수의 관심사 분리와 prop을 더욱 범용성 있게 받을 수 있도록 설계해야 겠다.
3. 데이터 로딩 상태 처리를 적절하게 하지 못한 것 같다.
- 공고 카드와 공고 상세 데이터를 불러올 때, 그 공고가 지난/마감 공고라면 UI가 깜빡 하면서 재렌더링이 되는 문제가 있었다.
팀원들과의 회의에서 UI가 깜빡 거리는 현상을 보이지 않게 하기 위해 로딩 상태일 때 로딩 스피너를 보여주는 컴포넌트로 해결하기로 했다.
- 하지만 이러한 방식도 문제가 있는 것 같다. UX적인 측면에서 아무 UI도 보이지 않고 로딩 스피너만 보여지는 상황보다, 조금 깜빡 거리고 재렌더링이 되더라도 UI가 보여지는 면이 더 나은 것 같다.
- 이러한 문제를 해결하기 위해, 스켈레톤 UI를 고려하거나, 데이터가 전부 불러와진 후 렌더링 되도록 서버 컴포넌트를 이용하는 방법을 고려해야겠다.
🔥 Try
1. 서버 컴포넌트 기능과 react-query를 적극적으로 사용해야겠다.
- 대부분
'use client' 클라이언트 컴포넌트로 구현했는데, 앞으로는 특히 데이터 fetch 기능에 있어서 서버 컴포넌트와 react-query를 사용해야겠다.
react-query를 사용해서 페이지네이션, 무한 스크롤 기능과 prefetch 기능을 적극적으로 사용할 것이다.
2. 범용성 있는 컴포넌트를 만드는 연습을 해야겠다.
- 특정 도메인에 종속되지 않는 컴포넌트와 함수를 만드는 것이 중요한 것 같다.
간단한 button, input에서 시작해서 여러 군데에서 쓰이는 공통된 컴포넌트를 만들 때 어떤 형식으로 prop을 받을 것인지, 어떤 형태로 return 할 것인지 잘 생각해서 만들어야겠다.
3. 앞으로도 마감 기한을 엄수해서 맡은 역할을 수행할 것이다.
- 제일 중요한 사항이 마감기한을 엄수해서 맡은 역할을 수행하는 것이라고 생각한다.
아무리 좋은 코드를 작성하고 기발한 기능을 구현한다고 해도 마감기한을 지키지 못하면 프로젝트의 성공으로 이어지기 어렵기 때문이다.
- 지금까지 해왔던 것처럼, 어려운 부분이 있으면 팀원들과 함께 커뮤니케이션을 적극적으로 해 문제를 해결하고 마감 기한에 맞춰 프로젝트를 성공적으로 마무리 해야겠다!