미리보기

Description

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

Experience

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

• 번들 크기 최적화

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

• 코드 스플리팅 적용

  • React.lazy 를 이용한 코드 스플리팅을 적용해 Lighthouse 성능 점수를 49점에서 66점으로 향상

• 폰트 최적화

  • 폰트 파일 포맷 최적화 및 서브셋 폰트로 변환하여 폰트 파일 크기를 최소화

  • FOUT처럼 동작하도록 font-display: swap으로 설정

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

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

Trouble Shooting

🚀 브라우저의 뒤로가기 이벤를 막고 임시저장 여부를 묻는 모달창을 보여주려함.

문제: 뒤로가기 이벤트를 제어하기 위해 popState 이벤트를 활용하기로 함.

페이지 진입 시 history.pushState 메소드를 사용하여 현재 페이지를 히스토리 내역에 추가하는 로직인데 새로고침을 할 때 마다 history.pushState 가 발생하는 문제 발생

해결 : 이를 방지하기 위해 세션스토리지에 initailLoad라는 데이터를 추가해서 현재 페이지가 초기 로딩이 완료되었는지 여부를 판단 , 초기 로딩일 경우에만 history.pushState 발생

Tech Stack

React , Typescript, zustand, react-query, react-hook-form ,tailwind-css, figma , storybook

Description

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

Experience

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

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

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

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

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

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

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

• 데일리 스크럼을 진행하여 프로젝트 진행 상황을 공유

Tech Stack

React , Typescript, zustand, react-query, tailwind-css, axios , figma