미리보기

제작 계기

카페를 좋아하는 사람으로써 방문했던 카페들을 검색할 수 있고 보기 좋게 기록할 수 있으면서, 다음에 갈 곳을 북마크 할  수 있는 기능을 가진 서비스를 만들었습니다.

기술 스택

Next.js, TypeScript, React.js, React Query, Zustand, Tailwind CSS, MUI, Kakao Map API, Supabase, Resend, Vercel, Godaddy

액션

• 네트워크 지연과 비용 감소: useInfiniteQuery를 활용하여 응답 시간이 88~96ms -> 5ms 감소

• 커스텀 훅 비즈니스 로직 분리: 서버 액션이 Supabase DB의 CRUD를 담당하고, useMutation은 서버 액션을 호출하고 데이터 동기화만 담당하도록 아키텍처 설계

• 실제 사용자 피드백 반영과 지속적인 UI 업데이트: 카페 상세 정보 폰트를 변경, 썸네일을 캐러셀로 다양하게 제공, 카페 수집/ 북마크를 나타내는 아이콘에 낙관적 업데이트 적용

• 사용자 중심의 UI/UX: 다크/라이트 테마 토글, 반응형 스타일, 카드 무한 스크롤 구현, 성능 최적화

성과

• 피드백을 제공한 기존 사용자의 평균 만족도가 3.96점에서 4.26점으로 향상됨

• 비즈니스 로직, 상태 동기화의 명확한 분리로 확장성과 재사용성이 크게 향상됨

제작 계기

웹에서 일일이 검색하지 않고, 캐쥬얼하게 가상 화폐에 대한 뉴스와 실시간 거래소 정보를 제공받기 위한 서비스를 만들었습니다.

기술 스택

Next.js, JavaScript, React.js, React Query, Redux Toolkit, Tailwind CSS, MUI, Upbit API, Youtube Data API, Naver Search API, Vercel

액션

• 성능 최적화: MUI 컴포넌트의 sx가 빈번히 사용되어 렌더링 오버헤드가 발생했고, 이를 TailwindCSS와 MUI/styled로 개선하고 코드 스플리팅, 이미지 최적화를 더하여 페이지 성능 30% 향상

• 퍼사드 패턴 구현: 업비트 REST API를 호출하는 함수를 클래스 내부 메서드로 구현하여 유지보수성과 확장성 확보

• SSR -> ISR: 렌더링시 마켓 코드가 필요한 페이지를 ISR로 변경하여 RTT를 감소시켜 FCP, SI 점수 30% 향상

• 뷰/비즈니스 로직 컴포넌트 분리: Grid를 사용한 복잡한 UI 코드 사용이 빈번한데 뷰와 비즈니스 로직 컴포넌트를 명확히 분리하여 가독성 및 유지보수성 향상

성과

• 성능 최적화에 의해 Web Vitals 전체 페이지 성능 점수가 75.86점에서 98.57점까지 상승

제작 계기

냉장고에 여러가지 재료들이 있지만 어떤 음식을 만들지 생각나지 않을 때 레시피를 만들어주는 연금술사가 되어줄 서비스를 만들어보면 어떨까? 하는 아이디어로 팀과 함께 만들게 되었습니다.

역할 및 담당 파트

• 팀장, 프론트엔드

• 초기 페이지, 메인, 로그인, 회원가입, 비밀번호 재설정, 마이페이지, 닉네임 변경, 게시물 수정, 랭킹 페이지,

  팀원 모집, 일정 관리, 디자인 및 테마 컨셉 기획, 리드미 작성, 코드 컨벤션 작성, 코드 리팩토링, EC2 배포

기술 스택

JavaScript, React.js, React Query, Tailwind CSS

액션

• 디버깅 시간 단축: 백엔드와 에러 케이스별 커스텀 코드와 메세지를 정의하여 에러 핸들링에 사용

• 네트워크 부하 감소: API 요청을 보내는 이벤트 핸들러에 커스텀 훅으로 쓰로틀링을 적용하여 연속 클릭시 요청 수 1/10로 감소 (초당 10번 -> 3초당 1번)

• 모바일 UX를 고려한 기능: y축 스크롤이 긴 페이지에 useScrollToTop이라는 훅을 사용하여 최상단으로 바로 이동할 수 있는 버튼 구현하여 위로 돌아가는 스크롤 시간이 평균 3초에서 0.5초로 감소

성과

• 버그 발생시 최소 30분 ~ 최대 2시간 이상 소요되던 원인 파악 시간이 최대 20분으로 감소

• 쓰로틀링 적용으로 429 에러를 방지하고 서버 부하 90% 감소