기여도 : 15% / 10명 (FE 4, BE 3, DESIGN 3)

목표

• 빠른 MVP 완성, 그리고 사용자의 피드백을 받아 적용하기!
• vitest를 사용한 단위 테스트 코드 작성
• story book을 통해 디자이너와 원활한 소통

주요 역할

• 나만의 질문 폼 생성 플로우 개발
• Drag and Drop 기능을 활용하여 질문 생성 & 정렬 기능 구현

초기에 세웠던 프로젝트 목표를 달성하였습니다.

• 프로젝트의 목표는 ‘빠르게 배포하고 개선하자!’ 이었습니다.
• 6월 18일 디프만 13기 첫 1차 배포 이후, 데이터에 기반해 서비스를 개선, 추가 기능 개발해 7월 15일 2차 배포하였습니다.
• 정식 출시 3일 만에 사용자 1300명 달성
• Hotjar, GA, mixpanel, Vercel analytics를 이용해 사용자 지표를 수집 및 분석, 이탈율이 가장 높았던 인트로 단계에 스킵 기능을 추가하여 18%의 이탈률을 10%으로 개선하였습니다.

Drag and Drop 기능 구현 중

• 질문 폼 생성 기능에서, Framer Motion의 Reorder 기능을 이용해 Drag and Drop 기능 구현
• 앱이 아닌 모바일 웹이라는 환경과 Drag and Drop 기능을 위해 나온 라이브러리가 아닌 애니메이션 라이브러리여서 제한적인 기능과 예기치 못한 버그가 발생했습니다.
• 디자이너와의 소통을 바탕으로 적절한 대안을 찾아 요구 사항에 맞는 해결 방법을 제시하여 성공적으로 적용하였습니다.

사용자 경험과 개발자 경험을 위해

• 자주 사용하는 로직은 hook, util로 분리하여 재사용성을 향상하고, Chakra UI를 참고해 일부 컴포넌트에 Compound Pattern을 적용하여 재사용성과 유연성을 높였습니다.
• framer motion을 사용하여 0.4초 이내의 인터렉션을 추가하여 사용성을 증진하였습니다.
• 여러 사람과 공유해 사용하는 서비스이므로 다양한 브라우저 환경에서 정상 동작하도록 크로스 브라우징을 체크하였습니다.

사용자의 DNA 결과에 따른 커리어 명함을 제작하였습니다. #커리어 명함 바로가기

• 동료의 피드백에 따라 다르게 나오는 DNA 결과에 따라 사용자의 커리어 명함을 만들어주기 위해 vercel의 satori 라이브러리를 이용해서 서버 사이드에서 이미지를 동적으로 생성하였습니다.
• 다양한 브라우저 환경에서 이미지다운 기능이 원활하게 돌아갈 수 있도록 구현하였습니다.
  #PR link

Instagram의 질문 입력 기능 구현해보았습니다.

• 객관식 질문 옵션 기능을 개발하며, Instagram의 질문 옵션 입력과 같이 구현해달라는 요구사항을 받았습니다.
• 기능을 위해 고려해야 하는 조건들이 많아 로직이 복잡해지는 문제가 있었습니다.
• 사용자의 흐름을 파악하고, 사용자의 상호작용을 기반으로 이벤트 핸들러를 분할하여 구현하였습니다.
• 또한 분기 조건, 숫자 값 등을 상수로 정의하여, 가독성을 높일 수 있었습니다.

기여도 : 20% / 5명 (FE 1, ANDROID 1, BE 1, DESIGN 1, PM 1)

주요 역할

• 카카오 로그인 기능
• 맛집 지도, 검색, 필터링 기능 구현
• 식당 리뷰 추가, 삭제, 수정 기능 구현

웹 페이지 성능 최적화

• 식당 검색시 한 글자 입력마다 API를 요청하는 문제를 개선하기 위해 일정 시간에 한 번만 API 요청을 하도록 debounce를 적용하고, debounce 로직을 테스트 코드를 통해 검증하였습니다.
• 전국의 식당을 모두 불러오기 때문에, API 요청 시 응답 시간이 오래걸려 페이지네이션 기능을 추가
• 모바일 웹 환경에서의 사용자 경험을 위해 페이지네이션이 아닌 무한 스크롤을 이용한 방식을 채택하고, IntersectionObserver를 이용하여 구현하였습니다.

Github Action을 활용한 자동화를 통해 개발자 경험을 향상하였습니다.

• Github Action을 활용하여 build, lint 체크를 자동화하고, Issue 혹은 Pull Request 가 오픈될 때 labeling 을 자동화, 해당 레이블은 릴리즈 노트 작성을 자동화할 때 카테고리 분류하는 기준으로 사용하였습니다.
• 웹 성능 측정 도구인 Lighthouse를 설치하고 자동으로 PR 댓글에 보고서 성능 결과 요약하고,
• Release Drafter를 사용하여 Pull request의 제목으로 Release note를 자동으로 작성하였습니다.

