미리보기

프론트엔드 번들러 교체 및 CI/CD 속도 최적화

• 기존 Webpack → Rsbuild로 번들러 마이그레이션, 레거시 호환성 검토 및 적용

• GitHub Actions 기반 CI/CD 파이프라인 개선, node_modules 및 의존성 캐시 설정

• 그 결과 전체 빌드/배포 시간 11분 → 4분으로 63% 단축

모노레포 유지보수 및 다중 FEW 프로젝트 통합 관리

• 풀필먼트/파트너/어드민/홈페이지/OCMS 등 여러 프론트엔드 패키지를 단일 모노레포로 통합

• 프로젝트 변경 감지 시 의존성 기반 선별적 재빌드 및 배포 전략 수립

잠재적 이슈 선제 대응

• 타팀 프로젝트에서 발생한 Babel 버전 변경에 따른 관련 빌드 이슈를 “남 일”로 넘기지 않고 직접 조사

• GitHub 이슈 및 변경 로그를 통해 원인 규명(browserslist 규칙 변경), 해결책 공유로 자사 플랫폼에서도 잠재 이슈 예방

Yarn Workspaces 기반 Monorepo 환경 통합 및 앱 간 종속 빌드 구조 설계

• 화주용 Fulfillment 앱과, 화주관리용 Partner 앱을 Yarn Workspaces 기반 단일 모노레포로 통합

• Partner 앱은 Fulfillment 앱의 임포스터 모드 및 관리자 기능을 포함하고 있어, Fulfillment 앱 변경 시 Partner 앱도 함께 빌드/배포되도록 의존 관계 구성

• 앱 간 변경 감지 및 선별적·연쇄적 빌드 파이프라인 구성, 배포 최적화

레거시 JS → TypeScript 마이그레이션 진행

• 유지보수성이 떨어지는 레거시 JS 컴포넌트들을 점진적으로 TS 기반으로 전환

• 마이그레이션 이후 신규 기능 도입 시 타입 안정성 확보 및 런타임 오류 감소

사내 해커톤 2위 수상 – RRWeb 기반 세션 리플레이 기능 제안 및 구현

• 해커톤 중 전략적 피봇 및 빠른 실행

  • 당초 계획한 악성 재고 처리 아이디어의 실현 가능성이 낮음을 판단, 해커톤 기간 중 과감히 피봇팅 제안

  • RRWeb을 활용한 사용자 세션 기록 기능을 제안하고 프로토타입 개발

• 장애 재현, 디버깅 속도 향상, 고객 지원 품질 개선을 위한 기반 기능으로 평가받아 2위 수상

• 세션 리플레이 기능의 필요성을 인정받아 Sentry 도입의 단초가 됨

지도 렌더링 성능 개선 및 사용자 경험 향상

• 3000개 이상의 다각형(Polygon)을 렌더링 시 발생하던 브라우저 응답 중단 현상을 분석하여, 호출 스택의 장기 점유 문제로 인한 병목을 확인하고, 이벤트 루프를 이용한 재귀적 삭제 방식으로 개선

• 페이지 전환 시 렌더링 블로킹 현상 제거하여 사용자 대기 시간 최대 1분 → 0초로 단축

• 기존 바닐라 자바스크립트를 이용한 지도 Element 관리를 React 생명주기 기반으로 컴포넌트화하여 코드 복잡도 감소 및 재사용성 확보

빌드 최적화를 통한 CI 안정성 확보 및 생산성 향상

• AWS 빌드 실패 원인을 시각화 도구와 순환 참조 분석 도구로 진단하고, 중복 모듈 제거 및 공통화 수행

• 그 결과 빌드 용량 45% 감소, 빌드 시간 28% 단축, AWS 환경 메모리 오류 해결

• 모듈 간 의존성 최적화로 이후 유지보수 효율성 향상

모노레포 환경 구축 및 공통 패키지 분리 설계

• TMS 프로젝트에 Yarn Workspaces 기반의 모노레포 구조 도입

• 유사 프로젝트 간 중복 코드 제거 및 공통 유틸리티 패키지 분리, 팀 간 코드 공유 환경 마련

• 신규 프로젝트 생성 시 개발 환경 커스터마이징 가능하도록 스캐폴딩 템플릿 고도화

기술 스택: React, Handsontable, TypeScript

내용:

• 주요 화주 요청에 따라 Excel 스타일의 붙여넣기 기반 대량 주문 등록 UI를 개발

• Jspreadsheet와 Handsontable을 비교 분석한 결과, 셀 유효성 검증 기능과 인터페이스 다양성에서 Handsontable이 우위에 있다고 판단하여 채택

