목록, 상세, 입력 폼을 연결하며 작은 업무 애플리케이션을 단계별로 완성합니다.
튜토리얼은 작은 업무 목록을 만들고 상세 보기와 편집 폼을 붙이는 흐름으로 진행합니다. 목표는 기능을 많이 넣는 것이 아니라 데이터가 화면을 지나 서비스 계층으로 돌아오는 기본 경로를 이해하는 것입니다.
- 목록 화면에서 시작합니다.
- 상세 화면은 route parameter를 사용합니다.
- 저장 후 사용자가 돌아갈 위치를 정합니다.
목록은 사용자가 항목을 고르고 상태를 비교하는 공간입니다. 상세는 하나의 항목을 깊게 보는 공간이므로 URL, 제목, 보조 정보, 다음 action이 목록과 다르게 구성되어야 합니다.
- 목록 row에는 식별 가능한 제목을 둡니다.
- 상세 URL은 새로고침해도 같은 항목을 보여야 합니다.
- 없는 항목은 명확한 빈 상태로 처리합니다.
편집 흐름에서는 사용자가 지금 무엇을 바꾸고 있는지, 저장이 가능한지, 실패하면 어디를 고쳐야 하는지 바로 알아야 합니다. 검증은 서버와 UI 사이에서 같은 규칙을 공유하도록 설계합니다.
- 필수 입력은 라벨과 에러 문구를 함께 둡니다.
- 저장 중 상태는 버튼과 폼 전체에 반영합니다.
- 성공 후 목록 데이터가 갱신되는지 확인합니다.
튜토리얼을 마친 뒤에는 샘플 코드가 실제 앱 코드와 섞이지 않도록 이름과 경로를 정리합니다. 다음 단계에서 권한, 테마, 배포를 붙일 수 있게 서비스와 화면의 책임도 다시 확인합니다.
- 튜토리얼 전용 mock 데이터를 분리합니다.
- 반복되는 UI는 helper로 이동합니다.
- 테스트는 대표 route와 저장 실패 케이스부터 둡니다.
Java 중심 UI 시스템으로 제품 수준의 웹 앱을 더 빠르게 구축합니다. 공통 컴포넌트와 레이아웃을 기반으로 사이트를 일관되게 확장할 수 있습니다.