GA를 통해 문제를 확인하고, 이탈률을 개선하였습니다.

• 회원가입 플로우 중 사용자의 취향을 수집하기 위해 방문했던 식당을 평가하도록 하는데, 이 과정에서 많은 사람이 이탈하는 것을 확인하고, 식당을 검색하는 과정이 불편하다는 피드백을 받았습니다.
• 사용자의 평가를 유도하기 위한 문구를 배치하고, 카카오 맵을 참고해 방문 식당 플로우를 개선하였습니다. 이를 통해 해당 단계에서 이탈률을 67% 개선할 수 있었습니다.

기술적인 어려움 및 해결 방법

1. naver map 외부 라이브러리 사용

• naver map은 JavaScript API만을 지원합니다. 이를 React 환경에서 구현하는 과정에서 렌더링 이슈 등이 발생하고, react-naver-maps 라이브러리를 이용해 해결하였습니다.
• 동적으로 생성된 마커 클러스터링 기능을 구현하기 위해 ref list를 이용하였습니다. 라이브러리에서 제공해주지 않아, naver 공식 문서를 통해 구현하였습니다.
  마커 클러스터링 적용기 ➜

전역상태라이브러리에 대한 고민

• 기존에는 전역 상태로 모든 데이터를 유지하는 것은 리소스가 많이 든다고 생각해, 전역 상태의 필요성을 잘 느끼지 못했습니다.
• 하지만, PREAT 프로젝트를 진행하며 선택한 값을 유지하기 위해 전역 상태의 필요성을 느끼게 되어, 전역 상태를 효율적으로 관리하기 위해 어떤 라이브러리를 사용하는 것이 좋을지 고민하였습니다.
• 기존에는 Jotai를 이용해 사용자 인증 데이터만을 전역으로 관리하고 있었습니다. 그런데 전역으로 관리해야 하는 값들이 많아지고, 전역 상태 간의 연관성이 많아지며 atom으로 관리하기 쉽지 않아졌습니다.
• 최종적으로 store를 이용해 관리하는 zustand로 변경하였습니다. zustand 사용 방법 ➜

기여도 : 20% / 6명 (FE 3, BE 2, DESIGN 1)

주요 역할

• 짧은 글 타이핑 기능
• 디자인 시스템 세팅

기술적인 어려움 및 해결 방법

1. 시간 측정 오차 해결

• 타이핑 게임이므로, 시간 안에 모든 글을 타이핑할 수 있는지 체크해야 했습니다.
• 정확한 시간을 측정하기 위해 setInterval이 아닌 Date객체를 이용하였고, 1ms의 정밀도를 가진 타이머를 구현하였습니다. 관련 블로그 링크 ➜
• 또한, custom hook으로 개발하여, 사용해야 하는 곳에서 간편하게 사용할 수 있도록 하였습니다. 관련 코드 ➜

view와 logic 구분하기

• 타이핑 게임을 이루고 있는 로직들은, 복잡하고 공통으로 적용되는 부분이 많았습니다.
• Custom Hook, Context API를 이용하여 view와 logic을 분리하여, props drilling을 막고, 중복되는 코드를 줄일 수 있었습니다. 구현 코드 ➜

느낀점 및 배운점

1. 주기적인 회의와 코드 리뷰를 통해 '왜 이렇게 코드를 작성했을까?'를 고민하고, 서로의 생각을 이야기하며 새로운 지식을 많이 얻을 수 있었습니다. code review pr ➜
2. 디자이너와 소통하며 디자인 시스템을 구축하고 프로젝트에 적용하였습니다. 디자인 시스템에 맞춰 디자인/개발하니 개발 속도가 증가하였고, 완성된 결과물 또한 일관성 있어 보여 좋았습니다.

회고 보러가기 ➜

목표

• SPA 라우팅을 구현하기 위해 history를 감지하고, 커스텀 한 동작 수행
• 컴포넌트 기반 구조를 이용하여, 공통으로 사용하는 코드들을 class 문법으로 추상화 시키고, 필요한 부분에서는 상속받아 변경할 수 있도록 구현

기술적인 고민 및 해결 방법

Valina JS를를 이용한 컴포넌트 기반 구조

• 컴포넌트 기반 구조로 작성하기 위해 React의 구조를 참고하였습니다.
• 가상 DOM이 없어 렌더링에서 문제가 발생하였는데, dom을 미리 생성하는 방법으로 해결하였습니다.

es6 class 문법 사용

• React를 참고한 컴포넌트 기반 구조로 작성하 다보니, function 키워드를 사용하면 setState와 같은 로직이 중복되는 문제가 발생하였습니다.
• es6 class 문법의 상속을 이용하여 기본 컴포넌트를 만들고, 상속하여 컴포넌트를 재활용하여 중복 코드를 줄일 수 있었습니다. 전/후 보러가기 ➜