1. 시작하게 된 이유

• 한 차례 부트캠프 수료 후, 혼자 취업 준비 도중 React, Next.js를 더 잘 활용하고 싶다는 바램
• 나만의 커리큘럼으로 공부하다 좀더 체계적인 커리큘럼 따라 공부하고 싶다는 바램
• 포트폴리오의 프로젝트들 보다 완성도 있는 프로젝트 만들고 싶다는 바램
• 코딩테스트 실력 향상하고 싶은 바램
• 이전 부트캠프 동기의 추천

2. 프로젝트 진행 중 마주친 문제, 극복 사례

🛠️ react-hook-form에서 날짜 및 시간 검증

문제 상황

• Controller를 사용하여 availableDateTimeList(예약 가능한 시간 목록)를 관리하고 있음.
• 각 항목에는 date, startTime, endTime이 포함됨.
• 유효성 검사를 통해 날짜와 시간을 검증하고, 중복된 시간대가 있는지도 체크해야 함.
• 하지만, validate에서 여러 개의 에러 메시지를 배열로 반환하려고 했으나, react-hook-form은 string | boolean 타입만 허용하여 타입 불일치 오류 발생.

해결 방법

• 여러 개의 에러 메시지를 JSON 문자열(JSON.stringify(errors))로 변환하여 반환.
• render 함수 내에서 JSON.parse(error.message)를 사용해 문자열을 다시 배열로 변환하여 UI에서 처리.

3. 세 번의 협업 프로젝트 중, 하이라이트 프로젝트!

🔗Wine 프로젝트

하이라이트 프로젝트로 꼽은 이유:
1) 다른 2개의 프로젝트 대비 프로젝트에만 집중할 수 있는 시간이 길었음.
2) 제가 구현한 파트의 높은 완성도
3) 프로젝트 시 팀원들의 높은 참여도

☀️ 프로젝트 개요
◾ 기간: 16일 (발표일 포함)
◾ 팀 구성: 프론트엔드 4명
◾ 프로젝트 개요: Next.js 14 Page Router를 사용하여 리뷰 작성, 다양한 필터를 적용해서 와인을 골라서 볼 수 있는 와인 리뷰 플랫폼 프로젝트
◾ GitHub 저장소: Wine프로젝트 저장소 바로가기

🎨 사용된 기술
◾ 언어 및 라이브러리: TypeScript, React, styled-components, react-responsive
◾ 프레임워크: Next.js 14 (Page Router)
◾ 빌드 및 배포: GitHub Actions, Vercel

💐 구현한 기능
◾ 와인 목록 페이지: 키워드 검색 및 필터 선택 결합으로 UX 개선, 무한 스크롤 구현으로 페이지 로딩 속도 향상
◾ 반응형 UI: 3개의 분기점에서 와인 필터링 기능 상태 유지로 다양한 디바이스에서 일관된 UX 제공
◾ GlobalStyles 셋팅: 전역 스타일 관리로 스타일 일관성 유지 및 코드 중복 제거

🛠️ 문제 및 극복 사례
◾ 기기 간 필터 상태 불일치 해결: 필터 상태를 상위 컴포넌트에서 관리하여 기기 간 일관성 유지, 모달 필터에서 PC 선택 값 자동 복사 기능 추가
◾ 성과: 기기 간 필터 상태 불일치 문제 해결, 사용자 테스트에서 긍정적인 피드백 획득

4. 배운 점과 앞으로의 목표

• 혼자만 잘하면 되겠지, 생각했었는데 협업 프로젝트를 하면서 팀원들이 각자 파트를 열심히 맡아주어서 저 또한 다른 프로젝트 대비 높은 완성도를 만들 수 있었다고 생각합니다.
• 장기적인 개발자로서의 목표: 저 또한 앞으로의 협업 프로젝트에서 저의 역할에 최선의 최선을 다해 프로젝트의 퀄리티를 높이는데 기여하는 팀원이 되고 싶습니다.
• 단기적인 TODO:
  1) 찾은 버그 해결하기 및 테스트 코드 추가하기❗
  2) 마지막 프로젝트에서 다른 팀원이 미완성한 부분 구현하기❗