오늘의 혼합주 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% 개선하였습니다.