[WorkRoot] 프로젝트 회고

워크루트 | 구인구직 플랫폼

 

1. 프로젝트 개요

한 달을 빠듯하게 보낸 2024년의 마지막 ✨ 드디어 심화 프로젝트를 마무리하게 되었다. 회고는 프로젝트가 끝나고 2주 후에 작성 중..

심화프로젝트를 하며 구현했던 것들과 어떤 어려움이 있었는지, 배운 것들은 무엇인지에 대해 회고글을 작성해보려 한다.

- 프로젝트명: WorkRoot (워크루트)
- 개발 기간: 2024.11.22 ~ 2024.12.30
- 팀 구성: 프론트엔드 4명
- GitHub 팀 레포지토리 링크

GitHub - FE9-2/workroot: FE9-2팀) 🌳 "일"을 통해 자신의 뿌리를 내리며 "성장"하는 구인구직 사이트

 

2. 기술스택 선정 이유와 고민

• Next.js App Router
  • Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 손쉽게 구현할 수 있다. Workroot 프로젝트는 빠른 페이지 로딩 속도와 SEO(검색 엔진 최적화)가 중요한 만큼 Next.js를 선택하여 퍼포먼스와 SEO를 모두 충족할 수 있도록 했다. 또한, 내장된 라우팅 시스템과 API 라우트를 활용해 개발 효율성을 극대화할 수 있었다.

• TypeScript
  • TypeScript는 JavaScript의 정적 타입 시스템을 제공하여 코드의 안정성과 가독성을 향상시키는 역할을 한다. 프로젝트 규모가 커지면서 예상치 못한 런타임 오류를 줄이고, 유지보수성을 높이기 위해 TypeScript를 사용했다. 특히, 협업 시 타입 정의를 통해 팀원들 간 의사소통 비용을 줄이는 데 효과적이었다.

• ReactQuery
  • React Query는 서버 상태 관리를 간편하게 처리할 수 있는 라이브러리로, 데이터 페칭과 캐싱, 리페칭 등을 효율적으로 관리할 수 있다. Workroot 프로젝트에서는 복잡한 데이터 흐름과 API 요청이 많았기 때문에 React Query를 사용하여 비동기 상태 관리를 단순화하고, 사용자 경험을 개선할 수 있었다.

• React Hook Form
  • React Hook Form은 폼 관리를 간편하게 만들어주는 라이브러리다. 최소한의 리렌더링과 간결한 API 덕분에 퍼포먼스를 유지하면서도 복잡한 폼 로직을 쉽게 구현할 수 있었다. 사용자 입력 검증과 오류 처리 로직을 간단하게 관리할 수 있는 점도 큰 장점으로 작용했다.

• Tailwind CSS
  • Tailwind CSS는 유틸리티 클래스 기반의 CSS 프레임워크로, 디자인 시스템을 빠르고 일관성 있게 구축할 수 있다. CSS-in-JS 방식보다 가벼운 스타일링이 가능하며, 커스터마이징이 유연해서 Workroot의 브랜드 아이덴티티에 맞는 UI/UX를 쉽게 구현할 수 있었다.

• Supabase
  • Supabase는 Firebase의 오픈소스 대안으로, 데이터베이스 관리와 인증 기능을 간편하게 제공하는 Backend-as-a-Service 플랫폼이다. PostgreSQL 기반으로 높은 확장성과 신뢰성을 제공하며, 프로젝트의 초기 개발 비용과 시간을 줄이는 데 효과적이었다. 특히, 실시간 데이터 동기화와 간단한 인증 기능 구현에 유용했다.

•  Framer Motion
  • Framer Motion은 React 기반 애니메이션 라이브러리로, 간단하면서도 세련된 애니메이션 효과를 제공한다. 사용자 경험을 향상시키기 위해 페이지 전환, 드롭다운, 버튼 인터랙션 등 다양한 UI 요소에 애니메이션을 추가했다. 부드럽고 직관적인 사용자 경험을 만들기 위해 선택했다. 

 

🤔 App Router + React Query 조합을 선택한 이유

1. 팀의 기술 역량과 안정성 고려

Workroot 프로젝트는 팀원들이 익숙한 기술 스택을 활용해 빠르고 안정적으로 개발하는 것이 중요했다. App Router의 서버 컴포넌트(Server Components)는 Next.js 13부터 도입된 최신 기능으로 강력한 기능을 제공하지만, 동적 경로와 실시간 데이터 처리, 상태 관리 등의 복잡성을 고려해야 했다.

이 내용이 기존 방식과 비교해 개념과 사용법에 대한 학습 러닝 커브가 존재할 거라 판단했고 한정된 개발 기간 내에서 개발 시간 증가로 이어질 거라 판단했다.

