프론트엔드
Bootstrap-vue를 활용해서 새로운 컴포넌트 제작하기
두줄요약
Bootstrap-vue 기반 어드민에서 반복되는 UI·입력 로직을 공통 컴포넌트로 분리한 과정을 공유했습니다. 과도한 범용화 대신 숫자 입력 목적에 집중한 컴포넌트 설계를 선택했습니다.
문제 상황
- 촉박한 Vue.js 어드민 개발 일정으로 Bootstrap-vue 도입
- 반복되는 검색 결과 레이아웃과 숫자 입력 제어 로직의 페이지별 복붙
원인 분석
- Bootstrap-vue 기본 컴포넌트만으로 체크박스 테이블, 입력값 범위 제한, 증감 기능 충족 불가
- 범용 Input 컴포넌트에 기능·스타일 요구를 누적하며 22개 props로 복잡도 증가
해결 방법
- 일반 Input과 Number Input 분리, 스타일 props 최소화
- b-input-group 기반 숫자 전용 Input에 단위 표기와 증감 계산 기능 결합
- type="number"의 브라우저별 입력 이슈는 후속 validator로 보완하는 방향 선택
주의할 점
- 라이브러리 제공 컴포넌트라도 프로젝트 공통 요구와 반복 사용 패턴 검토 필요
- 모든 기능을 담은 만능 컴포넌트보다 목적이 명확한 단일 책임 컴포넌트 지향
