UI의 재사용성을 극대화하기 위해 컴포넌트 단위로 코드를 작성하며, Custom Hook을 활용해 공용 로직을 캡슐화합니다. 또한, Zustand와 Redux 같은 전역 상태 관리 라이브러리를 사용해 복잡한 상태를 효율적으로 관리하며, SPA 개발에 능숙합니다.
PNPM을 이용해 모노레포를 구현, 빌드 및 배포 경험이 있습니다.
Zustand를 이용해 전역 상태를 최적화하고, Context를 주입한 Toast를 제작하는 등 상태관리 경험이 있습니다.
Lighthouse를 이용해 페이지 성능 측정, 컴포넌트 성능 개선한 경험이 있습니다.
구조분해할당, spread 연산자 등 ES6+ 문법에 능숙하며, 주요 내장 메서드와 모듈 시스템을 이해하고 활용합니다. Promise, async/await 등 비동기 프로그래밍의 개념과 JavaScript의 동작 원리를 깊이 이해하고 있습니다.
API를 연동해 사용자와의 상호작용이 높은 UI를 구현한 경험이 있습니다.
typescript를 사용할 수 있습니다.
Storybook 작성, 빌드 및 배포 경험이 있습니다.
husky, commitlint, eslint, prettier 도입으로 코드 일관성 및 품질을 향상합니다.
Semantic 태그를 활용하여 문서 구조의 명확성과 가독성을 개선하며, 웹 표준 준수를 통해 접근성과 SEO에 최적화된 마크업을 작성합니다.
효율적인 선택자를 사용하며, Flexbox와 Grid, Position 속성을 활용해 복잡한 레이아웃을 손쉽게 구성할 수 있습니다. 또한, 미디어 쿼리와 CSS 변수 등을 활용하여 다양한 디바이스 환경에서도 일관된 반응형 디자인을 구현할 수 있습니다.
Radix를 사용해, 웹 접근성을 보완한 디자인 시스템을 구현한 경험이 있습니다.
TailwindCSS, Emotion, SCSS를 활용할 수 있습니다.
framer-motion을 활용하여 부드러운 애니메이션을 구현할 수 있습니다.
2025.01.06 ~ 진행중
motion 라이브러리로 부드러운 인터랙션 구현
모노레포 구조에 맞춘 커밋 컨벤션 자동화 (husky + lint-staged)
iconMap과 React.lazy를 활용한 아이콘 최적화
2024.12.23 ~ 진행중
Headless 컴포넌트 라이브러리(Radix Primitive) 기반 UI 설계
Storybook 기반 테스트/문서화 통합
Polymorphic 컴포넌트, CCP 구조 설계로 재사용성 증가
2024.10.01 ~ 2024.10.11
실시간 검색 기능 구현 (debounce 적용)
Lighthouse 기반 성능 점검
2024.01.08 ~ 2024.7.25
다중 파일 유효성 검사 구현
타입 안정성을 위한 Typescript 마이그레이션
2023.12.26 ~ 2024.01.09
LocalStorage를 활용한 다크모드 상태 저장
React Query를 사용하여 데이터 Fetching 안정성 및 가독성 향상
PHP 기반의 이벤트형 플랫폼과 백오피스 개발
이벤트형 플랫폼에 RESTful API 연동하여 사용자 상호작용 중심의 UI 설계 및 구현
백오피스의 초기 기획 단계부터 론칭까지 전 과정 참여
회사 홈페이지 리뉴얼로 레거시 코드 제거
프론트엔드 업무 프로세스 개선하여 스프린트 완료율 50% > 80%로 증가
협업 요청에 필요한 매뉴얼 작성하여 크로스 팀 협업 프로세스 생성
프론트엔드 파트 리드