미리보기

Description

사용자가 작성한 일기를 토대로 띠로리(AI)가 그려주는 그림일기 서비스

Experience

• OAuth 인증을 활용하여 카카오 로그인 구현

• react-hook-form과 zod를 사용하여 일기 작성에 대한 폼 데이터를 효율적으로 관리

• react-error-boundary와 react-query의 onError를 결합하여 전체적인 에러 관리

• 번들 크기 최적화

  • rollup-plugin-visualizer를 사용해 번들 분석 후, react와 react-dom을 vendor.js로 분리하여 캐싱 효율성을 높이고 페이지 로딩 속도를 개선

  • 페이지 단위 코드 스플리팅을 하여 main.chunk사이즈 약 58% 감소 (512 KB -> 212 KB)

  • Lighthouse 성능 점수 49점 -> 66점으로 향상

• 폰트 최적화

  • 폰트 파일 포맷 최적화 및 서브셋 폰트로 변환하여 폰트 파일 사이즈 약 23% 감소 ( 779KB -> 598KB )

  • UX를 고려하여 FOUT처럼 동작하도록 font-display: swap으로 설정

• Storybook을 활용하여 UI 컴포넌트 독립적 개발 및 문서화를 통해 효율적인 협업 환경을 구축

• 반응형 웹으로 구현하여 사용자 경험을 최적화

• 전반적인 프로젝트 기획 및 Figma를 사용하여 전체 UI/UX 디자인 설계

Trouble Shooting

• 뒤로가기 이벤트 제어 및 임시 저장 모달 구현

  • 뒤로가기 시 임시저장 여부를 묻는 모달을 띄우기 위해 "popState" 이벤트와 "history.pushState"를 활용

  • 새로고침 시 불필요한 pushState가 발생하는 문제 확인

  • 이를 방지하기 위해 sessionStorage를 활용하여 초기 로딩 여부를 판단하고, 새로고침 시 불필요한 pushState 호출을 방지하여 문제 해결

• 카카오 로그인 구현

  • 백엔드에서 OAuth 인증을 처리하려 했으나 리다이렉트 문제로 JWT 토큰을 JSON 형식의 데이터를 받는 데 어려움이 발생

  • 프론트에서 카카오서버로 직접 로그인 요청을하고 인가 코드를 백엔드로 전달

  • 백엔드에서 인가 코드를 받아서 JWT 토큰 발급 후 클라이언트에 반환하는 방식으로 문제 해결

Tech Stack

React,Typescript, zustand, react-query, react-hook-form ,TailwindCss, figma, storybook

Github : https://github.com/DDrawry/ddrawry-FE

Description

다양한 자취 레시피를 공유하고 , 냉장고 속의 재료로 만들 수 있는 레시피를 찾아주는 서비스

Experience

• 사용자 접근성 향상을 고려한 레시피 공유 기능 구현

  • 비 로그인 사용자도 공유된 레시피에 접근할 수 있도록 구현하여 진입 장벽을 낮추고 사용자 경험을 향상

  • 공유된 페이지 내에서 상호작용을 시도 할 때 로그인 되어 있지 않으면 로그인 페이지로 Redirect

• 4단계의 레시피 작성 프로세스 구현

  • 각 단계의 필수 요소가 입력되었는지 유효성 검사를 진행하고 작성 중에 페이지를 이탈하여도 데이터가 유지될 수 있도록 zustand persist를 사용

• 로딩 UX 개선을 위해 Skeleton UI를 적용

• Figma를 사용하여 전체 UI/UX 디자인 설계

Tech Stack

React, Typescript, zustand, react-query, TailwindCss, axios, figma

Github : https://github.com/OZ-Coding-School/oz_02_main-003-FE