React, Typescript 기반의 7년차 프론트엔드 엔지니어로 일하고 있으며, 영업사원을 위한 배정시스템 개발 및 운영을 담당하고 있습니다. 상호간 적극적인 소통을 통해 이슈를 제기하고 해결하며 성취감을 느끼고 있습니다. 주도적인 업무를 진행할 수 있는 환경을 선호합니다.

B2C, 어드민 서비스의 전문성을 갖췄습니다.

코웨이에서 5년간 6개의 서비스를 구축 및 운영하였습니다. 기술 스택부터 선정해 아키텍처 구조 설계한 경험이있습니다. '통합회원'에서 안정적인 운영 업무와 마이그레이션 이후 회원수 300K명, MAU 5K명을 달성했으며, 미국 신사업 어드민에서 서비스 1년 개발기간을 거쳐 성공적인 오픈과 데이터독 검증을 통해 FCP/LCP 지연 구간을 최대 33%개선한 경험이 있습니다.

'다양한 경험'을 통해 저 자신의 강점을 강화시키고 있습니다.

AX 챌린지를 통해 AX함양을 쌓아가고 있고, 파트에 로컬 RAG와 하네스 구조, 퍼블리싱 스킬을 추가하여 에이전트 코딩 정확도를 높이고 있습니다. 또한, 퍼블리싱 내재화를 통해 간단한 퍼블리싱 작업을 내재화하여 외주비용을 최소화 하는데 기여했습니다.

소통을 통해 서비스 품질을 높여왔습니다.

'적극적인 소통'은 개발 오류방지와 서비스 품질을 강화하는데 있어 가장 중요하다고 생각합니다. FE간의 기술 스택을 선정하는데 있어 소통을 거듭하여 의견 공유 및 반영하여 코드품질을 높이고 있습니다. '데이터독 RUM'을 연동하여 기획 및 백엔드와 적극적인 소통으로 언급되지 않던 병목구간을 찾아 이슈업을 하여 해결하고 있습니다.

Work Experiences.

2021. 09 - 현재

코웨이

Frontend Developer · 서울

배정 어드민 시스템

2022. 10 - 2024. 01, 2026. 04 - 현재

작업자, 일정, 이관과 배정 현황을 지도/목록/캘린더로 확인하고 조정하는 내부 운영 도구.

  • 배정 시스템의 실시간 모니터링 화면과 서비스 매니저의 작업 현황/이관/구간 설정 기능 개발.
  • DevTools Heap Snapshot으로 지도 조회 5회 실측, 지도 인스턴스를 싱글턴 방식으로 전환해 조회당 약 290개씩 누적되던 detached DOM을 0개로 줄여 반복 누적 제거.
  • Recoil Selector를 기능별 Zustand Store로 재구성하고 서버 상태를 TanStack Query로 분리, 유닛 테스트와 MSW로 기존 동작을 검증해 마이그레이션 완료.
React, TypeScript, Zustand, Recoil, TanStack Query

통합배정판

2026. 01 - 현재

일 5K~10K뷰, 피크 30K뷰 규모의 설치 업무 배정 플랫폼에 신규 제품 정책 및 성능 모니터링 체계 구축.

  • 에어컨, 소파, 모션 매트리스 등 신제품 배정 정책을 반영한 운영 화면 개발.
  • Datadog RUM 대시보드와 모니터링 체계를 구축해 운영 판단 기준 마련.
  • 화면설계서, 회의록과 인수인계 문서에 대한 업무 히스토리 및 정책 변경 이력을 빠르게 파악하기 위해 벡터화한 로컬 DB RAG 환경 구축.
React, TypeScript, TanStack Query, Datadog RUM, Vite, MCP, ChromaDB

통합회원 React 마이그레이션

2025. 11 - 2026. 05

30만 회원 규모 통합회원의 Keycloak 의존 로그인/회원 화면을 React/TypeScript 기반 인증 흐름으로 전환.

  • Keycloak FreeMarker 템플릿과 리다이렉트에 의존하던 인증 단계를 신규 API 응답 기반의 React 화면 제어 구조로 마이그레이션.
  • 일반/SNS/중복 계정 로그인, 본인인증, 비밀번호 변경 및 reCAPTCHA의 화면 분기와 오류 처리를 프론트엔드 로직으로 재구성해 백엔드 의존도와 코드 복잡도 감소.
  • 약관, CSRF/XSRF 토큰 대응과 로그인 예외 케이스 테스트/문서화를 통해 React 전환 이후 운영 안정성 확보.
React, TypeScript, Zustand, Zod, Vite, SCSS, Datadog RUM, Vitest, Cypress, AWS

미국 신사업 어드민

2024. 04 - 2025. 10

미국 법인의 WMS 물류 흐름과 회계 대사/전표/원장을 중심으로 OMS 및 작업 관리를 지원하는 통합 백오피스.

  • 재고실사 및 조정 화면을 개발해 재고 흐름을 확인하고 제어하는 환경 구축.
  • 출고/배차/창고이동/재고 추적 기능을 개발해 출고부터 입고까지의 물류 흐름을 어드민에서 제어하는 환경 구축.
  • 전표/원장/합계잔액 시산표/반제 기능을 개발해 회계 업무 프로세스 구축.
  • TanStack Query 호출/캐시 구조 개선으로 화면 지연을 최대 약 3초에서 1초로 단축.