이에 반해 React Query는 팀이 이미 숙련되어 있는 기술로, 안정적으로 사용할 수 있었고, 복잡한 학습 과정을 생략하였다.

2. React Query의 검증된 상태 관리

React Query는 서버 상태를 관리하고 데이터 캐싱, 리페칭, 비동기 처리를 간단하게 구현할 수 있어, 프로젝트 요구사항에 적합했다. App Router의 서버 컴포넌트를 활용할 경우, 클라이언트와 서버 상태 관리의 경계가 혼란스러울 수 있었지만, React Query는 이를 명확히 분리해 준다.

 

아쉬운 점

서버컴포넌트 사용 러닝커브 때문에 App Router + React Query 조합을 선택한 것.

Next.js를 사용하는 중에 팀 내 서버컴포넌트의 학습 경험 부족으로 인해 서버 컴포넌트의 활용 방법을 익히기 위해서 학습하고 공유하는 시간을 가졌다.

다음 프로젝트 기회가 생기면 서버 컴포넌트를 적극 도입하고, 지속적인 공부를 통해 러닝 커브 문제를 해결하고자 노력할 것이다.

잘한 점

1. CI/CD 도입

 

이전에는 사용해보지 못한 github action CI/CD, storybook 경험을 해볼 수 있었다.

GitHub Actions로 CI/CD 파이프라인을 구축한 결과, 코드 병합 후 배포 속도가 빨라지고, 배포 안정성이 크게 향상되었다.

 

2. Storybook 활용

컴포넌트 개발할 때 /test/1 같은 페이지를 따로 만들어 컴포넌트를 개발하는 불편함이 있었다. storybook을 사용한 후에는 독립적으로 컴포넌트를 개발할 수 있어서 매우 편리했다.

 

3. React Query의 장점 활용

React Query를 통해 데이터 캐싱과 상태 관리를 간소화함으로써 API 호출 성능을 최적화하고 사용자 경험을 개선할 수 있었다.

📎 효율적인 상태 관리와 캐싱

• React Query를 활용하여 서버 상태를 효율적으로 관리
• 로그인 후 useLogin 훅을 통해 사용자 데이터를 캐시에 저장하고, 이후 페이지에서 동일 데이터를 불필요한 요청 없이 활용함
• queryClient.invalidateQueries와 queryClient.setQueryData를 적절히 활용해 API 데이터 변경 시 캐시를 무효화(관련 데이터를 최신 상태로 유지)하거나, 캐시를 직접 업데이트하는 방식으로 성능을 최적화

📎 에러 처리와 사용자 피드백

• Axios 에러를 onError에서 처리하여 적절한 토스트 메세지를 표시해 사용자에게 명확한 에러 메시지를 전달하여 사용자 경험 개선

📎 무한 스크롤 구현

• useInfiniteQuery를 활용해 게시글 목록에 무한 스크롤 기능을 구현
• getNextPageParam을 사용해 다음 페이지의 커서를 관리하고, 사용자가 스크롤할 때마다 데이터를 동적으로 로드하여 성능을 최적화

📎 캐시 설정을 통한 성능 최적화

• staleTime과 gcTime 설정으로 서버 요청을 최소화하고, 불필요한 데이터 재로딩 방지
• 게시글 목록처럼 자주 조회되는 데이터에 대해 5분의 유효 시간을 설정해 UX를 향상

📎 OAuth 및 인증 훅의 확장성

 

• 로그인 및 OAuth 훅을 작성하여 인증 관련 로직을 일관성 있게 관리
• 인증 성공 후 홈 화면으로 리디렉션하거나, 캐시 데이터를 업데이트하여 사용자가 즉시 로그인이 완료되었음을 확인할 수 있도록 구현

 

4. Sitemap으로 검색엔진 최적화(SEO) 100% 달성

구글 검색 1등 !!

 

Next.js의 next-sitemap 라이브러리를 활용해 동적 경로와 정적 경로를 포함한 Sitemap을 자동으로 생성하였고, 이를 통해 검색엔진 크롤러가 사이트 구조를 정확히 인식하도록 최적화했다.

초기에는 일부 동적 페이지가 검색엔진에 노출되지 않는 문제가 있었지만 Sitemap 생성 이후 모든 페이지가 효율적으로 색인되었다.

robots.txt에 Sitemap 경로를 명시하고 중요도가 낮은 페이지는 크롤러가 접근하지 않도록 설정해, 검색엔진 크롤링 리소스를 최적화했다.

사용자 21명 증가

Sitemap 적용 후 Google Search Console에서 모든 페이지가 색인되었고, 프로젝트 배포 이후 사이트 트래픽이 증가하는 성과를 이루었다 🎉