1. 토글 v3.0 (Front-end React Developer, 2023.03 - 2023.11, https://toggle.ly )
일상생활에 필요한 미니보험을 비교, 구매할 수 있는 보험 서비스 플랫폼을 개발하고 있습니다. 기존 제품(v2.0)의 기능을 고도화하여 리뉴얼 하였습니다
- 기존 제품 이슈 및 리뉴얼하는 서비스의 성격을 분석하여 기술스택 선정(Next.js, TypeScript, Styled-Compoment), 관리자와 빠르고 적극적인 의사소통으로 프론트엔드 개발 리딩
- 프로젝트 폴더 구조 설계 및 개발 환경 구축, Data fetching 로직 모듈화
- custom popup componet, 로그인정보 등 전역에서 필요한 state, 또는 깊은 depth로 props drilling 이슈가 있을 시 해당 리소스를 줄이기 위해 Recoil로 리팩토링
- 플랙폼 주요 기능 플로우인 상품 검색 시 카테고리별 필요한 input 조건문들을 Map 형태로 개발해 개발 가독성 향상, 반복적인 pattern의 input 기능들은 custom hook compoent로 생성해 사용
- 페이징, 탭 전환 등 api response가 변동되지 않을 때에는 서버에 과부화를 줄이기 위해 되도록 캐싱처리되는 React Query 사용
2. 토글 v2.0 (Front-end React Developer, 2022.11 - 2022.12)
- 토글 서비스 주요 페이지(searchpage, mainpage 등) UI/UX 및 기능 리뉴얼/전체 유지보수
- 가입 페이지 최적화 위해 재설계 및 코드 리팩토링
- 한 파일에 5000줄이 넘는 코드가 담겨 있어 코드 파악이 어려우며 유지보수에 시간이 오래 걸림 ⇒ 목적별/기능별로 모듈을 분리, 명령형 코드를 선언적 코드로 변환
2. 토글 어드민 (Front-end React Developer, 2022.07 - 2022.09)
토글 서비스와 보험 제휴사 통합 어드민 페이지 입니다.
- 어드민 페이지의 지속적인 유지보수를 위해 node version 14 ⇒ 16 업데이트
- 모듈별 deprecated된 함수 ⇒ 변경된 사용법 찾아 변경
- 레거시에 사용되었던 CoreUI version 3에서 4로 마이그레이션 시 변경된 component sass를 수정하는것이 리소스가 많이 필요하다 판단 ⇒ CoreUI Library 삭제 후 custom component 개발
- 어드민 페이지 성능 높이기 위한 구조 재설계 및 리팩토링
- 기존 불필요한 depth, 렌더링 줄이기 위해 Presentational & Container 패턴 제거, 랜더링 최적화
- 자바스크립트 프로젝트를 점진적으로 타입스크립트로 개선
- 결제취소, 회원정보 변경 등 CS 업무를 통해 이루어 질 수 있도록 페이지 개발
3. 트립 토글
제휴 여행사가 접속하여 고객들에게 여행 미니보험을 다수로 가입 시켜주는 B2B 웹 서비스 입니다
- 혼자서 프론트엔드를 전체 설계 개발/유지보수
- 가입 작성부터 결제까지 프로세스를 여러 페이지로 생성, 데이중앙에서 관리하기 위해 redux-toolkit 도입
और देखें
