미리보기

다인리뷰는 인플루언서와 사업주의 상생 체험단 리뷰 플랫폼으로, SNS 사용자가 다양한 콘텐츠(제품, 맛집, 여행 등)를 체험할 수 있도록 하고, 리뷰가 필요한 사업주나 대행사가 간편하게 체험단을 모집할 수 있는 반응형 웹 서비스입니다.

기술 스택

• Frontend: Next.js(App Router), TypeScript, Zustand, TailwindCSS, React Hook Form, Swiper

• Backend: Spring Boot, AWS EC2, AWS S3, MySQL, Docker

어떻게 서비스를 만들었나요?

1주일에 한 번씩 전체 회의를 통해 협업하며 진행되었으며, 개발단 전체의 계획 및 일정 공유를 위해 프론트엔드에서 주도적으로 매일 오전 짧은 스크럼을 도입해 소통을 강화했습니다. 팀 구성은 PM 2명, UXUI 4명, FE 3명, BE 4명으로 이뤄졌습니다.

• 디자인 시스템의 정보를 Tailwind에 미리 정의하여 개발에 사용했습니다

• 개발 중 발생한 이슈와 문제 해결 과정을 문서화하여 노션을 통해 팀과 공유했습니다.

역할

• 홈페이지, 체험단 상세 페이지, 검색 페이지, 커뮤니티 페이지 개발 및 반응형 레이아웃 구현

• 피그마 디자인 기반으로 웹과 모바일 반응형 UI 구현

• 공통 컴포넌트(헤더, 모달, 상품 카드) 개발

• 기획자, 디자이너, 백엔드 팀원들과 협업하여 개발 프로세스 진행

• 프론트 주도적 스크럼으로 백엔드 팀과 소통 강화

주요 기능

• 검색 모달창 및 다양한 필터를 적용한 쿼리 파라미터 기반 검색 페이지 SSR 구현

• Next.js 서버 컴포넌트를 활용한 SSR 구현 및 SEO 최적화 (홈, 상세, 검색 페이지 SSR 개발)

• 상세 페이지의 캘린더 기능을 date-fns를 활용해 디자인대로 구현

• 로그인 유저의 토큰을 쿠키에 저장하고, 인증/인가가 필요한 API 요청 시 해당 토큰을 사용하여 보안 처리

기술 스택 선정 이유

Next.js

• SSR을 활용한 검색엔진 최적화가 필요한 체험단 플랫폼이므로 Next.js를 선택했습니다.

Tailwind CSS

• Next.js와의 높은 호환성 및 프로젝트를 기획한 기업의 요구사항에 부합하는 빠르고 일관된 스타일 관리를 위해 사용했습니다.

TypeScript

• 정적 타입을 통해 코드의 안정성을 높이고, 개발 중 발생할 수 있는 오류를 미리 방지하기 위해 선택했습니다.

Zustand

• 전역 상태 관리가 복잡하지 않아서, 간단한 로그인 유저 정보 관리 등 필요한 상태만 저장하기 위해 선택했습니다.

React Hook Form

• 폼 검증을 쉽게 처리할 수 있고 여러 상태를 만들지 않아 복잡성을 줄여줍니다. 또한, watch, setValue 등 유용한 메서드를 제공하여 폼 핸들링을 최적화할 수 있습니다.

Kakao Map API

• 지도를 보여주는 설정이 간단하며, 위도와 경도를 이용해 사용자가 클릭 시 해당 위치로 연결되는 지도 기능을 제공할 수 있어서 선택했습니다.

Swiper

• 모바일에서 부드럽고 직관적인 슬라이드 기능을 제공하기 위해 사용했습니다.

배포 환경

프론트 vercel, 백엔드 Spring Boot, AWS EC2, AWS S3, MySQL, Docker를 이용했습니다.

맛집 공유와 게시물 등록 및 알림 기능을 제공하는 모바일 UI 중심의 웹 애플리케이션입니다.

기술 스택

• Frontend: Next.js(App Router), TypeScript, Zustand, TailwindCSS, React Hook Form, react-virtuoso

• Backend: Firebase

주요 기능

• 게시물 조회를 위한 가상화 리스트 적용 (react-virtuoso 사용)

• 장소 검색 기능에 디바운스 적용으로 네트워크 요청 최적화 (15회 → 6회)

• 카카오 지도 API를 통한 위치 검색 및 설정 기능 구현

• Firebase Realtime DB를 이용한 알림 기능 및 에러 로깅 처리

• React Hook Form을 사용한 폼 상태 관리 및 유효성 검사

• 유저 플로우의 깊이가 있는 업로드 페이지에 E2E(cypress) 테스트 적용

• GitHub Actions를 활용한 CI/CD 파이프라인 구축 (PR 시 GPT 리뷰 코멘트, E2E 테스트 자동화)

성능 개선

• 게시물 리스트에 windowing 및 Next.js Image 태그 적용으로 DOMContentLoaded 시간 72% 감소

• 이미지 리소스 크기 감소 (19MB → 12MB) 및 렌더링 시간 49% 감소

• 검색 API 디바운스 적용으로 네트워크 요청 횟수 감소 (15회 → 6회)

카페 메뉴를 기준으로 판매, 주문 및 결제 기능을 제공하는 커머스 프로젝트로, 주차별로 기능을 구현하고 기록하며 개발하였습니다.

기술 스택

• Frontend: Vite, React, Tanstack Query, Context API, React Hook Form

• Backend: Firebase

주요 기능

• 사용자 인증(로그인/회원가입) 및 상품 CRUD 기능 구현

• 결제 프로세스 정의 및 결제 SDK 연동

• 무한 스크롤 및 추천 상품 리스트 개발

• GitHub Actions를 통한 CI/CD 구축 (Lint, Build, Vercel 배포)

성능 개선

• WebP 이미지 변환 (이미지 파일 크기 1MB → 626KB

• Subset 폰트 적용, font-display 설정, preload 적용으로 폰트 최적화

• 지연 로딩 및 코드 스플리팅을 통한 번들 최적화 (렌더링 시간 17.5ms → 3.6ms)

• SEO 최적화 (라이트하우스 점수: 접근성 85 → 91, SEO 73 → 91