미리보기

제작 계기

카페를 즐겨 다니는 사람 중 하나로써 방문했던 카페들을 한 눈에 보기 좋게 기록할 수 있으면서, 검색할 수 있고, 다음에 갈 곳을 미리 표시할 수 있는 기능을 가진 서비스가 있으면 좋겠다고 생각했습니다.

진행 과정

브랜치 전략

• main > develop > feature

• main은 init과 기능 개발과 버그 픽스 및 리팩토링이 완료된 최종 프로덕션 버전을 관리합니다.

• develop은 feature의 커밋을 모두 통합하여 관리하는 개발 단계에서의 통합 브랜치 역할입니다.

• feature는 세부 기능 개발과 기타 변경점을 업데이트하는 브랜치입니다.

코드 전략

• Next.js 14의 App router Server Action을 사용하여 Supabase의 DB CRUD 조작

• 타입스크립트를 도입하여 송수신 데이터의 타입 안정성 보장

• Zustand를 활용하여 컴포넌트 간 전역 상태 공유 및 확장

• React Query를 활용하여 데이터 캐싱 및 서버 상태 동기화와 무한 스크롤 구현

• MUI, TailwindCSS를 병용하여 성능 최적화되고 특색있는 UI 구현

결과

• 최대 45개의 데이터를 보여주는 검색 기능을 제공

• 카페에 대한 기록을 카드를 수집하는 것처럼 UI로 구현, 티어 시스템을 적용하여 모으는 재미를 추가

• 다음에 가 볼 카페를 간단하게 북마크 할 수 있는 기능 제공

문제와 해결에서 배운 점

• 전역 상태인 userId를 인자로 전달받는 Sever Action 호출시 클라이언트에서 초기값으로부터 변경된 값으로

  
  업데이트 된 후 액션을 호출하도록 만들어야 함을 배웠습니다.

• 지도에서 검색과 마커 표시가 반복적으로 호출되어 드래그가 안 되는 문제와 네트워크 성능 문제를 초래했는데,
  useRef를 활용하여 컴포넌트 리렌더링과 요청 함수 호출이 반복되는 것을 막을 수 있음을 배웠습니다.

제작 계기

가상화폐에 대한 뉴스와 기초 정보, 실시간 거래 정보를 확인할 수 있는 서비스를 직접 사용하기 위해 만들었습니다.

진행 과정

브랜치 전략

• 리포지토리 이전 내역 1회 현재 사용중인 브랜치 기준

• main > develop

• main은 통합 브랜치 역할입니다.

• develop은 기능 개발 기타 변경점을 업데이트하는 브랜치입니다.

코드 전략

• Next.js 14의 API 라우트를 사용하여 오픈 API로 요청

• HighCharts를 사용하여 실시간 캔들 차트 표현

• MUI, TailwindCSS를 활용하여 다양한 차트 UI 구현 및 통일감있고 시인성 높은 스타일 적용

• React Query, Redux toolkit을 사용한 상태 관리

결과

• 내 계좌 현황과 보유 자산의 흐름을 파이 차트와 라인 차트를 활용하여 시각화된 정보 제공

• 실시간 가상화폐 거래소의 체결 정보와 현재가 및 상세 정보를 테이블과 차트로 시각화하여 정보 제공

• 코인 관련 최신 소식 유튜브 영상, 네이버 뉴스 제공

배운 점

• Critical Rendering Path를 고려한 CSS 적용이 렌더링 성능에 매우 중요함을 알 수 있었습니다.

• SSR, SSG, ISR의 특성을 파악하고 상황별 렌더링 방식을 다르게 적용하여 성능을 향상시킬 수 있음을 배웠습니다.

• 코드 스플리팅, 폰트와 이미지 최적화를 적용해 초기 렌더링 성능을 향상시킬 수 있음을 배웠습니다.

제작 계기

냉장고에 여러가지 재료들이 있지만 어떤 음식을 만들지 생각나지 않을 때 레시피를 만들어주는 연금술사가 되어줄

서비스를 만들어보면 어떨까? 하는 아이디어로 팀과 함께 만들게 되었습니다.

역할 및 담당 파트

• 팀장, 프론트엔드

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

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

진행 과정

브랜치 전략

• master > develop > board, gpt, home, login, mypage

• master는 프로덕션 레벨, 그 이후의 업데이트 버전을 관리하는 브랜치입니다.

• develop은 하위 도메인 브랜치들의 통합 브랜치입니다.

• board, gpt, home, login, mypage는 도메인 별로 구분하여 기능 개발시 업데이트하는 브랜치입니다.

코드 전략

• 커스텀 에러를 도입하여 에러 핸들링과 원인 검출 시간을 축소

• 백엔드에 요청을 보내는 이벤트 핸들러에 쓰로틀링을 적용하여 네트워크 부하 방지

• 메인 디바이스인 모바일에 최적화된 UI/UX 구현

배포 전략

• EC2 인스턴스에서 docker compose를 이용하여 리액트, 스프링 부트, MySQL, Redis 이미지를 통합 컨테이너로 실행하여 앱 배포

문제와 해결에서 배운 점

• 팀원 간 적극적인 의사소통이 중요함을 깨닫았습니다. 깃/깃허브 사용 경험에 대한 공유나 코드 리뷰가 부족하여 계획에 차질이 생겼었습니다.

• 코드 컨벤션이 수립되어있으면 팀원 간 코드 이해가 더 원활하다는 것을 배웠습니다.

• 마일스톤 관리에 툴 활용이 중요함을 알았습니다. Jira나 Swagger 같은 전문적인 툴이 있지만 이를 사용하지 못했습니다. 그리고 스프린트같은 방법론도 활용하지 못하여 아쉬웠습니다.