React POS 앱 - 주문 생성 페이지에서 카테고리 및 제품 데이터 로드(33부)

React POS 시스템 시리즈의 33부에서는 데이터베이스에서 제품 카테고리 및 제품을 로드하고 이를 POS 화면에 표시하여 핵심 "새 주문 추가" 경험을 구축합니다. 먼저 Axios를 사용하여 React에서 fetchCategories() 함수를 생성하여 localStorage에 저장된 JWT 토큰으로 보안 API를 호출합니다. 그런 다음 카테고리를 부트스트랩 버튼으로 렌더링하므로 사용자는 제품 그룹 간에 빠르게 전환할 수 있습니다. 다음으로, 사용 가능한 모든 항목을 로드하거나 선택한 카테고리별로 항목을 필터링하기 위해 fetchProducts(categoryId = 0)를 구현합니다. 이를 통해 카테고리 버튼을 클릭하면 제품 목록이 즉시 새로 고쳐지는 깔끔한 POS 워크플로가 제공됩니다. 또한 오류 상태를 적절하게 처리하므로 데이터가 로드되지 않을 때 UI에 유용한 메시지가 표시됩니다. 백엔드(Node.js + Express)에서는 안전한 입력 검증을 위해 Express Validator를 사용하고 보안 MySQL 쿼리를 위해 준비된 명령문을 사용하여 카테고리별로 제품을 반환하는 POST API를 구축합니다. 엔드포인트는 사용 가능한 제품만 반환하고 Category_id를 사용한 선택적 필터링을 지원합니다. 이 튜토리얼이 끝나면 POS "주문 생성" 화면에는 동적 카테고리 기반 제품 로드, 반응형 그리드 레이아웃 및 다음 단계인 페이지 로드 시 카트 데이터 로드를 위한 전체 스택 구조가 준비됩니다. 💡 사용 기술: React.js, Node.js, Express.js, MySQL, REST API, JWT Auth, Axios, Bootstrap 5 소스 코드용 - https://www.webslesson.info/2026/01/react-pos-system-nodejs-mysql.html