RYUNGFOLIO

주요 기능 및 개인 기여

📍 홈 페이지 정보 조회

검색 엔진 최적화와 사용자에게 빠른 초기 로딩 상태를 보여주기 위해 페이지 렌더링 방식으로 SSR을 채택

server에서 모집 중인 챌린지 api를 호출한 뒤 화면 렌더링

쿠키에 저장된 accessToken 유무를 비교, 로그인 유저와 비 로그인 유저를 구분하여 화면 렌더링

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 설정 등으로 인한 서비스 검색 엔진 최적화