미리보기

ZMS(상담원 모니터링 프로그램)의 백엔드 개발을 담당하고 있습니다. 기존 JavaScript와 TypeScript가 혼재되어 있던 프로젝틀 완전히 TypeScript로 마이그레이션하고, Express.js 기반의 서버 아키텍처를 Nest.js로 전환하여 레거시 기술스택을 개선했습니다. 또한 기존 Raw Query를 사용하던 환경에서 Prisma ORM을 도입하여 타입 안전성과 개발 생산성을 향상시켰으며 기존 Notion으로 관리되던 API 문서를 Swagger API 문서로 전환하여 프론트엔드 개발자와의 협업 효율성을 크게 개선했습니다.

투디 서비스의 프론트엔드 개발을 담당하였습니다. 고객측 화면, 기업측 어드민, 운영팀 어드민 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 도입

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