Frontend Developer

이유연

운영 안정성과 개발 생산성을 함께 개선하는 프론트엔드 개발자입니다.

ReactNext.jsTypeScript

프로젝트 보기 Contact

engineer.ts

1const engineer = {

2name: "이유연",

3role: "Frontend Engineer",

4focus: ["DX", "Performance"],

5stack: ["React", "Next.js", "TypeScript"],

6exp: "1년 6개월",

40+

화면

5min

배포

scroll

01 About

안녕하세요, 프론트엔드 개발자 이유연입니다.

React·Next.js·TypeScript 기반으로 B2B 엔터프라이즈 관리자 시스템과 실시간 관제 서비스를 개발해왔습니다. 일일 최대 2,000건의 건강측정 데이터가 유입되는 산업현장 헬스케어 관리자 웹 플랫폼과 약 30대 차량을 10초 간격으로 추적하는 관제 서비스를 개발·운영했으며, 데이터 시각화, 테이블 기반 폼, 다국어 관리자 시스템 구축을 경험했습니다.

또한 고객사별 내부망 환경 차이로 반복되던 배포 실패 문제를 Docker 이미지 단위 배포와 자동화 스크립트로 개선해 배포 시간을 30분~1시간에서 2~5분으로 단축했고, 기능 구현에 그치지 않고 QA 효율과 운영 안정성까지 함께 개선해왔습니다. TC 기반 사전 검증과 Playwright E2E 테스트를 적용해 테스트 사이클과 통합 테스트 기간을 단축했습니다.

40+

대시보드 화면

5min

배포 시간

i18n ×3

다국어 지원

02 Skills

Tech Stack & Tools

실무 경험 기반 · 역할 중심 분류

Core Framework주력으로 사용하는 프론트엔드 기술

Next.jsReactTypeScriptJavaScript

Styling & UIUI 구현 및 스타일링

Tailwind CSSStyled-ComponentsHTML/CSS

Data & Visualization상태 관리와 데이터 시각화

React QueryTanStack TableReact Hook FormD3.jsChart.js

Testing테스트 및 품질 검증

VitestTesting LibraryPlaywright

Infrastructure프로젝트 구조와 배포 환경

TurborepoDocker

Cooperation협업 및 개발 도구

GitFigmaJIRASwagger

03 Experience

Work History

총 경력1년 6개월+

주요 스택React / Next.js / TypeScript

기존 멀티레포 구조를 Turborepo 기반 모노레포로 전환하고 공통 UI·utils·testing 패키지를 구성해 고객사별 중복 코드와 유지보수 비용을 줄였습니다.
D3.js + SVG 직접 렌더링과 Chart.js를 목적별로 병행 적용해 데이터 시각화 요구사항과 구현 생산성을 함께 만족하는 구조를 설계했습니다.
한·영·러 3개 국어 i18n 아키텍처를 설계하고 관리자 화면 40개에 적용해 다국어 운영 기반을 구축했습니다.
useEffect 중심 서버 상태 관리 구조를 React Query 기반으로 전환해 캐싱·재검증 방식을 표준화하고 비동기 처리 복잡도를 낮췄습니다.
React Query의 refetchInterval을 활용해 약 30대 차량의 위치를 10초 간격으로 추적하는 실시간 관제 UI를 구현했습니다.
TanStack Table과 React Hook Form을 연계해 중첩 필드 구조를 안정적으로 관리하는 테이블 기반 폼 컴포넌트를 설계했습니다.
Vitest + Testing Library 기반 공유 테스트 패키지를 구축해 테스트 작성과 재사용 기반을 마련했습니다.
고객사별 내부망 환경 차이로 반복되던 배포 실패 문제를 Docker 이미지 단위 배포 구조와 자동화 스크립트로 개선해 배포 시간을 30분~1시간에서 2~5분으로 단축했습니다.
TC 기반 사전 검증과 Playwright E2E 테스트를 적용해 테스트 사이클을 3~4회에서 2회로 줄이고, 통합 테스트 기간을 평균 5일에서 2~3일로 단축했습니다.
Salesforce AppExchange 배포 TF에 참여해 LWC를 빠르게 학습하고 12개 화면 개발 및 기술 제약사항 문서화를 수행했습니다.

Next.jsReactTypeScriptJavaScriptReact QueryTanStack TableReact Hook FormD3.jsChart.jsVitestTesting LibraryPlaywrightTailwind CSSStyled-ComponentsTurborepoDockerSalesforce LWC

빛나는 별 심리상담센터 — Next.js + Supabase + Vercel, 현재 운영 중
자동 탭 정리 Chrome Extension — 탭 20개 초과 시 도메인 기반 자동 그룹핑, 최근 탭 1000개 로컬 검색 기능을 제공하는 Chrome Extension을 개발하고 Chrome Web Store에 배포
SEO 엔터테인먼트 모노레포 — 연봉 계산기·MBTI AI 해석기 등 4개 서비스를 공통 패키지로 구성한 모노레포 프로젝트를 개발

Next.jsTypeScriptJavaScriptChrome ExtensionGemini APISupabaseVercel

05 Projects