미리보기

Earlivery는 식/음료 제조 현장의 문서 관리 및 스마트 저울(HW) 기반의 VMI 솔루션으로, 단독으로 서비스의 프론트엔드를 개발하며 아래의 업무를 수행했습니다.

Earlivery 문서 관리 서비스 운영 및 개선

• 사용 기술: Next.js(v13-v14), Recoil, Storybook, Emotion, Cypress, Jest, React-Hook-Form, TanStack-Query, zod, ts-rest, TypeScript

• Next.js v13 Page Router 기반의 Screen 단위 개발 및 유지보수

  • 구독 상품별 접근 권한 세분화 등 테넌트 간 데이터 격리를 강화하기 위해 BFF(Api Route) 도입 및 SSR 적용을 위해 Next.js v14 App Router 기반으로 마이그레이션 진행 중

  • API 명세 동기화 과정에서 백엔드 개발자와 상호 의존성을 줄이기 위해 ts-rest 사용한 API Contract 기반으로 점진적 마이그레이션 진행 중

• 디자인 시스템 구축 및 Storybook 사용한 컴포넌트 문서화

  • 디자이너 1인과 협업하며 컬러 팔레트, 그리드 시스템 등 스타일 가이드 정립

  • shadcn/ui 컴포넌트 컬렉션을 기반으로 디자인 시스템 구축 진행 중

• 로그인 등의 핵심 사용자 시나리오를 식별, Cypress를 사용한 E2E 테스트 자동화 진행 중

• 단위 테스트 작성과 병행해 점진적 리팩터링 진행

  • 기능적 응집도가 낮은 컴포넌트 내의 여러 상태로 인한 불필요한 재렌더링 및 깊은 Props Drilling을 개선하기 위해 전체 컴포넌트의 추상화 수준 재설정 및 복잡한 화면 요구사항 충족에 Atomic(Recoil) 기반 전역 상태 관리, Render Props 등 다양한 상태 공유 패턴 적용

  • 입력 필드 유효성 검증에 zod 도입, 비동기 데이터 처리 흐름 제어에 TanStack Query 도입과 함께 Key Factory를 구성해 프론트엔드 구현의 일관성 강화

  • 다양한 환경에서의 원활한 이용을 위해 중복 코드를 식별, 제거하며 Webpack Terser Plugin -> SWC config를 통한 minify로 각 엔트리 포인트 별 chunk 사이즈(Gzipped)를 12-18KB 에서 4-7KB 수준으로 축소

  • 리팩터링이 서비스 안정성을 해치지 않도록 Jest 사용한 비즈니스 로직의 단위 테스트 작성과 병행

Earlivery 스마트 저울 서비스 통합

• 사용 기술: Next.js(v13), Recoil, Emotion, React-Hook-Form, TanStack-Query, zod, TypeScript

• 레거시 API를 전체 수정하지 않고 기존 서비스의 화면 요구 사항을 충족하기 위해 useQueries 훅을 사용한 병렬 fetch 결과를 combine 옵션으로 결합하여 사용, 데이터 직렬화에 Adapter 패턴을 적용해 촉박한 PoC 진행 일정 내 완수

• 통합 과정에서 사용 라이브러리(zod, TanStack Query, React-Hook-Form), 스타일 가이드 및 UI 컴포넌트 등을 기존 서비스와 Sync하며 레거시 청산

• 대형 제약바이오사 등을 대상으로 PoC 성공 및 전사 도입 논의까지의 과정에 기여, 클라이언트 측 xlsx 파일의 파싱 및 Bulk Upload, SAP 시스템간 연동 등 VoC 기반 후속 개발 진행 중

웹 퍼블리셔 2인과 함께 서비스의 프론트엔드를 개발하며 직접 기여한 부분은 아래와 같습니다.

CRM 시스템 SaaS 전환

• 사용 기술: Next.js(v12-v13), Redux(Redux-Toolkit), React-Query, Recoil, NestJS, TypeScript

• 기존 CRM 시스템이 외주 개발을 통해 제공되며 건당 50만 원 수준의 외주 비용과 운영 및 관리 측면의 불안정성 문제를 식별, Amazon AWS 및 Next.js Dynamic Route 기반의 멀티 테넌시 아키텍처를 구축한 SaaS 형태의 전환을 기획

  • Next.js v12 Page Router의 경로 기반 -> v13 App Router 및 미들웨어를 사용한 서브도메인 기반으로 테넌트별 동적 라우팅 구현

  • Next.js API Route를 BFF로 활용해 세션 검증, 맞춤형 서비스 제공으로 테넌트 간 데이터 분리 강화

