미리보기

데모 링크 | 깃허브
프론트엔드 3명, 백엔드 4명으로 구성
주간 활성 사용자 수(WAU) 2000 달성
사용기술: React, Typescript, Next.js, Tanstack-Query, Zustand, Storybook, Styled-components, MSW, Webpack, Cypress

SPA 환경에서 오픈그래프 정보 노출 기능

• 문제: 링크 공유 시 오픈그래프 정보 부재
• 해결: Next.js 도입으로 부분적 서버 사이드 렌더링 적용
• 결과: 사용자 경험 향상 및 SEO 효과 향상
• 저장소 링크: https://github.com/shackstack/next-celuveat/tree/celuveat

AWS accessKey 없는 환경에서 EC2 활용한 S3 자동배포

• 문제: 비효율적인 수동 배포 프로세스
• 해결: EC2 인스턴스를 이용한 자동 배포 파이프라인 구축
• 결과: 배포 과정 단순화 및 안정성, 생산성 향상
• 소스코드 링크: https://github.com/woowacourse-teams/2023-celuveat/pull/656

웹 성능 최적화

• 초기로딩속도 개선: Minify, Tree shaking, Code splitting 등의 웹팩 최적화 (Lighthouse Performance 72점 → 89점)
• 로딩속도 개선: S3, CloudFront CDN 구축, webp 이미지 변환 및 gzip 압축 (LCP 14.2s → 2.4s)
• Layout shift 개선: Suspense와 Skeleton UI 활용, Font preload

E2E 테스트를 통한 QA 비용 절감 및 안정성 개선

• 도구: Cypress
• 결과: QA 비용 50% 절감, 서비스 안정성 향상
• 접근 방법: data-set과 aria-label 활용, 자동화를 통한 merge 안정성 확보

사용자 경험 개선

• 기능: 재검증 시 캐싱된 데이터 제공, 마우스 호버시 지도상 음식점 마커 강조

기술 도입

• MSW: Mock 서버 구축, 개발 서버 의존성 분리
• Zustand, Tanstack Query: 상태 관리 최적화, 코드 줄 30% 축소
• StoryBook: UI 테스트 및 문서화, 스토리북 링크

데모 링크 | 깃허브
개발자로서의 여정들을 확인할 수 있는 페이지
사용기술: React, Typescript, Next.js, Tailwild CSS

글라인드 169의 모든 문제를 해결하는 것을 목표로 주 3문제씩 풀고 있습니다.

• github repository에 풀이 저장
• 매주 일요일 마다 Google MeetIng을 통해 풀이 공유