커리큘럼
home
React
home

[OHZU] 나만의 혼합주 레시피 공유 사이트

Section info
Section A
A5
커뮤니티
Specialty
React
도메인(IP) 주소

오늘의 혼합주 OHZU

본인의 취향에 관심이 많고 혼합주를 선호하는 2030 세대를 위한 자신만의 혼합주 레시피와 비율을 공유하는 커뮤니티 입니다.

  OHZU 프론트엔드 목표

직관적인 UX/UI 구성

페이지에 들어왔을 때, 5~10초 안에 어떤 컨셉의 서비스인지 유저가 인지할 수 있도록 할 것
어떤 버튼을 누르거나, 액션을 취할 때 유저가 예상하는 것들을 보여지도록 할 것
모바일 환경에서도 위와 같은 목표를 이루도록 할 것

 OHZU 아키텍처 구성

 OHZU 사용 스택 및 기술적 의사 결정

Library & Language

Next.Js

Axios

Tailwindcss

Firebase

Vercel

 트러블 슈팅

Firebase Method로 검색 기능 구현

게시물 작성중 페이지 이동 방지

Dynamic Router 로 보내준 query 를 사용할 수 없는 문제

긴 로딩타임

 서비스 성능개선

Next.js <Image>를 사용하여 이미지 최적화를 하여 Perfomance를 최대 30% 개선하였습니다.
<button>과 <Link> 태그에 고유한 aria-lable값을 부여하여 Accessibility를 최대 27% 개선하였습니다.

메인페이지

글쓰기페이지

상세페이지

마이페이지

유저페이지