• NestJS 기반 고객 데이터 수집 공개 API 개발 및 Amazon AWS 인프라 엔지니어링

• 외주 개발 의존을 완전히 제거하고, 재직 기간 중 대형 생활용품 제조사, 지방자치단체 및 공공기관 등의 고객을 대상으로 100건 이상의 서비스를 제공하며 약 5,000만 원 수준의 외주 비용 절감

백오피스 개발

• 사용 기술: Next.js(v12), React, TypeScript

• 사전청약 페이지 관리 CMS 개발

  • 기존 단순한 사전청약 페이지 제작에 웹 퍼블리셔와 디자이너가 주 3~4시간의 단순 루틴 업무를 수행하여 이를 비효율적인 업무로 식별, Next.js Dynamic Route[SSG(ISR)] 기반의 메인 페이지 및 React 기반의 CMS를 개발

  • 운영 인력이 CMS를 통해 관리할 수 있도록 개선해 웹 퍼블리셔와 디자이너의 업무 부담을 경감하고, 기존 대비 150% 수준의 서비스를 제공하는데 기여

• React 기반의 마케팅 핵심 지표 분석, 광고 매체비 정산 시스템 등 백오피스 개발

기존 비즈니스 레거시 청산 및 운영, 유지보수

• 사용 기술: NestJS, React, TypeScript, Amazon AWS

• PHP 5.6 -> NestJS 기반으로 마이그레이션

• Git을 사용한 버전 관리 및 Github Actions 사용한 배포 자동화 도입

• AWS S3 사용한 Static assets, page 관리 및 CloudFront 사용한 CDN 도입 및 React 기반 CMS 개발

• 개별 호스팅 서비스에서 Amazon AWS 기반으로 마이그레이션, 월 60만 원 수준의 비용을 10만 원 수준으로 절감

창업 초기 스타트업에 첫 번째 개발자로 합류하여 Amazon AWS 인프라 엔지니어링, Python 기반의 데이터 스크래핑 자동화 시스템 구축 및 웹 풀스택 개발을 수행하였습니다.

백엔드 개발자 1인, 프론트엔드 개발자 2인과 협업하였으며 직접 기여한 부분은 아래와 같습니다.

데이터메니티 RMS(수익 관리 시스템) 개발 및 운영

• Flask, Jinja2 템플릿 엔진 기반 MPA 개발 ->

  HTML, CSS, JS 기반 클라이언트 - 서버(Flask-RESTful) - 데이터베이스(RDS) 3계층 구조로 전환

• OTA(Online Travel Agency) 스크래핑 자동화 개발

  • AWS EventBridge, Batch, ECR, ECS, Fargate 인스턴스 사용한 배치 스크래핑 자동화 시스템 구축 및 객실 가격 정보 스크래핑 및 전처리 로직 개발

• 첫 번째 개발자로 합류하여 회사의 기술 기반 전반 마련에 기여

  • 시스템 전반의 설계 및 인프라 엔지니어링, 기획 및 디자인에도 주도적으로 참여

  • 4명 규모의 개발 조직으로 비대면 서비스 바우처 공급기업 선정 및 기술신용평가 T-4 획득에 기여

  • Amazon AWS, Vue.js 및 TypeScript 등의 기술 리서치 및 사내 교육 진행

프로젝트 개요

매년 관심있는 기술 연구 및 웹 포트폴리오를 개발하고 있습니다. 해당 프로젝트는 웹 이력서 및 블로그로, 마크다운 형식으로 포스트를 작성, 열람할 수 있습니다.

2024년 10월부터 개발 중으로, 링크(Public Repository)에서 확인하실 수 있습니다.

• Full Route Cache 활용을 위해 ISR을 적용했습니다.

• next-themes를 사용한 테마(다크/라이트) 모드를 지원합니다.

• next-mdx-remote 및 @mdx-js/mdx 라이브러리를 사용해 mdx 파싱 및 렌더링을 수행합니다.

• tRPC 사용을 통해 요청/응답 간 타입 안정성을 강하게 보장합니다.

  • Next.js v15 마이그레이션과 함께 서버 액션으로의 마이그레이션 예정

• 데이터 fetching에 필요한 복잡한 외부 상태를 URLSearchParams 및 next/navigate API를 사용해 관리합니다.

• UI 구현에 shadcn/ui(radix-ui) 기반의 헤드리스 컴포넌트 컬렉션을 적극 활용했습니다.

사용 기술

• 프론트엔드: Next.js v14(App Router), TanStack Query(tRPC), zod, React-Hook-Form, Tailwind CSS, shadcn/ui (radix-ui)

• 백엔드: Next.js API Route(tRPC), Prisma, PostgreSQL(Vercel)