미리보기

캐치테이블 B2C 서비스의 프론트 개발을 담당하고 있습니다.

메인 페이지 경량화

• 뷰포트 기반 API 호출으로 유저의 뷰에 들어온 영역만 그려주게 개선
• API 분리 및 Redux → tanstack query
• tanstack query를 적용함에 따라 로딩상태를 정확히 특정할 수 있게 되었고, 해당 상태일때 스켈레톤을 적용하여 LCP 감소

기획전 통합

• 웨이팅/픽업 서비스에 대한 신규 기획전을 생성하는 기능을 제공하고, 기존에 구현되어 있던 파편화된 중복 코드들을 통합
• Server-Driven-UI로 서버에서 화면에 그려질 요소들을 컴포넌트 단위로 제어할 수 있게 구현
• react-virtual을 활용하여, 뷰에 보이지 않는 Dom 요소를 제거하는 Windowing을 적용하였고, Intersection Observer 기반 호출로 불필요한 호출 방지하여 리스트 성능을 개선

픽업 웨이팅 지도 기능 구현

• 기존 Redux와 클래스형 컴포넌트, JS로 구현되어 있던 지도와 동일한 뷰를, Jotai, Tanstack Query, 함수형 컴포넌트, TS로 개발
• 기존의 지도 코드 또한 함수형, TS로 리팩토링하여 코드의 직관성을 높였고, 유지보수의 용이성 및 확장성 확보
• 지도가 제공되는 page에서 useContext로 지도 객체, 서비스타입, Clusterer 등의 공통으로 사용되는 값을 훅으로 가져갈 수 있게 구현
• 지도가 불필요하게 렌더링 되지 않도록 useState 및 useEffect의 사용을 최소화
• 사용자의 뷰포트를 바탕으로 좌표를 계산하고, 중심값을 가져오는 로직 등을 함수형으로 공통화

관심지역 설정 기능 개발 / 캐치테이블 지역 구분 체계 마련 및 개발

• 홈 상단에서 관심지역을 고를 수 있는 피커 뷰 제공
• 관심지역 설정 완료시의 체크박스 로티를 제공하여 이전 캐테에 없던 새롭고 직관적인 설정완료 UX를 제공
• MUI 대신 framer motion으로 하단 drawer을 구현하여 차후 더 다양한 애니메이션 구현에 대한 용이성 확보
• 작업에 앞서, 관심지역 피커에서 내위치로 설정 기능에서 사용될, 위치정보를 가져오는 기능이 앱이 켜져있을 때는 권한을 수정하여도 반영되지 않았어서, 네이티브 개발자분과 소통하며 기능을 개선
• 기존 지역명으로 직접 관리되던 지역 구분체계를 코드화함에 따라, 기존의 모든 지역 필터 및 지역필터가 적용되는 리스트를 지역코드로 사용할 수 있게 작업
• 유저가 선택한 관심지역에 맞는 홈 구좌의 지역별 섹션 데이터들을 react query를 활용하여 구현

미용실 플랫폼인 카카오헤어샵 서비스와 B2B 서비스인 카카오 헤어샵 파트너스 서비스를 담당하였습니다.

광고 플랫폼 기능 구현

• 미용실 점주가 결제수단을 등록하고 원하는 위치에 광고를 설정하는 기능 개발
• 설정된 광고를 B2C 서비스에서 보여주는 기능 개발

서비스 확장 및 리브랜딩 작업

• 기존 카카오 헤어샵 브랜드 스타일을 새로운 브랜드 스타일로 수정
• 새로운 서비스 소개 웹사이트 개발
• 리브랜딩 전 이벤트, 채널추가 이벤트, 연말 이벤트

내주변 개편 QA

• 내주변 개편 작업 및 이후 개선사항 및 에러 대응

티아라 로그 통합 및 수정

• 산재되어 관리 및 활용이 어렵던 티아라(B2C서비스 내 유저의 행동로그를 쌓아주는 기능) 로그를 통합 및 수정함.

ISMS-P 인증심사 대응

• 헤어샵 마이페이지 개인정보 수정기능 개선
• 파트너스 AML 기능 개선

레거시 개선 및 기술 과제

• 신규 카테고리 확장을 위한 오래된 코드 개선
• 신규 상태관리 라이브러리(react-query), Typescript 도입
• 파트너스 웹 공통 컨벤션 정리

서울시 중학교에서 사용하는 학습 제어 플랫폼 ‘포커스팡’ 화상수업 및 수업외 제어 기능 개발
[기술 스택] React, React-native, Redux, Styled-Components, Web-Socket

[선생님 웹앱] - React, Redux, Styled-Components, Web-Socket

• 웹소켓을 활용하여 선생님이 화상 수업을 진행하는 기능 개발
• React Calendar 라이브러리를 활용한 달력 구현, 일정 추가 커스텀 기능 개발

[학생 앱] - React-native, Redux, Styled-Components, Web-Socket

• 웹소켓을 활용하여 학생이 화상 수업을 수강하는 기능 개발
• 선생님이 설정한 앱들에 대한 사용을 제어하는 기능 개발