• MIT 라이선스 마지막 버전(6.2.2)을 검토 후 무료 상업적 사용 가능한 범위 내에서 적용

• Handsontable을 기반으로 셀 단위 유효성 검사, 포커스 흐름 제어, 동적 행 추가, 키보드 입력 최적화 등 커스터마이징 적용

• Custom Renderer/Editor를 통해 날짜 입력을 외부 DatePicker와 통합

• 재고, 유통기한, 로트번호 등 실시간 검색 기반 자동완성 기능 구현

• 유효성 로직 삽입

성과:

• 화주 요구에 맞춘 Excel 호환 UX 제공, 붙여넣기 입력 흐름으로 작업 시간 단축

• 사용자 오류 감소 및 운영팀 대량 주문 등록 효율성 향상

기술 스택: GitHub Actions

내용:

• GitLab에서 GitHub로 코드 저장소 이전에 따라 기존 GitLab CI 기반 빌드 파이프라인을 GitHub Actions로 전면 재구성

• 기존 Shell 스크립트 기반 로직 중 일부를 Node.js 기반 유틸로 변환, 프론트엔드 개발자가 이해하기 쉬운 DX 환경 제공

• 모노레포 프로젝트의 경우 dorny/paths-filter@v3를 이용하여 코드 변경 영역을 감지하고, 변경된 프로젝트에만 빌드 수행되도록 파이프라인 최적화

성과:

• CI 환경 전환 시에도 기능 중단 없이 안정적인 빌드 운영 유지

• 프론트엔드 개발자 중심의 빌드 로직으로 가독성과 유지보수성 향상

• 불필요한 빌드 방지를 통해 전체 워크플로우 리소스 사용 최적화

역할: CI/CD 및 빌드 환경 개선 주도

기술 스택: Rsbuild, GitHub Actions

내용:

• 기존 Webpack → Rsbuild로 전환하며 레거시 호환성 검토

• node_modules 및 의존성 기준 github action 캐시 전략 수립, 파이프라인 재구성

성과:

• 전체 CI/CD 시간 11분 → 4분 (63%) 단축

• 레거시 환경과의 충돌 없이 마이그레이션 완료

역할: 아키텍처 설계 및 프론트엔드 구축 전반 주도

기술 스택: TypeScript, React, Yarn Workspaces, GitLab CI

프로젝트 개요:

기존 내부 어드민 기능을 외부 파트너(물류센터 소유 고객사)에게도 제공해야 하는 새로운 비즈니스 요구에 따라,

Fulfillment와 Admin 기능을 통합한 파트너 전용 애플리케이션을 신규로 구축했습니다.

핵심 기여:

• Fulfillment, Admin 애플리케이션을 Yarn Workspaces 기반 모노레포 구조로 통합,

  신규 앱인 Partner가 공통 모듈을 공유하며 두 앱의 기능을 조합해 동작하도록 설계

• Git Submodule로 구성된 공통 모듈(frontend-module)의 빌드 구조를 분석,

  Turborepo, Nx 도입은 과도하고 실익이 없다고 판단, 심플한 Yarn 기반 구조로 설계

• 임포스터 모드까지 포함한 POC를 1주 내 빠르게 구현, 비즈니스 부서에 가능성 전달

• GitLab CI 기반 브랜치 감지 및 변경 추적 자동화,

  Fulfillment 또는 모듈 변경 시 Partner 앱까지 연쇄적으로 자동 빌드 및 배포되도록 구현

성과:

• 센터플렉스 기반의 신규 비즈니스 론칭에 필요한 인프라 제공 완료

• 물류센터 시스템 제공 모델을 통해 센터 기반 고정비 없이 고객사 확장 가능, 6개의 고객사가 센터플렉스 모델 이용 중, 전체 물량의 15-20% 담당

• 현재는 센터플렉스 모델 뿐만 아닌 다양한 비즈니스에서 파트너 앱 기반 Fulfillment 확장 비즈니스가 활발히 운영

기술 스택: TypeScript, React, Naver Map API

주요 내용

• 3000개 이상 폴리곤 렌더링 후 제거시 호출 스택이 과점유되어 브라우저 전환 시 응답 없음 발생

• 삭제, 추가 연산을 이벤트 루프에 분산시키는 재귀적 처리 방식으로 성능 병목 제거

성과

• 페이지 전환 응답 시간 1분 → 1초로 개선, 렌더링 중단 현상 제거

• 지도 UI 개발 시 코드량 30% 감소, 팀원 재사용성 증가