RYUNGFOLIO
WAVED
개발 직군 취업 준비생을 대상으로 한 취업 챌린지 서비스 [웨이브드]
프로젝트 정보
- 기한
- 2024/02/29 - 2024/05/15
- 규모 / 인원
- 팀 프로젝트 (UI/UX 2명, Front-End 3명, Back-End 2명)
- 역할
- Front-End
- 사용 기술
Next.js
TypeScript
Recoil
tanstack query
Axios
Emotion
기술 선정 이유
- 트렌디한 기술 습득을 위하여 Next.js를 채택했습니다. 또한 SSR를 적극 이용함으로써 검색 엔진 최적화에 유리한 애플리케이션 설계를 목표로 했습니다.
- 안정성을 위해 최신 방식인 App Router를 대신하여 Page Router 버전을 사용했습니다.
- 데이터 패칭 과정 간소화 및 데이터 캐싱을 통한 성능 향상을 위해 tanstack query(react-query)를 채택했습니다.
- Next.js와 높은 호환성을 갖는 컴포넌트 기반 스타일링 도구인 Emotion을 사용했습니다.
주요 기능 및 개인 기여
- 📍 홈 페이지 정보 조회
- 검색 엔진 최적화와 사용자에게 빠른 초기 로딩 상태를 보여주기 위해 페이지 렌더링 방식으로 SSR을 채택
- server에서 모집 중인 챌린지 api를 호출한 뒤 화면 렌더링 쿠키에 저장된 token 유무를 비교. 로그인 유저와 비 로그인 유저를 구분하여 화면 렌더링
- slick.js 라이브러리를 활용한 상단 슬라이더 구현
- 📍 챌린지 상세 정보 조회 및 신청
- 검색 엔진 최적화에 가장 큰 목적을 두면서 렌더링 방식으로 SSR 채택. 그에 맞는 메타 데이터 설정
- 각 챌린지의 id를 이용한 다이나믹 라우팅 적용. 존재하지 않는 id로 접근 시도 시 404 페이지를 노출하며 진입 방어
- 후기 데이터 호출에 두 가지 방식을 적용. 화면에 기본으로 보여질 최신 데이터는 server로부터 가져와 호출하고 더보기 동작은 react-query의 useInfinityQuery를 이용해 client에서 api를 추가 호출하도록 구현
- MouseEvent를 활용하여 드래그 가능한 가로 스크롤 컴포넌트 구현. 성능 저하 없는 이벤트 처리를 위해 throttle과 useMemo를 통한 최적화 적용. 애니메이션 라이브러리를 사용하는 경우와 비교 분석 진행
- 포트원을 이용한 결제 시스템 연동. PC와 mobile 환경을 구분하지 않고 연동된 채널로 결제 내역을 전송 및 server로부터 성공 응답을 받는 신청 프로세스 정립
- 📍 챌린지 종료 후 리뷰 작성 및 작성한 리뷰 관리
- IntersectionOberserver API를 이용한 무한 스크롤 컴포넌트 구현. 최초 0페이지에 해당되는 api를 불러온 뒤 하단에 도달할 때 마다 다음 페이지의 api를 추가 호출
- react-query의 useQuery를 이용한 캐싱 전략 도입. 사용자가 재방문 할 때 다시 호출하지 않도록 제어
- 📍 PWA 적용
- 네이티브 앱과 같은 사용 경험을 주기 위한 next-pwa 라이브러리 도입 및 manifest.json 설계
- ios와 android 각 운영체제에 맞춘 앱 아이콘 및 스플래시 스크린 수동 지정
- 📍 UI/UX 개선
- 원활한 프론트엔드 개발 환경 조성을 위하여 공통 컴포넌트 지정 및 모듈화 우선 작업 진행
- iOS의 100vh 버그 및 브라우저 주소창으로 인한 밀림 현상 등을 고려하여 전체적인 레이아웃 스타일링 및 리팩토링 진행
- 각 페이지에 맞는 title와 description를 작성하기 위한 설계 및 보완. open graph 설정 등으로 인한 서비스 검색 엔진 최적화