React, TypeScript, TanStack Query, Recoil, MUI, React Hook Form, Sentry, Vite

통합회원 서비스

2023. 05 - 2024. 04

레거시와 신규 서비스의 회원을 통합하는 30만 회원/DAU 약 5K 규모의 B2C 플랫폼.

  • 회원가입, 로그인, 계정 찾기, 마이페이지와 회원 마이그레이션 등 핵심 사용자 흐름 개발.
  • WCAG 2.1 기준 반영 및 디바이스/브라우저별 예외 처리를 통한 고객용 인증 화면의 접근성과 호환성 개선.
  • DDD 패턴을 적용해 회원가입/OTP/계정 모델과 Hook을 도메인 단위로 분리하여 신규 기능 추가 시 변경 영향 범위 축소.
  • Datadog 기반 디바이스/OS/언어별 런타임 오류 추적, QA 예외 케이스를 Jest/Cypress 테스트로 전환해 재발 방지.
Vue 3, TypeScript, Pinia, SCSS, Datadog, Jest, Storybook, Cypress, AWS코웨이몰 ↗

실시간 코디매칭 서비스

2022. 04 - 2023. 11

약 2만 명의 영업직원과 고객을 연결하고 신청/대기/수락/실패/재시도 상태를 Polling으로 처리하는 비대면 매칭 플랫폼.

  • Vue 기반 레거시 화면을 React로 전환하고 반복 UI와 비즈니스 로직을 공통 컴포넌트/Custom Hook으로 재구성.
  • TanStack Query의 서버 상태와 Jotai의 화면 상태를 분리하고 API 응답/호출 순서를 조정해 상태 불일치 구간 개선.
  • CS 사례와 Datadog RUM 기반 오류 추적, 신청부터 재시도까지의 핵심 흐름을 Cypress E2E 테스트와 CI/CD에 연결.
React, TypeScript, TanStack Query, Jotai, Datadog RUM, Cypress, Vite, AWS코디매칭 서비스 ↗

통합회원 어드민

2021. 11 - 2024. 05

코웨이몰과 ioCare 등 여러 서비스의 일반/휴면 회원, 약관, 로그와 관리자 권한을 관리하는 내부 운영 도구.

  • 프로젝트 초기 환경 구축과 회원/휴면회원 조회, 통계, 회원 검색 필터 및 관리자 설정 기능 개발.
  • 약관 에디터와 통합회원 약관 매퍼 개발을 통해 별도 퍼블리싱 없는 약관 작성/배포 환경 구축.
  • 사내 SSO 로그인과 ISMS-P 심사 대응.
React, TypeScript, Redux Toolkit, Redux Thunk, Emotion, AWS, Cypress, Jest

2020. 02 - 2021. 09

KSNET

Web/App Developer · 서울

KSTA Mobile 및 사내 기술 공유 서비스

2020. 04 - 2021. 09

가맹점 매출 정보를 확인하는 KSTA Mobile 리뉴얼 및 사내 개발 이슈와 기술 자료 공유 서비스 구축.

  • 모바일 환경의 VAN/PG 매출 정보 조회 화면 개발 및 서비스 유지보수.
  • 기술본부의 개발 이슈 관리와 영업 지원을 위한 사내 웹 페이지 구현.
JavaScript, React, Redux, jQuery, HTML5, CSS

Other Experience.

포트폴리오 및 이력서

  • Next.js 기반 포트폴리오와 웹 이력서를 직접 설계하고 운영하고 있습니다.
  • 프로젝트 상세 내용을 Markdown으로 관리하고 동적 라우팅, sitemap, robots 설정을 적용했습니다.

디자인 시스템

  • Primitive token과 semantic token을 분리해 확장 가능한 디자인 토큰 구조를 설계했습니다.
  • 여러 앱에서 공통 값을 재사용할 수 있도록 workspace 패키지로 관리하고 있습니다.

모노레포 구성

  • Next.js와 Vite 앱을 pnpm workspace 기반 모노레포에서 함께 관리하고 있습니다.
  • 공통 TypeScript 설정과 패키지를 공유하고 workspace filter로 개발·검증 명령을 실행합니다.

Skills.

현재 업무 또는 사이드 프로젝트에서 사용했던 기술들입니다.

Frontend

  • Next.js, TanStack Query
  • Tailwind CSS, Styled Components, Sass/SCSS, Storybook
  • Cypress, Sentry, Datadog(RUM, Dashboard, APM)

React

  • 재사용성 높은 컴포넌트 생성과 컴포지션으로 관심사 분리를 준수합니다.
  • UI는 스토어, 서버 데이터는 Tanstack Query를 활용하여 스토어 처리를 최소화합니다.
  • Atomic, Composition, FSD 등 다양한 디자인패턴 경험을 통해 최적의 디자인패턴을 활용하려고 합니다.

Typescript

  • 타입을 활용하여 빌드 및 컴파일 에러를 사전에 방지합니다.
  • 유니온, 인터섹션 등 유틸리티를 활용하여 타입 구성을 합니다.

Infra

  • AWS S3, CloudFront, Lambda를 활용할 수 있습니다.
  • CloudFront를 통해 내/외부망 연결 및 커스텀 헤더를 통해 캐싱제어 등 경험이 있습니다.

Education.

2020.02 성결대학교 정보통신공학부 졸업