미리보기

투디 서비스의 프론트엔드 개발을 담당하였습니다. 고객측 화면, 기업측 어드민, 운영팀 어드민 3가지 프론트엔드 부분을 모두 담당하며, 신규 기능 개발과 유지보수를 주도적으로 수행했습니다. 또한, Vue.js와 Javascript를 기반으로 한 프로젝트를 Next.js와 Typescript로 리빌드한 경험이 있습니다.

• 투디 2.0 구축을 위해 Vue.js, Javascript 기반의 프로젝트를 Next.js, Typescript 기반의 프로젝트로 리빌드

  • 기간 | 2022.11 ~ 2023.03 (5개월)

  • 기술 | Next.js, React.js, Typescript, React, React-Query, React-Hook-Form, TailwindCSS, Jest, Testing-Library

  • 성과 | 기존 Vue.js, Javascript 기반의 외주 프로젝트를 Next.js, Typescript 기반의 프로젝트로 전환

  • 역할 |

    • 리빌드 진행시 프론트엔드 기술 스택을 직접 서칭하고 고민하여 적용

    • 이전에 초기 로딩이 느리다는 피드백을 받아서, Lighthouse로 성능을 측정한 결과 데스크탑에서의 First Contentful Paint(FCP)가 약 8초로 매우 느린 것으로 확인되었습니다. 이에 대응하여, 기존에 CDN을 통해 적용되던 폰트 로직을 Next.js의 LocalFonts 기능을 활용하여 수정하고, 메인 페이지에 서버 사이드 렌더링(SSR)을 적용함으로써, 데스크탑에서의 FCP를 8초에서 0.5초로 개선

    • Jest, @testing-library 이용하여 테스트 환경 세팅 및 적용

      • 테스트코드를 작성하기 쉬운 유틸함수 및 작은 컴포넌트부터 우선 순차적으로 적용

      • 회사 내 프론트엔드팀에서 테스트코드를 전혀 작성하지 않는 상황에서 개인적으로 테스트 코드 작성을 공부하여 Jest와 Testing-Library를 이용한 단위테스트와 컴포넌트 테스트를 작성하는 방법에 대해서 설명하고 공유한 적이 있음

    • 컴포넌트 개발 시 아토믹 디자인 패턴 적용

    • 기존 프로젝트에 적용하지 않았던 ESLint, Prettier 적용

• 하이웍스 SSO 연결

  • 기간 | 2022.09 ~ 2022.10 (2개월)

  • 기술 | Vue3, Javascript, Vuex

  • 성과 | 하이웍스 SSO 연동으로 네이버 워크플레이스 SSO 연동 이외에 서비스 이용루트가 추가되면서 서비스 회원 증가

  • 역할 |

    • SSO 연결을 위한 백엔드 API 연동

    • Sentry 에러 로깅 시스템 세팅 및 적용

      • Sentry를 적용하여 Safari에서 Vue의 v-model이 정상적으로 작동되지 않아 출발지, 도착지 연락처가 화면에는 정상적으로 입력되나 API 요청 시 데이터가 비어있게 되는 버그를 찾아내어 실제 유저가 접수가 안되는 원인을 추적하여 수정한 경험이 있음

• 택배 접수 기능 개발

  • 기간 | 2022.06 ~ 2022.08 (3개월)

  • 기술 | Vue3, Javascript, Vuex

  • 성과 | 기존 퀵접수에 더불어 택배접수도 가능하도록 서비스 기능을 추가

  • 역할 |

    • 택배접수 백엔드 API 연동

    • 퀵접수와 택배접수에 공통으로 로직 및 컴포넌트를 분리하여 리팩토링

• 네이버 워크플레이스 SSO 연동 및 첫 서비스 배포

  • 기간 | 2022.04 ~ 2022.05 (2개월)

  • 기술 | Vue3, Javascript, Vuex

  • 성과 | 어드민 페이지 구축과 외주 작업물의 기능 및 버그를 수정하여 서비스 첫 오픈을 정상적으로 마무리함

  • 역할 |

    • Vue.js, Javascript 기반의 외주 작업물을 수정

    • 어드민 프론트 구축

• 휴대폰 요금제 컨설팅 기능의 어드민 페이지 개발 담당

  • 기간 | 2023.06 ~ 2023.08 (3개월)

  • 기술 | Vue3, Javascript, Typescript, Vuex, Quasar

  • 성과 | 어드민을 통하여 휴대폰 요금제 계산에 필요한 데이터들을 등록, 수정 기능 구현 및 부분적으로 Typescript를 적용할 수 있도록 프로젝트 세팅

  • 역할 |

    • Vue3, Quasar, Javascript 프로젝트 환경에서 부분적으로 Typescript 적용할 수 있도록 설정하여 Typescript 도입

    • 휴대폰 요금제 컨설팅 기능의 어드민 페이지 개발 담당