서윤하 | Frontend Developer ✨

Mask group.png

단순 구현을 넘어, '왜 이 구조가 필요한가'를 고민하는 프론트엔드 개발자 서윤하입니다.

Next.js 기반 BFF 설계, 성능 최적화, 레거시 리팩토링을 통해 복잡한 요구사항을 유지보수 가능한 구조로 바꾸는 데 강점이 있습니다.

Contact

Github : https://github.com/yxxnhx
Email : [email protected]
Phone : 010-5567-8347

🛠️ Skills

Frontend | React · Next.js · TypeScript · JavaScript (ES6+)
State / Data | TanStack Query · Recoil · React Hook Form · Zod
Styling | Tailwind CSS · Styled Components · Emotion · Sass
Testing | Jest · React Testing Library
Visualization | Chart.js · SVG.js · GSAP · HLS.js
Etc | Vanilla JS · Git · Figma · MongoDB · Firebase · OAuth

💡 Summary

Next.js / React / TypeScript 기반 서비스 개발 경험
BFF(Backend-for-Frontend) 설계 및 Server Actions 기반 책임 분리 경험
React Query, React Hook Form, Zod를 활용한 상태/폼 구조화 경험
지도, 실시간 관제, 결제, ERP 등 복잡한 도메인의 프론트엔드 설계 경험
성능 최적화와 구조 개선을 통해 팀 생산성과 유지보수 향상

📘 사내 통합 ERP 시스템 — BFF 아키텍처 설계 및 구축

사내 통합 ERP

고객 문의 시스템을 고객사 관리·미팅 일정 관리까지 확장한 사내 ERP

2025.06 - 2025.10

PM 1 · Designer 1 · Frontend 1

담당 역할

Next.js 기반 ERP 프론트엔드 개발
MongoDB 데이터 모델 설계
Server Actions 기반 BFF 구조 설계 및 구현
Aggregation Pipeline 기반 데이터 조회 구조 구성
Controller–Service–Repository 패턴 도입

기술 스택

Next.js (App Router · Server Actions), TypeScript, MongoDB, Class-Validator, Tailwind

문제

Strapi 기반 문의 시스템이 ERP로 확장되며 고객사·미팅·담당자 간 N:M 관계 처리에 한계 발생
비즈니스 로직과 DB 쿼리가 단일 Server Action 함수에 집중되면서 코드가 빠르게 비대해지고 디버깅이 어려운 구조로 악화

해결

Server Actions만으로는 비즈니스 로직 분리에 한계가 있었습니다. 백엔드에서 검증된 Controller–Service–Repository 패턴을 BFF 계층에 이식해 요청 처리·비즈니스 로직·DB 접근의 책임을 명확히 분리했습니다.

N:M 데이터 조인은 단순 find 반복 대신 MongoDB aggregate 파이프라인으로 서버 단에서 처리하고, DB 접근 로직 전체를 Repository 클래스로 추상화해 재사용성을 확보했습니다. Class-Validator로 클라이언트·서버 양측 DTO 검증을 단일화해 데이터 불일치를 원천 차단했습니다.

성과

Notion / Slack 연동 알림 자동화로 PM 팀 주간 행정 업무 10시간 이상 단축
CSR 패턴 및 쿼리 클래스화로 ERP 기능 추가 시 디버깅 공수 약 50% 절감
Repository 클래스 추상화로 신규 데이터 조회 기능 추가 시 수정 범위를 단일 클래스로 한정