시연 화면 Link ↗

• 링크 버튼을 클릭하면 확인할 수 있습니다.

기획의도

• 처방받은 약물 정보와 주변 약국을 빠르게 확인할 수 있도록 바쁜 현대인을 위한 서비스를 기획했다.
• 약물 정보 제공, 약국 정보, 건강 커뮤니티 게시판을 하나의 플랫폼에서 제공하여 사용자가 더욱 편리하게 건강 관리를 할 수 있도록 돕고 싶다.

기술 구현 및 성능 개선

Zustand를 활용한 필터 상태 전역 관리 및 URL 파라미터 동기화

• 새로고침 또는 페이지 전환 시 검색 조건 초기화 문제 발생
  • Zustand를 도입해 검색 조건 상태를 전역 관리, URL 파라미터와 동기화 처리
  • 검색 조건이 유지되어 재검색 시 필터 재설정 불필요 → 검색 효율 및 공유 편의성 향상

TanStack Query의 staleTime 및 캐싱을 활용한 API 호출 최적화

• 동일한 조건으로 반복 검색 시 API 중복 호출, UI 반영 지연 문제 발생
  • staleTime 설정으로 중복 호출 방지, 즐겨찾기/추천 기능에 Optimistic Update 적용
  • 데이터 캐싱 전략을 통해 불필요한 요청 제거, 반응 속도 개선 → UX 향상

useInfiniteQuery 기반 무한 스크롤로 UX 흐름 개선

• 기존 전체 데이터 일괄 요청 구조 → 서버 부하 및 리소스 낭비 발생
  • useInfiniteQuery, IntersectionObserver로 기존 데이터 유지 + 필요한 페이지만 추가 요청
  • Suspense, ErrorBoundary 적용으로 스크롤 중단 없이 로딩/에러 대응 강화

Turborepo를 활용한 클라이언트/서버 통합 관리

• 클라이언트/서버를 각각 관리하면서 스크립트 중복 및 관리 복잡도 증가
  • Turborepo 기반 워크스페이스 및 루트 레벨 스크립트로 통합 관리 및 개발 환경 일원화
  • 단일 저장소에서 프론트엔드/백엔드 동시 개발 가능

Docker + GitHub Actions 기반 GCP 자동 배포 파이프라인 구축

• GitHub Actions를 활용한 자동화된 배포 파이프라인 구축
  • Docker 컨테이너화 및 GCP Cloud Run 자동 배포 설정
  • 환경 변수 자동 주입과 비밀 정보 관리로 보안성 강화

기술적 개선사항 및 향후 계획

모노레포 구조 도입 및 Turborepo 활용

• 문제

  • 프론트엔드와 백엔드를 하나의 레포지토리에서 관리하고 있으나, 공통 코드 재사용 구조가 부족함
  • 모노레포 도입 후에도 실질적 이점 활용 부족 (turbo run dev 등 단순 동시 실행 외에는 이점 미흡)

