전연지

기존에 window.history, history API, react-router-dom 세 가지를 이용해 routing을 하고 있어서 routing쪽에 이슈를 트래킹하기 어려웠음
<ul>
<li>react-router-dom 4.10.1 → 6.13.0</li>
<li>window.history, history API를 사용하던 것들을 react-router-dom으로 수정</li>
<li>useHistory, useRouteMatch 등 deprecated된 method를 제거하고 withRouter HOC를 만들어 class 컴포넌트에 적용</li>
</ul>

기존에는 폰트 통일화가 되어있지 않아서 font-family로 이곳저곳에서 다른 폰트들을 가져오고 있었음 디자인팀과 맞추어 Pretendard로 폰트 통일화
<ul>
<li>Pretendard font 적용
<ul>
<li>preload</li>
<li>woff2 사용</li>
<li>현재 사용하고 있는 font-weight가 많아서 우선 pretendard variable 사용</li>
<li>폰트 캐싱 추가</li>
</ul>
</li>
<li>font-weight 정리 완료 후
<ul>
<li>font subset 적용</li>
<li>css 토큰화 진행</li>
</ul>
</li>
</ul>

기존 코드의 최신화 문제와 카카오 APP Key를 여러개 사용하면서 카카오톡 공유하기 부분에서 이슈가 많이 일어남 이슈 수정을 위해 카카오 디벨로퍼 권한을 얻어 전체적인 수정 진행
<ul>
<li>카카오 키 하나로 통일화 진행<ul>
<li>와드 모든 레포 확인 후 수정 요청</li>
<li>앱에 있던 카카오 키 통일화</li>
<li>플랫폼 등록</li>
</ul>
</li>
<li>기존 카카오톡 공유하기 API 최신화</li>
</ul>
카카오 관련 이슈 수정

웨이팅 리뷰 수 증가를 위해 웨이팅 인증하기 페이지 구현
<ul>
<li>웨이팅 인증하기 페이지 구현<ul>
<li>웨이팅한 기록을 유저가 찍은 사진을 올리고 템플릿이나 배경 색깔 설정등을 사용해 커스텀 할 수 있도록 구현</li>
<li>카카오톡, 인스타 등 여러 방법으로 공유할 수 있도록 구현</li>
<li>최대한 서버리소스를 사용하지 않게 하기 위해 <ul>
<li>카카오톡의 경우 카카오 자체 서버 및 API 사용</li>
<li>인스타와 기타 공유 방법으로는 네이티브의 캡쳐 기능을 이용</li>
</ul>
</li>
</ul>
</li>
</ul>
웨이팅 인증 페이지에 진입한 이후의 완료까지의 전환율은 단계별로 평균 70% 이상으로 훌륭

커뮤니티 활성화를 위한 수단 필요 후 커뮤니티 활성화 작업들의 효과를 극대화 해줄 수 있을 것으로 예상되어 우선적으로 개발
<ul>
<li>커뮤니티 알림 구현<ul>
<li>Optimistic Updates를 이용해 UX향상</li>
<li>API 폴링 방식 이용</li>
<li>웹에서 앱의 알림 뱃지 관리 기능 추가</li>
</ul>
</li>
</ul>
푸시오픈율이 굉장히 높음, 전체 평균 23% 마케팅 푸시의 오픈율 1% 미만, 개인화 푸시도 10% 미만 팔로우, 좋아요 등 푸시로 인해 영향 받는 결과들의 꾸준한 상승

초대장 수락수를 증가시키기 위해 초대장 보내기 기능 개발
AS-IS 단순 공유 복사 기능 TO-BE
<ul>
<li>초대장 보내기 페이지 추가</li>
<li>링크 및 카카오톡 공유 기능 추가</li>
</ul>
초대장 지표가 90%가량 넘어가서 대시보드의 기준을 수정할 정도로 수락률이 오름

기존에 css, sass로 구현되어 css의 스코프 관리가 안되었고 css 영향범위를 측정하기 어려웠음
<ul>
<li>vanilla extract 도입<ul>
<li>컴포넌트 단위의 스타일링</li>
<li>css 토큰화</li>
</ul>
</li>
</ul>
vanilla extract로 zero-runtime styling, type-safe css 구현이 가능해짐

기존 redux를 통일 없이 사용함 특정 액션로 여러 리덕스의 값들을 바꿔주고 있어서 이슈 트래킹 하기 어려웠음 그래서 빠르게 구조를 수정하고 dev tools가 잘되어있는 redux-toolkit으로 변경
<ul>
<li>기존에 여러 리덕스값을 호출하던 액션을 각각 사용하는 리덕스 액션으로 변경</li>
<li>redux-toolkit devTools 적용</li>
</ul>
리팩터링으로 인해 이슈 트래킹이 편해지고 redux 사용 컨벤션화 됨

기존에 로깅들은 따로 형식이 안 맞춰져 있어서 통일 필요 사업 결과 확인을 위한 지표 추가 필요
<ul>
<li>excel sheet에 형식을 맞추고 정리하여 필요 로깅 작성 및 적용<ul>
<li>로깅 형식에 맞는 유틸 함수 구현 및 컨벤션화</li>
<li>100여개의 로깅 추가</li>
</ul>
</li>
</ul>

기존에는 API 캐싱을 위해 리덕스에 모든 데이터를 담아놓음. 기존 16Mb정도 되던 리덕스 데이터 때문에 memory leak이 발생하는 것으로 추정 리덕스 제거 및 API 캐싱 및 관리를 편리하게 이용하기 위해 Tanstack Query 도입
<ul>
<li>컴포넌트 안에서 API 호출하던 부분을 API 분리</li>
<li>class 컴포넌트를 함수형으로 수정</li>
<li>기존에 리덕스 안의 데이터와 isLoading을 통해 처리하던 부분을 Tanstack Query를 도입하며 suspense를 사용</li>
<li>캐싱을 redux에서 관리하는 것이 아니라 Tanstack Query에서 관리함으로써 staleTime, cacheTime, queryClient를 이용해 동작 수정</li>
</ul>

웨이팅 부분 대부분을 전담해서 진행
<ul>
<li>복잡한 웨이팅 등록 플로우 구현</li>
<li>웨이팅 예약 상세 페이지 구현</li>
<li>웨이팅 섹션 구현</li>
<li>웨이팅 미루기, 취소 구현</li>
</ul>