2026.01.16 ~ 01.23

CRUD 기반 물품 관리 웹 시스템

등록, 조회, 수정, 삭제 이후 화면 상태가 어긋나지 않도록 API 연동과 상태 흐름을 정리한 관리 시스템

01 FEATURES

주요 기능

물품 등록·조회·수정·삭제 (CRUD) 기능

카테고리별 물품 분류 및 검색

물품 상세 정보 모달 뷰

REST API 기반 서버 데이터 연동

반응형 UI 및 사용자 친화적 인터페이스

02 PROCESS

문제와 해결

문제: 등록, 수정, 삭제 후 화면 상태가 즉시 반영되지 않거나 컴포넌트 사이로 상태를 계속 전달해야 해 관리가 어려워졌습니다. 기능이 늘어날수록 어떤 컴포넌트가 데이터를 책임지는지 흐려지는 문제가 있었습니다. 해결: 물품 목록 상태를 상위 흐름에서 관리하고, 등록/수정/삭제 이후 API 응답을 기준으로 목록을 다시 정리했습니다. 입력 폼, 목록, 상세 모달의 역할을 분리해 화면 갱신 흐름이 한눈에 보이도록 구조를 단순화했습니다. 배운 점: CRUD 기능은 단순해 보여도 상태의 소유 위치가 명확하지 않으면 유지보수가 어려워집니다. 사용자 입장에서는 저장 직후 변화가 바로 보이는 것이 중요하다는 점도 함께 확인했습니다.

03 TAKEAWAYS

배운 점

CRUD 기능에서도 상태의 소유 위치가 명확해야 유지보수가 쉬워진다는 점

API 응답 이후 화면 갱신 흐름이 사용자 경험을 크게 좌우한다는 점

폼, 목록, 모달의 책임을 나누면 기능 추가가 훨씬 안정적이라는 점

04 IMAGES

이미지 기록

작업 화면과 과정 이미지를 순서대로 정리했습니다.