Daniel Roy Greenfeld: TIL: FastHTML에 hx-swap-oob 사용하기

제공된 코드는 HTMX(JavaScript 라이브러리)를 FastAPI와 FastHTML과 연계하여 사용하는 방법을 보여줍니다. 이 코드는 새 연락처를 추가하는 양식이 있는 간단한 연락처 목록 애플리케이션을 만듭니다. 애플리케이션은 페이지를 완전히 다시 로드하지 않고도 연락처 목록을 동적으로 업데이트하는 데 HTMX를 사용합니다. mk_row 함수는 제공된 이름과 이메일로 새 테이블 행을 생성하고, #contacts-tbody DOM 요소의 끝에 행을 삽입하는 HTMX 속성을 포함합니다. index 함수는 연락처 목록과 새 연락처를 추가하는 양식이 있는 주 애플리케이션 페이지를 반환합니다. contacts 함수는 양식 제출을 처리하고 콘솔에 메시지를 출력한 다음 새 테이블 행을 반환합니다. 양식 제출은 HTMX에서 처리하고, /contacts 엔드포인트로 POST 요청을 보내고 페이지를 다시 로드하지 않고 연락처 목록을 업데이트합니다. hx_swap_oob 속성은 새 행을 삽입할 위치를 지정하는 데 사용되고, hx_on__after_request 속성은 제출 후 양식을 리셋하고 이름 필드에 포커스하는 데 사용됩니다. 애플리케이션은 애플리케이션을 제공하는 데 FastAPI를 사용하고 HTML 요소를 생성하는 데 FastHTML을 사용합니다. 코드는 브라우저에서 보고 애플리케이션의 동작을 확인하도록 설계되었습니다.