김연정
Frontend Developer
팀의 생산성을
코드로 끌어올리는
프론트엔드 개발자
동료 개발자가 이해하기 쉬운 코드로 생산성을 높이는 3년차 프론트엔드 개발자입니다.
TypeScript / React / Next.js 기반의 웹 애플리케이션을 개발하며,
구조와 설계를 개선해 유지보수와 확장에 강한 코드를 짜는것을 좋아합니다.
About
팀의 생산성과 서비스의 지속 가능성을 함께 고민하는 3년차 프론트엔드 개발자로서
동료 개발자가 빠르게 이해하고 확장할 수 있는 가독성 높은 코드와 구조적인 설계를 개발의 중요한 기준으로 삼고 있습니다.
최근에는 Feature-Sliced Design(FSD) 아키텍처를 학습하고 실제 프로젝트에 적용하며,
역할과 책임이 명확한 폴더 구조를 기반으로 결합도는 낮추고 응집도는 높이는 설계 경험을 쌓았습니다.
이를 통해 기능 추가와 요구사항 변경에도 유연하게 대응할 수 있는 코드베이스를 구축했고,
협업 과정에서의 커뮤니케이션 비용과 유지보수 부담을 함께 줄일 수 있었습니다.
공통 컴포넌트와 도메인 단위 설계를 통해 유지보수성과 확장성을 지속적으로 개선하는 과정에서 개발의 재미를 느끼며,
단기적인 구현보다 장기적으로 안정적인 코드와 팀의 생산성을 높이는 방향으로 고민하고 실천하는 개발자입니다.
보유 자격증
정보처리기사 - 한국사업인력공단
Skills
FRONTEND
TypeScript
React
Next.js
BACKEND & DATABASE
Supabase
Prisma
Maria DB
DEPLOY & INFRA
Vercel
Docker
ARCHITECTURE / STRUCTURAL
Feature-Sliced Design (FSD)
Atomic Design
Headless UI
Presentation / Controller
TESTING
Playwright
Storybook
Experience
2023.03 — PRESENT
쿤텍
SCS 연구 개발팀 · 선임연구원
KISA - 고위험 취약점 관리 솔루션
(2025.11 — 개발 중)
• 전체 페이지 UI 개발 및 폴더구조 설계로 개발 효율 증대
• 컴포넌트 책임 분리 및 계층 설계로 유지보수성 향상
• config 기반 UI 설계로 기능 확장, 재사용 용이
• Headless UI 컴포넌트 도입으로 재사용성과 확장성 향상
TypeScript
React
React-Query
React-hook-form
Context API
Styled-Component
RMS - 패키지 관리 솔루션
(2024.01 — 유지보수 중)
• Presentation & Controller 디자인 패턴 적용으로 컴포넌트 재사용성 20% 향상, 페이지 개발 속도 향상
• 저장소별 동적 폼 렌더링 구현
• 보안 취약점 기반 패키지 승인 흐름, 역할 기반 접근 제어 UI 구현
• 고객사 코드 기반 조건 분기 → 단일 코드베이스에서 맞춤형 기능 제공
TypeScript
React
React-Query
Context API
Styled-Component
AEZIZ - 오픈소스 관리 솔루션
(2023.03 — 유지보수 중)
• 공통 컴포넌트 개발로 개발 생산성 및 유지보수 효율 향상
• E2E 테스트 코드 작성으로 배포 전 주요 기능 검증 자동화
• Recharts 기반 데이터 시각화 대시보드 구현
• React-Query 도입으로 API 호출 20% 감소
• useMemo·useCallback 적용으로 렌더링 성능 개선
• NH농협, 미래에셋, 국민은행, 우리은행 등 금융권 고객사 배포 성공
TypeScript
React
React-Query
Styled-Component
Projects
2025
LinkKeeper
링크 관리 플랫폼 - 개인 프로젝트
[ 구현사항 ]
• FSD 구조 도입을 통해 기능 확장과 유지보수에 강한 코드베이스 구축
• Headless UI 컴포넌트 도입으로 재사용성과 확장성 향상
• Atomic Design System 적용으로 일관된 UI/UX 제공
• 반응형 웹 구현으로 다양한 디바이스에서 최적의 사용자 경험 제공
→ 모바일, 태블릿, 노트북, 데스크탑 지원
• Next.js API 라우트를 활용한 백엔드 service 구현
• Supabase 인증 시스템 통합으로 안전한 사용자 인증 구현
• Prisma ORM을 활용한 효율적인 데이터베이스 관리
• Vercel 배포 자동화 설정으로 CI/CD 파이프라인 구축
TypeScript
React
Next.js
React-Query
React-Hook-Form
Tailwind CSS
Supabase
Prisma
Vercel
2025
MOS Project
원스톱 스터디 관리 플랫폼 - 팀 프로젝트
[ 구현사항 ]
• FSD 구조 도입으로 협업 효율 30% 향상
• Tailwind CSS로 다중 디바이스 반응형 UI 구현
• React-Hook-Form 기반 프로필 관리 기능
• Next.js + React-Query 일정 캘린더 CRUD 최적화
• 좋아요 기능, 공지사항 DnD 기능 개발
TypeScript
Next.js
React-Query
TailwindCSS
2024
Sulsul
AI 기반 취업 면접 지원 플랫폼 - 팀 프로젝트
[ 구현사항 ]
• 100문항 SSG 렌더링으로 초기 로딩 속도 개선
• AI 피드백 UI 플로우 설계 및 구현
• 진행률 기반 캐릭터 인터랙션 및 Stepper 컴포넌트 개발
• Skeleton UI 적용으로 로딩 UX 개선
• 데스크탑, 태블릿, 모바일 반응형 웹 구현
TypeScript
Next.js
React-Query
zustand
Contect
yeooonn0303@naver.com