4장 작은 수직 조각을 먼저 연결한다

수직 조각은 버튼 하나가 브라우저, API, 도메인, 결과 표시까지 관통하는 최소 기능이다. BriefFlow의 첫 조각은 목록에서 의뢰를 선택해 원문, 성공 결과, 위험, 제안을 보는 흐름이다. 인증, 데이터베이스, 실제 메일을 한꺼번에 붙이지 않는다.

브라우저는 GET /api/briefs, GET /api/briefs/:id 두 요청만 알면 된다. 서버는 데이터를 찾아 도메인 함수에 넘긴다. 화면은 textContent로 신뢰하지 않는 값을 넣는다. innerHTML은 코드가 소유한 고정 골격에만 사용한다.

const data = await api(`/api/briefs/${id}`);
document.querySelector('#detail-request').textContent = data.brief.request;

수직 조각이 보이면 이해관계자에게 일찍 보여 줄 수 있다. “이 위험을 먼저 보여 줘야 한다”, “승인자는 견적 근거가 필요하다” 같은 도메인 피드백이 CSS 마감 전에 나온다.

실습: 새 읽기 API 추적하기

개발자 도구 Network 탭을 열고 첫 카드 클릭 시 요청과 응답을 확인한다. 상태 코드 200, content-type: application/json, brief와 proposal 키를 기록한다. 서버의 해당 라우트와 화면의 show 함수를 나란히 읽는다. 이것이 디버깅의 기본 지도다.