• 현재 상태

  • apps/* 구조로 클라이언트와 서버를 통합 관리하며, 루트에서 yarn dev 실행 시 병렬 개발 서버가 구동되도록 구성
  • husky와 lint-staged를 도입해 커밋 단계에서 코드 품질 자동 검증이 가능하도록 설정

• 향후 개선

  • packages/* 디렉토리에 공통 패키지를 분리해 유틸 함수, API 클라이언트, 타입 정의 등을 모듈화하고 코드 중복을 줄일 예정
  • turbo run build에 캐시 기능을 적용해 변경된 앱만 선택적으로 빌드되도록 최적화
  • 테스트, 빌드, 배포 과정을 Turborepo와 연동하여 CI 파이프라인을 자동화하고 구조화할 계획

• 결과

  • 단일 레포지토리 내에서의 클라이언트/서버 통합 관리로 유지보수성과 협업 효율 향상
  • 공통 코드 체계 구축을 통해 개발 생산성 개선
  • 대규모 기능 확장 및 팀 작업에서도 일관된 개발 및 배포 프로세스 유지 가능

인증/권한 관리 (NextAuth + JWT + 소셜 로그인)

• 문제

  • 프론트는 세션 기반 인증 흐름을 유지하고, 백엔드는 토큰 기반 인증을 담당하는 구조로 세션/토큰 간 불일치 가능성 존재
  • 자체 로그인과 소셜 로그인(OAuth)의 인증 흐름이 분리되어 있어 유지보수에 어려움
  • 토큰 만료 시 자동 갱신 및 로그아웃 처리 미흡으로 UX 혼선 및 보안 우려 발생

• 현재 상태

  • NextAuth.js를 기반으로 Google OAuth 및 자체 로그인 구현
  • Express 서버에서 access/refresh 토큰을 발급하고 검증하는 구조
  • JWT 기반 인증 플로우를 구성하고, 토큰은 클라이언트 쿠키에 저장해 세션 상태 유지

• 향후 개선

  • Axios 인터셉터를 적용하여 access 토큰 자동 갱신 로직 구현
  • 토큰 만료 시 자동 로그아웃 및 사용자 알림 UX 적용
  • 자체 로그인과 소셜 로그인 인증 흐름을 통합해 인증 처리 일관성 강화

• 결과

  • 인증 흐름 전반을 통합함으로써 사용자 경험과 보안성 동시 향상
  • 인증 방식 간 로직 통일로 유지보수성 개선

시연 화면 Link ↗

• 링크 버튼을 클릭하면 확인할 수 있습니다.

기획의도

• 개발 강의를 찾을 때 인프런처럼 체계적으로 정리된 웹사이트가 있었으면 좋겠다.
• 유튜브에는 좋은 개발 강의가 많지만 찾기가 번거롭고 관리하기 어렵다. 한곳에 모아 쉽게 시청할 수 있도록 하고 싶다.
• 강의를 보면서 바로바로 메모할 수 있는 기능이 필요하다.
• 학습 중 모르는 개념이 나오면 GPT 선생님과 즉시 소통하며 질문하고 해결할 수 있으면 좋겠다.

기술 구현 및 성능 개선

YouTube Player API 연동 메모 기능 구현

• 영상 학습 중 특정 구간 메모 기능 부재로 학습 효율 저하
  • YT.Player 상태 감지를 통해 일시정지 시 타임스탬프 자동 기록, 저장된 시간 클릭 시 seekToTime으로 해당 지점 이동
  • 메모-영상 연동으로 학습 몰입도 및 편의성 향상

Intersection Observer 기반 무한 스크롤 구현

• 대량의 YouTube 비디오 데이터를 한 번에 로딩할 경우 성능 저하 및 UX 단절 발생
  • IntersectionObserver와 페이지네이션을 활용해 필요한 페이지만 점진적으로 로딩
  • 초기 로딩 속도 개선 및 부드러운 스크롤 흐름 유지로 사용자 경험 향상

기술적 개선사항 및 향후 계획

전체 강사 YouTube 영상 조회 시 API 호출 최적화

• 문제

  • 전체 강사의 최신 영상을 불러올 때, 모든 강사 채널에 대해 동시에 API를 호출하면서 YouTube API 호출량이 급격히 증가함
  • 강사 수가 늘어날수록 로딩 지연 및 Google API 할당량 초과 위험이 커지며, 실시간 서비스 장애로 이어질 가능성 존재
  • 페이지를 새로고침하거나 재방문할 때 동일한 요청이 반복되어 리소스 낭비가 발생함

• 현재 상태

  • 모든 강사의 채널 ID를 순회하며, 업로드 리스트 ID와 영상 데이터를 병렬로 요청
  • TanStack Query를 사용해 데이터 조회를 관리하지만, 전체 데이터를 한 번에 불러오는 구조로 인해 캐싱이 충분히 활용되지 않음
  • 영상 수집 이후, 결과를 병합해 최신순으로 정렬 후 렌더링

• 향후 개선

  • 점진적 로딩 구조 도입
    • 첫 진입 시 일부 강사 데이터만 우선 로딩하고, 사용자 스크롤 또는 인터랙션에 따라 순차적으로 추가 요청
    • useInfiniteQuery 또는 페이지네이션 구조를 통해 점진적 비동기 호출 방식 적용

• 결과

  • API 요청량을 효과적으로 제어하여 YouTube API 할당량 초과 리스크를 완화
  • 초기 로딩 속도 개선으로 사용자 경험 향상
  • 강사 수 증가에 유연하게 대응할 수 있는 구조 확보로 확장성 강화