formkit-react
formkit-react
직접 만들어 npm에 배포한 React 폼 라이브러리입니다. Compound Component 패턴으로 조합 가능한 API를 만들고, Zod 검증과 접근성(ARIA), TypeScript 타입을 한 패키지로 정리했습니다. Vite로 빌드하고 GitHub Actions로 검증한 뒤 배포했습니다.
함께 일해요
프로젝트 관련 문의가 있으시면 편하게 연락 주세요.
프로젝트
제가 참여한 주요 프로젝트입니다
bodycodi
bodycodi
2016년부터 운영된 JSP 레거시와 공존하는 React 화면을 점진적으로 통합한 프로젝트입니다. JSP의 전역 CSS와 Tailwind가 충돌하던 문제를 tw- prefix 전략과 컨벤션 문서로 정리했고, Axios와 TanStack Query로 에러 처리를 한곳에 모았습니다.
albaform
albaform
여러 명이 함께 만든 알바 구인구직 플랫폼입니다. 검색 노출을 위한 SSR과 인터랙션을 위한 CSR을 나누고, 사용자 상태 6종에 따라 권한과 렌더링을 분기해 비인가 접근을 막았습니다. 공통 컴포넌트로 화면을 통일하고 낙관적 업데이트로 반응 속도를 높였습니다.
tappytype
tappytype
애플펜슬로 쓴 손글씨를 한글 폰트로 만들어 주는 iOS 앱입니다. Swift·SwiftUI·PencilKit으로 직접 만들었고, 모델을 바꿔도 앱을 고치지 않도록 앱과 서버를 REST 계약으로 분리했습니다. 지금은 출시 준비 단계이며, 직접 브랜딩해 인스타그램으로 사전 마케팅을 하고 있습니다. (React Native가 아닌 네이티브 Swift입니다.)
포트폴리오 사이트
포트폴리오 사이트
지금 보고 계신 이 사이트입니다. Next.js App Router와 TypeScript로 만들었고, 공통 컴포넌트와 자동화(ESLint·Prettier·Husky)로 코드 스타일을 통일해 유지보수하기 쉽게 정리했습니다.
기술 스택
사용하는 주요 기술과 도구
JavaScript (ES6+)
ES6+ 문법을 기본으로 프론트엔드 개발에 사용했습니다. CommonJS와 ESM 방식의 설정 파일을 모두 다룰 수 있습니다.
React.js
도스트11에서 react-on-rails 기반으로 도프켓의 카테고리 트리, 캐러셀, 블로그 CMS 같은 컴포넌트를 개발하고 있습니다. 하이드레이션, 커스텀 훅, Context API를 실무에서 다루고 있습니다.
Next.js
Next API를 프록시로, NextAuth 세션을 인증 수단으로 두어 민감 정보가 브라우저에 노출되지 않도록 했습니다. SEO와 성능을 위해 서버사이드 렌더링, 정적 사이트 생성, 앱 라우터 레이아웃을 사용했습니다.
HTML5 / CSS3
시맨틱 마크업으로 LCP를 줄이고, 스크립트 로드 시점을 조절하거나 무한 스크롤의 기준 요소를 잡는 데 사용했습니다.
자주 묻는 질문
궁금하실 만한 점들을 정리했습니다.