⭐ 이름 : 김범조
📧 메일 [email protected]
📚 notion
https://www.notion.so/beomcoding
🖥️ github
📖 velog
https://velog.io/@kim13175/posts
처음 기록하게 된 과정은 github 툴 학습 과정에서 어려움을 느껴 기록을 시작하면서 현재는 개발자가 되기 위한 저의 경험 들을 다 기록으로 남겨 놓고 있습니다.
이렇게 축적된 기록들은 단순한 자료가 아니라, 새로운 문제를 마주했을 때 과거의 경험을 토대로 해결책을 찾아가는 저만의 데이터베이스 역할을 하고 있습니다.
이러한 기록 습관을 통해 지속적으로 학습하고 성장하는 개발자가 되어 의미 있는 기여를 하고 싶습니다. 감사합니다.
축산물 B2B 온라인 접근성 향상을 위한 커머스 및 관리자 플랫폼 구축
React TypeScript Jotai Styled-Components Bitbucket
관리자 페이지 내 유통 데이터 시각화 부재와 상품/배너 순서 변경 시 깊은 Depth 구조로 인해 관리 작업 정체가 발생했습니다. 이를 해결하기 위해 Recharts 기반으로 데이터 특성별 차트(상위 비율: 도넛 / 일자별 추이: 막대)를 분리 구현하고, Ag-Grid의 Drag-and-Drop 기능을 연동하여 순위 저장을 통해서 서버 API와 동기화되도록 구축했습니다. 그 결과 페이지 이동 Depth를 2단계에서 1단계로 줄여 관리자의 데이터 편집 및 순서 변경 작업 시간을 약 50% 절감하였습니다.
기존 Quill Editor의 단일 이미지 업로드 제약과 HTML 태그 스타일 미적용 문제를 해결하고자 Hidden Input 인터셉트 방식의 다중 업로드·순서 변경 모달을 커스텀 제작했습니다. 또한 dangerouslySetInnerHTML 사용 시 발생하는 XSS 보안 취약점을 차단하기 위해 DOMPurify Sanitization 단계를 결합한 Renders 컴포넌트를 설계했습니다.
AI 프롬프팅 시 기존 코드 컨텍스트 미 반영으로 인한 잘못된 로직 제안과 수동 타입/Lint 검사로 개발 흐름이 단절되는 불편함이 있었습니다. 이를 개선하기 위해 agent.md 및 claude.md에 코딩 컨벤션과 도메인 규칙을 명시하여 일관된 AI 답변을 유도하고, Husky 기반 pre-commit 파이프라인으로 Commit 전 ESLint 및 Type Check를 자동화했습니다. 결과적으로 AI 반복 프롬프팅 횟수와 빌드 타임 에러 발생 횟수를 절감하였습니다.
프로젝트 규모 확장에 따라 컴포넌트 개수가 급증하면서 아토믹 패턴 내 디렉토리 관리 모호성과 컴포넌트 파편화 문제가 발생했습니다. 이를 해결하기 위해 특정 도메인 API를 호출하는 컴포넌트들을 기능 단위 디렉토리로 재조직하는 도메인 중심 분리를 단행했습니다. 그 결과 컴포넌트 탐색 및 재사용성을 대폭 향상시키고 신규 기능 개발 시의 구조적 모호성을 해소했습니다.
친환경 활동 유도 및 보상 제공 리워드 콘텐츠 플랫폼 (사용자/관리자 2개 앱)
React TypeScript TanStack-Query TanStack-Router Zustand Tailwind CSS Cloudflare