이정우

프론트엔드 개발자입니다.

올바른 질문이 정답보다 중요하다고 생각합니다.

Contact

Email: itsme@jwlee.in

Phone: 010.4573.2605

Github: https://github.com/leejw0803

LinkedIn: Jungwoo Lee | LinkedIn

Record

(주) 푸드대시

프랜차이즈 디지털 솔루션을 제공하는 스마트 파트너

Front-End Developer 2023.08 ~ 2025.11

Development

가맹점 어드민 POS 기능 추가

2025.02 ~ 2025.04

✔ 문제 정의

  • 신규 프랜차이즈 론칭과 함께 주문앱 내 POS 기능을 직접 제공해야 하는 요구 발생
  • 결제 전표 출력·주문 수락/거절·배달 대행사 연동 등 POS 핵심 기능이 필요

    • ✔ 목표

  • 프린터기 연동을 위해 Windows에서 안정적으로 동작하는 데스크탑 앱 개발
  • 웹뷰(React)와 WPF 간 양방향 통신 구조 구축
  • 주문 현황 및 매장 운영 기능을 실시간 연동(WebSocket) 기반으로 구현
  • 가맹점/프랜차이즈 간 기능·UI 분기를 고려해 프로젝트 분리

    • ✔ 상세 기여

  • WPF 기반 데스크탑 환경 구축
    1. POS 기기 대부분이 Windows 환경이므로 Electron/Flutter 대신 WPF 선택
    2. 테스트 환경 구축 후 1주 내로 프린터기 연동 성공
  • 웹뷰 기반 가맹점 어드민 개발
    1. 기존 어드민을 분리하고 POS 기능 중심의 신규 어드민 개발
    2. 실시간 통신을 위해 stompjs 기반 WebSocket Provider 구축
    3. 메시지는 Zustand로 전역 관리하여 상태 일관성 확보
  • 신규 UI/디자인 시스템 적용
    1. shadcn/ui + Tailwind 기반 UI 시스템 도입

    • 🛠 WPF, React, Stomp.js, Zustand, shadcn/ui, Tailwind

    어드민 디렉토리 구조 개선 (Feature-Sliced Design)

    2024.03 ~ 2024.06

    ✔ 문제 정의

  • Context 기반 개발로 인해 상태가 한 컨텍스트에 과도하게 집중
  • 비즈니스 로직·UI가 혼재되어 의존성 파악과 재사용성 저하
  • 기능 확장 시 로직 위치 결정에 혼란 발생

    • ✔ 목표

  • Context/Provider 의존성을 줄이고 Zustand 기반 단일 책임 스토어로 분리
  • FSD(Feature-Sliced Design) 도입으로 레이어·슬라이스·세그먼트 간 명확한 의존성 규칙 확립

    • ✔ 상세 기여

  • 전역 상태 관리 개선
    1. 기존 대형 Context를 도메인 단위 Zustand Store로 분리
    2. 로직 위치가 명확해져 신규 기능 추가 생산성 향상
  • FSD 도입 및 구조 재정립
    1. shared/entity/feature/widget/pages/app 구조로 분리
    2. 비즈니스 로직과 순수 UI 분리
    3. 내부 컴포넌트 의존성을 - prefix로 정리하여 구조적 명확성 향상

    • 🛠 pnpm, Turborepo, Zustand, FSD

    푸드대시 프랜차이즈 어드민 개발

    2023.11 ~ 2023.12

    ✔ 문제 정의

  • 기존 Next.js 기반 외주 개발물은 SEO 불필요, CRUD 중심이지만 SSR 구조로 과도한 리소스 소모
  • 여러 프랜차이즈에 동일 플랫폼을 배포해야 하므로 모듈화·확장성 필요

    • ✔ 목표

  • React로 재구축하여 성능·배포 효율 개선
  • 공통 기능은 재사용하고 가맹점별로 UI/정책이 다른 구조 대응

    • ✔ 상세 기여

  • React + Vite 기반으로 빌드 및 배포 속도 개선
  • React Query 기반 데이터 흐름 확립
  • 단방향 데이터 플로우 설계 및 코드 재사용성 향상
  • Monorepo(Turborepo) 기반 다프랜차이즈 관리 구조 설계

    • 🛠 React, Vite, React Query, Zustand, Tailwind, Turborepo, pnpm

    푸드대시 Front-End 표준 스택 수립

    2023.08 ~ 2023.09

    프론트엔드팀의 첫 인하우스 개발자로서 아키텍처와 스택 표준화 주도.

  • React / Next.js / Typescript 중심의 기본 스택 구성
  • Zustand + React Query 조합 채택
  • Tailwind 도입(SSR 스타일 깨짐 및 CSS-in-JS 성능 이슈 해결)
  • Axios → fetch로 이동 전략 마련 (App Router 대응)
  • Monorepo 기반 운영 방향성 확립

    • (주) 마로마브

    30만+ 유저의 아두이노 교육 앱

    Web Team Lead 2021.05 ~ 2023.07

    Development

    신규 서비스: C Editor

    2023.04 ~ 2023.07

    ✔ 문제 정의

  • 서비스 로드맵에 따라 앱 내 C 언어 교육 과정을 새롭게 신설하면서, 이를 위한 전용 에디터 개발이 필요해짐.

    • ✔ 목표

  • 웹뷰 환경에 최적화된 C 언어 전용 에디터 개발
  • 초기 로딩 속도와 개발 생산성을 고려한 경량 환경 구축

    • ✔ 상세 기여

  • 기술 스택 선정
    1. React + Vite
      • 앱 내 WebView에서 동작하므로 SEO 불필요 → React 선택
      • 빠른 HMR 덕분에 편한 개발자 경험(DX) 제공
    2. Zustand
      • 단순하고 러닝커브 낮은 전역 상태관리
      • 코드량 감소 및 유지보수성 향상
  • 주요 기능 개발
    1. WebView 환경에서도 안정적으로 동작하는 C Editor UI 구현
    2. React Router 기반 학습 플로우 구성
    3. 필요한 상태를 MVI 패턴으로 구조화하여 유지보수성 확보

    • 🛠 React.js, Vite, SWC, SWR, Zustand, React Router DOM 6, MVI

    Front-end 리소스 최적화

    2022.12 ~ 2023.07

    ✔ 문제 정의

  • 빠르게 확장되는 서비스 개발 속도에 맞지 않는 코드 구조
  • UI 및 설정 파일 중복으로 인한 유지보수 비용 증가
  • 서비스마다 다른 스택 사용 → 높은 컨텍스트 스위칭 비용
  • 버그 추적이 어려운 개발 부채 증가

    • ✔ 목표

  • 서비스 전반의 코드·UI·설정을 일원화하여 개발 효율 극대화
  • 공통 자산을 모노레포로 통합하여 중복 제거 및 품질 개선
  • 지속 가능한 Git 전략 구축

    • ✔ 상세 기여

  • Monorepo 구축 및 UI 통합
    1. pnpm + Turborepo 기반 Monorepo 환경 구축
    2. 각 서비스의 UI, config, 공통 로직을 패키지로 분리
    3. 디자이너와 협업하여 자체 디자인 언어 MPL(Make Product Language)를 시스템화하고 패키징 후 배포
  • 기존 Editor 서비스 리팩토링
    1. 기존 에디터는 개발 부채가 심각해 신규 프로젝트로 분리 후 재구축
    2. Scratch / Blockly 기반의 새로운 블록 코드 에디터 개발
  • 품질 개선을 위한 테스트 도입 시도

    • 🛠 pnpm, Turborepo, Storybook, Vitest, React Testing Library, Zustand, TBD

    블록 에디터 속도 개선

    2022.04 ~ 2022.06

    ✔ 문제 정의

  • Desktop/Mobile 버전의 코드 중복 및 비효율적 번들 구조
  • Mobile 에디터 초기 로딩 속도 저하 심각
  • Webpack 번들 크기 증가로 사용자 경험 악화

    • ✔ 목표

  • 에디터 초기 구동 속도 개선
  • 번들 최적화를 통한 서비스 체감 성능 향상

    • ✔ 상세 기여

  • 중복 코드 제거 및 번들 구조 개선
    1. Monorepo로 통합하여 Desktop/Mobile의 중복 제거
    2. block/device/translation 정보 등을 패키지화하여 관리
  • Bundle Analyzer로 문제 영역 분석
    1. Webpack4 + analyzer로 번들 병목 구간 확인
    2. 사용되지 않거나 중복된 모듈 제거
  • gzip 기반 전송 최적화
    1. CloudFront/S3 환경에서 10MB 미만 gzip 정책 대응
    2. 빌드 단계에서 gzip 압축을 적용하도록 직접 변경하여 전송 속도 개선

    • 🛠 React.js, Webpack4, CloudFront, S3, Redux, pnpm, Turborepo

    DB Migration 프로젝트

    2021.09 ~ 2021.11

    ✔ 문제 정의

  • Firebase(NoSQL)를 RDB처럼 오용하여 데이터 무결성·성능 문제 발생
  • 잦은 담당자 변경으로 데이터 변경 이력 추적 어려움
  • 서비스 확장성을 위해 RDB로 구조 재정립 필요

    • ✔ 목표

  • RDBMS 기반으로 전환하여 데이터 무결성 확보
  • 기존 데이터 전환(Migration) 및 API 서버 구축
  • 성능 및 유지보수 안정성 향상

    • ✔ 상세 기여

  • API 서버 스택 설계 및 구축
    1. NestJS
      • JS 기반 백엔드 개발자와 협업 용이
      • Express 대비 구조적이고 유지보수성 높음
    2. PostgreSQL
      • 풍부한 내장 함수 및 Array 지원
    3. TypeORM
      • TS 호환성과 낮은 러닝커브 고려하여 선택
  • Firebase → PostgreSQL Migration 개발
    1. Firebase 데이터를 읽어와 스키마에 맞게 변환하는 Migration 코드 작성
    2. DB 구조 정의 및 초기 인프라(테이블·관계·인덱스) 설계
  • 초기 테스트 코드 작성
    1. jest 기반 API 기능 검증 테스트 구성

    • 🛠 PostgreSQL, TypeORM, Nest.js, RDS, Jest

    Leadership

    개편한 날 (Refactoring Day) 주도

    2023 ~

  • 팀 전체의 기술 부채 정리를 위한 정기 리팩토링 데이 기획·운영
  • 개발팀 생산성·품질 향상 및 동기부여 강화

    • 웹팀 온보딩 시스템 구축

    2022 ~

  • 신입 온보딩을 위한 React 기반 To-do 과제 제작
  • 팀 표준 스택과 개발 흐름을 빠르게 익히도록 온보딩 경험 개선

    • 웹 팀 리소스 관리

    2021 ~

  • 스프린트 운영 및 회고 문화 정착
  • Notion 기반 스프린트 시스템 구축

    • Front-End Developer

    2020.11 ~ 2021.5

    Development

    MAKE Dashboard 서비스 유지보수

    2020.11 ~

    ✔ 목표

  • 비즈니스 로드맵에 맞춰 MAKE Dashboard 서비스의 기능을 추가
  • 버그를 수정하고 피드백 반영

    • ✔ 상세 기여

  • 디자인 시스템을 활용한 웹 사이트 대시보드 UI 개선
  • 대시보드 서비스 페이지 모바일 반응형 UI 개발

    •  🛠  React.js, styled-components, Redux, Firebase, GCP

    Education

    • 건국대학교 컴퓨터공학과 (2014.03 ~ 2021.02)

    Activity

    매새일: 매일매일 새로워지는 일상

    독서모임 | 2023.01 ~

    • 책을 통해서 일상을 바꿔보자는 취지로 매달 진행
    • 돌아가면서 한 권씩 책을 선정해 모두가 읽고 얻은 인사이트를 만나서 공유

    Loopback

    개발자 회고 모임 | 2022 ~

    • 반기 / 매년 마다 한 번씩 오프라인으로 모여서 진행하는 개발자 회고 모임
    • 각자의 시간을 스스로, 그리고 서로가 돌아보면서 동기부여의 시간을 갖기 위해 진행 시작