프로젝트 02
CRUD 기반 물품 관리 웹 시스템
2026.01.16 ~ 2026.01.23
문제
저장 후 목록, 폼, 상세 모달 중 어디서 상태를 갱신하는지 불명확했습니다.
내 역할
- 물품 목록 상태의 소유 위치 정리
- 등록·수정·삭제 후 API 응답 기준으로 화면 갱신
- 폼, 목록, 상세 모달 책임 분리
확인 결과
- 등록·수정·삭제 후 화면 상태를 API 응답 기준으로 재정리
- 사용자가 저장 결과를 바로 확인 가능
- 컴포넌트 책임을 설명하기 쉽게 분리
데모 안내
외부 운영 데모는 현재 HTTPS 연결 점검 중입니다. 구현 내용은 GitHub와 설계 문서에서 확인할 수 있습니다.
내 역할 · 규모
내 역할 · 규모
- 물품 목록 상태의 소유 위치 정리
- 등록·수정·삭제 후 API 응답 기준으로 화면 갱신
- 폼, 목록, 상세 모달 책임 분리
기술 스택
ReactJavaScriptREST APICRUDUI/UX
문제 · 해결 · 결과
문제 · 해결 · 결과
핵심 성과
- 등록·수정·삭제 후 화면 상태를 API 응답 기준으로 재정리
- 사용자가 저장 결과를 바로 확인 가능
- 컴포넌트 책임을 설명하기 쉽게 분리
문제
저장 후 목록, 폼, 상세 모달 중 어디서 상태를 갱신하는지 불명확했습니다.
해결
목록 상태의 소유 위치를 정하고 서버 응답 또는 재조회 기준으로 화면을 갱신했습니다.
결과
변경 결과가 즉시 보이고, API 연동 흐름을 설명하기 쉬운 구조가 되었습니다.
설계 / 문서
설계 / 문서
아키텍처
- React 화면 컴포넌트와 REST API 연동 흐름 분리
- 목록, 폼, 상세 모달이 같은 서버 데이터를 기준으로 동작
ERD / DB
- 물품, 카테고리, 가격, 등록일 중심
- 목록 조회와 상세 수정 흐름에 맞춰 관리 속성 정리
API 명세
- 물품 등록, 목록 조회, 단건 조회, 수정, 삭제
- 각 요청 뒤 화면 갱신 기준 정리
트러블슈팅
트러블슈팅
로컬 상태만 바꾸면 서버 데이터와 달라질 수 있어 API 응답 또는 재조회 기준으로 상태를 맞췄습니다.
주요 기능
주요 기능
물품 등록/조회/수정/삭제
카테고리별 분류와 검색
물품 상세 모달
REST API 기반 데이터 연동
문제 해결 과정
문제 해결 과정
문제 상황
저장 후 화면 상태가 즉시 맞지 않고, 컴포넌트 사이 상태 전달이 늘어났습니다.
해결 과정
목록 상태를 상위 흐름에서 관리하고 등록·수정·삭제 뒤 API 응답 기준으로 목록을 다시 맞췄습니다.
배운 점
CRUD도 상태 소유 위치가 흐려지면 유지보수가 어려워지고 사용자 피드백도 늦어집니다.
프로젝트에서 배운 것
프로젝트에서 배운 것
01
상태 소유 위치가 명확해야 유지보수가 쉬움
02
저장 직후 화면 피드백이 사용자 경험을 좌우함
03
폼, 목록, 모달 책임을 나누면 기능 추가가 쉬움