미리보기

FeedB 프로젝트에 프론트엔드 개발자로 참여하여, 프로젝트를 다른 사람들과 공유하고 별점과 
댓글로 피드백을 받을 수 있는 서비스를 개발했습니다.

[서비스 링크] : https://feedb.vercel.app/

[깃허브 링크]: https://github.com/Feed-B/frontend

팀 프로젝트 코드 퀄리티 보장을 위한 CI CD 파이프라인 개발

이전 프로젝트에서 동료가 커밋한 이후로 빌드가 안되거나, 버그가 생겨 해결하는데 큰 어려움이 있었습니다.
개발 품질과 안정성을 위해 팀 규칙으로 코드 푸시 전에 프로젝트를 빌드하여 오류 여부를 확인하기로 했습니다.
Husky 라이브러리를 사용해 Git 훅으로 커밋 전에 Prettier와 ESLint를 실행해 코드 스타일을 자동으로 정리하고,
푸시 전에 프로젝트 빌드를 실행해 오류를 점검하여 잠재적 문제를 줄였습니다.

사용자에게 빠르고 문제없는 서비스를 제공하기 위한 성능 개선

이번 프로젝트에서 주로 랜딩, 메인, 피드백 상세 페이지 개발을 담당했습니다.
랜딩과 메인 페이지는 이미지가 크고 많이 사용되다 보니 LCP 지표가 느리게 측정되는 문제가 발생했습니다.
React Query를 활용해 데이터를 미리 프리페칭하고, 화면이 렌더링될 때 즉시 보여줄 수 있도록 로직을 개선했습니다. 
또한, Next.js의 Image 태그를 사용해 화면에 보이지 않는 이미지는 lazy loading을 적용하여, 사용자에게 더 빠르게 
화면이 제공되도록 최적화했습니다.
그 결과, 랜딩 페이지의 LCP 지표는 1.9초에서 0.8초로, 메인 페이지는 2.9초에서 0.7초로 크게 개선되었습니다. 
이를 통해 사용자 경험을 크게 향상시킨 성과를 얻었습니다.

서버에서 데이터를 불러와 화면에 표시하는 과정에서 이전 데이터가 잠시 보였다가 사라지는 문제가 발생했습니다.
개선 과정에서 React Query와 Next.js의 캐싱 관리 포인트가 다르다는 것을 알게 되었습니다. 
Next.js에서는 주로 revalidatePath, revalidateTag를 사용해 서버 측에서 캐싱해둔 데이터를 업데이트하고, 
React Query를 이용해 사이드 이펙트 처리 후 메모리에 캐싱된 데이터는 invalidateQuerie를 사용해 최신 데이터로 
업데이트하도록 로직을 개선했습니다.

SEO를 위한 엔지니어링

사용자 유입을 위하여 SEO를 신경쓰면서 프로젝트를 진행했습니다.
1. 시멘틱 태그와 Heading Tags 적절히 사용하여 HTML 구조 최적화
2. Twinword를 이용하여 프로젝트와 관련되고, 검색량을 올리수 있는 키워드 선별
3. 서비스 성능을 최적화하여 서비스 속도를 개선하고, 이를 통해 SEO 점수를 향상시키려 노력함
4. 선별된 키워드를 사용해 Metadata 작성
5. 사용자가 올린 다양한 프로젝트가 검색엔진에 노출될 수 있도록 Next에서 제공해주는 
generate6. Metadata 함수를 이용하여 프로젝트마다 다른 Metadata 작성
7. XML 사이트맵을 생성하여 검색 엔진이 사이트 구조를 쉽게 이해할 수 있도록 함
8. Google에서 제공하는 Search console, Analytics를 이용하여 서비스 모니터링

투명한 작업 관리와 이슈 해결 프로세스

협업을 통해 발생할 수 있는 코드 품질과 오류를 해결하기 위해 지속적으로 노력했습니다. 
개발 중 발생한 각종 이슈와 해결 방법을 정리하여 팀원들과 공유하였고, 
각 회의에서 논의된 사항과 결정 사항을 체계적으로 기록했습니다. 
이를 통해 업무 진행 상황을 업데이트하여 투명하고 효율적인 협업을 이어갈 수 있었습니다.

프로젝트의 효율성을 높이고 협업을 원활하게 하기 위해, 우리는 GitHub 이슈와 풀리퀘스트 메시지에 
대한 컨벤션을 정하여 작업을 진행했습니다. 
이를 통해 각자가 어떤 작업을 진행 중인지, 그리고 완료했는지 명확하게 파악할 수 있었습니다.

또한, 코드 리뷰를 통해 서로의 작업을 검토하며 개선점을 제안하는 문화를 조성했습니다. 
이를 통해 HTTP 메서드 모듈, QueryFactory 모듈, 다양한 커스텀 훅 등 공용 모듈을 최적화했습니다. 
이러한 최적화 작업은 코드의 유지보수성을 높였고, 새로운 기능 추가 시 발생할 수 있는 잠재적인 
문제를 사전에 방지하는 데 큰 도움이 되었습니다.