미리보기

한 줄 소개: 학습한 지식 및 프로젝트를 기록하고 공유하기 위한 기술 블로그

기술 스택: TypeScript, TailwindCSS, Astro, Vercel

깃허브: https://github.com/woongsnote/woongsnote-dev

서비스: https://woongsnote.dev

프로젝트 구현

• TailwindCSS를 사용해서, 반응형 UI 및 다크 모드
• Metadata를 추가하여 구글 SEO 적용
• 성능, 접근성 등의 개선을 통해 LightHouse 점수 100점 달성

트러블 슈팅

• OG Image 생성 in Next.js

  • 문제: 게시글의 섬네일 이미지 400 Error 발생
  • 원인: config 파일에 섬네일 이미지 주소 누락
  • 해결: next.config.js에 누락된 이미지 주소 추가

• remark-GFM inTable issue

  • 문제: remark-gfm 4 사용 시 inTable issue로 빌드 실패
  • 원인: remark-gfm 4버전과 Contentlayer의 호환성
  • 해결: remark-gfm을 3버전으로 다운그레이드

• package dependency 충돌

  • 문제: Next.js와 Contentlayer 간의 의존성 충돌
  • 원인: Contentlayer의 의존성 문제
  • 해결: Astro로 프레임워크 migration 진행

• 다크 모드 구현

  • 문제: Astro로 migration할 때, next-themes 사용 불가
  • 원인: Next.js 프레임워크를 위한 패키지
  • 해결: 라이브러리를 추가하지 않고 직접 구현

• 프로젝트 배포 오류

  • 문제: 프레임워크 변경 후, Vercel 배포 실패
  • 원인: 기존 Next.js로 배포했을 때 캐싱된 데이터 존재
  • 해결: Vercel에 저장된 캐시를 제거하고 재배포

한 줄 소개: 영화 정보를 확인하고, 영화와 영화관 후기를 남길 수 있는 커뮤니티

팀 구성: 프론트엔드 4명, 백엔드 3명 / 프론트엔드 개발 및 프로젝트 리더

기술 스택: React, TailwindCSS, JavaScript, React-Query, Axios

깃허브: https://github.com/woongsnote/movie-critic-fe

프로젝트 구현

• 페이지를 새로 고침 하지 않고 주소가 변경될 수 있게 BrowserRouter 사용
• CSS 스타일 통일 및 반응형 스타일 구현을 위해 TailwindCSS 사용
• axios와 React-Query를 사용해서 서버 데이터 전달
• 로그인한 사용자에 대한 인증을 위해 JWT를 사용
• 사용자의 활동 정보를 한 곳에서 확인할 수 있는 마이 페이지 구현
• Figma를 활용해서 와이어 프레임 작성
• 백엔드 개발자들과 함께 API 명세서 작성

프로젝트 개선
50건의 사용자 피드백을 바탕으로 프로젝트 개선

• 전체 사용자 중 배지를 획득한 사용자 비율 표시
  → 다른 사용자들의 배지 획득률 정보 확인
• 배지 Modal에 챌린지의 진행 상황 Count 추가
  → 챌린지 달성 독려
• 커뮤니티에 검색 기능 추가
  → 검색한 영화에 관한 다른 사용자의 의견 확인
• 게시글에 댓글 및 대댓글 기능 추가
  → 사용자 간 커뮤니케이션 유도