미리보기

Description

• 약 18만 상점과 월 최대 2100만 주문을 라이더와 연결해주는 배달 대행 플랫폼 모바일 웹 버전 개발 및 유지보수

• PM, 디자이너, 백엔드, QA, CX팀 등 다양한 직군과의 협업으로, 약 2주 간격의 스프린트(플래닝, 데모, 회고, 코드 리뷰) 진행

Tech Stack

• Vue3, TypeScript, Pinia, Vuetify, axios, GraphQL

What did I do

• Vue3 컴포넌트를 defineComponent에서 script setup 형태로 리팩토링

  • props 타입 자동 추론으로 코드 가독성 및 유지보수성 향상 (코드 약 10% 감소)

• Javascript에서 Typescript로 마이그레이션하여

  휴먼 에러와 TypeError 감소

  • TypeError Sentry 로그 약 20% 감소

• 소켓을 이용한 라이더 메시지 개발

  • visualViewport를 활용하여 가상 키보드 유무를 체크하여 모바일 UI 최적화

  • ref와 scrollIntoView를 활용한 자동 스크롤 기능으로 사용자 경험 향상

  • Promise.allSettled를 통한 비동기 병렬 호출로

    성능 최적화

• 전역 상태 관리로 모달 관리 최적화

  • 기존 컴포넌트 내부에서 관리하던 모달 상태를 Pinia 전역 상태 관리로 전환하여 일관성과 재사용성 향상

• 플래닝 시 에스트메이트 오류를 줄이고자 타임 트래킹을 도입하여 프로덕트 이해도 상승

  • 에스트메이트 오류율 15% 감소

  • 중복되거나 불

    필요한 백로그 이슈 10% 감소

Description

• 신규 프로젝트인 주소 기반의 연계 배달을 관리하는 백오피스(디렉터/어드민) 페이지 개발

• PM, 디자이너, 백엔드, QA 등 다양한 직군과의 협업으로, 약 2주 간격의 스프린트(플래닝, 데모, 회고, 코드 리뷰) 진행

• 약 100건의 주문을 대상으로 CAT(Closed Alpha Test)와 CBT(Closed Beta Test클로즈 베타 테스트) 진행

Tech Stack

• Vue2, JavaScript, Vuex, Vuetify, axios, GraphQL, StoryBook, SCSS, Jest

What did I do

• graphql-codegen 토큰 업데이트 자동화

  • 기존 수동으로 진행하던 토큰 업데이트 작업을 자동화하여 작업 효율성 향상

  • 로그인 API 호출 후 받은 토큰을 fs 모듈을 활용해 codegen.yml 파일에 자동 반영하도록 개선

  • 토큰 업데이트와 스키마 업데이트를 병렬 처리하도록 패키지 스크립트 개선

• 에러 추적 및 사용자 경험을 위한 에러 로직 개선

  • view, store, router, axios 등의 에러 핸들링을 view 레이어에 통합하여 에러 추적 용이성 향상

  • 모든 에러를 일관되게 처리하기 위해 큐(Queue) 데이터 구조를 도입하여 사용자 경험 최적화

• 사용자 인증 기능 개발

  • 토큰 상태를 관리하는 함수를 만들어 axios의 interceptor를 통해 통신 전후 토큰을 자동 업데이트하여 사용자 경험 향상

• Storybook을 통한 PM 및 디자이너와의 협업 강화 및 컴포넌트 관리

  • Storybook을 도입하여 백엔드 의존성 없이 PM 및 디자이너와 협업 가능

  • 약 100개의 공통 컴포넌트 중복을 제거하여 유지보수 효율성 증대 및 협업 최적화

• 아토믹 디자인 패턴을 활용한 컴포넌트 관리

  • 백오피스 특성상 유사 컴포넌트 생성을 줄이고, Base와 Composite로 컴포넌트를 분리하여 관리 최적화

  • 도입 후 QA 이슈 제로화 달성

• Jest를 도입하여 유틸성 함수에 대한 단위 테스트 진행

  • 빈번히 발생한 QA 이슈 제로화 달성

• 코드 리뷰 프로세스 개선을 통해 QA 통과율 14% 상승

  • 단순 기능 리뷰를 넘어 전체 아키텍처를 점검하여 구조적 결함 사전 예방

  • 일관된 리뷰를 위해 팀 공통 코딩 컨벤션을 구축하여 협업 효율성 및 코드 품질 향상

Description

• 주니어 프론트엔드 역량 강화를 위한 부트캠프

• 2024.09 - 2024.11 (10주)

Tech Stack

• JavaScript, TypeScript, React, Tanstack-Query, Zustand, Tailwind, AWS S3, CloudFront, Github Action

What did I do

• VanillaJS를 활용하여 SPA를 구현하고 라우터, 컴포넌트, 전역 상태 관리의 동작 원리 이해 / Github

• createElement, useRef, useMemo, useCallback 등 React의 주요 함수와 Hook들을 직접 구현하여 동작 원리 숙지

• Custom Hook을 통한 비즈니스 로직 분리 및 FSD(Feature-Sliced Design) 구조 도입으로 클린 코드 학습

• AWS S3와 CloudFront(CDN)를 통한 성능 최적화와 Github Action을 통한 CI/CD 자동화 학습 / Github

Description

• 점핏, 패스트캠퍼스에서 주최하는 사람인 API를 이용한 공고 비교하기 서비스 개발

• 2022.02.21 - 2022.02.23 / 2박 3일

Tech Stack

• Expo, Styled-Components, React-Query, Express, MongoDB, Postman, Heroku

What did I do

• 팀장으로 의사 결정, 시간 산정 및 이슈 분배 담당

• 해커톤 특성 맞는 expo를 이용한 빠른 앱 개발

• Express를 이용한 사람인 API를 커스텀 REST API 개발 및 MongoDB를 이용한 데이터 저장

• PostMan을 통한 API문서 공유 및 Heroku를 통한 서버 배포