발표는 기본적인 Rails 폼 구조에서 시작하여 점진적으로 기능을 추가하는 방식으로 진행됩니다.
1. 기본 폼 및 초기 문제점
-
초기 폼: 국가/주 선택, 텍스트 필드, 결과 영역으로 구성된 Rails 폼.
-
문제점: 필드 변경 시 수동 제출 및 전체 페이지 새로고침으로 사용자 경험 저하.
2. Stimulus를 이용한 자동 폼 제출
-
Stimulus 컨트롤러:
remote_click정의 및submit액션 구현. -
HTML 통합: 폼에
data-controller="remote-click", 국가 선택에 `data-action=”change->remote-click
submit”` 추가.
- 결과: 필드 변경 시 자동 제출되나, 전체 페이지 새로고침은 유지.
3. Turbo Frames 및 Streams를 활용한 부분 업데이트
- 부분 업데이트 구현:
data-turbo-frame속성의 숨겨진 버튼과 Stimulusclick액션으로 트리거.- 각 UI 영역(폼, 액션 바, 결과)을
turbo_frame_tag및 고유div id로 감쌈. - 서버 응답에서
turbo_stream.update를 통해 해당 영역만 독립적으로 업데이트.
- 효과: 전체 페이지 새로고침 없이 동적 상호작용 및 UI 부분 업데이트 가능. Turbo Streams는 웹 컴포넌트 기반의 선언적 DOM 업데이트를 제공.
4. 폼 외부 버튼 및 URL 관리
-
폼 외부 버튼: HTML
form속성으로 외부 버튼이 특정 폼(ID)을 제출.formaction,formmethod로 제출 URL/메서드 오버라이드 (예:.txt,.csv내보내기). -
URL 업데이트: 폼에
data-turbo-action="advance"(새 기록) 또는data-turbo-action="replace"(현재 URL 대체) 속성 추가로 Turbo 제출 시 URL 변경 관리.
5. 중요 주의사항
-
GET 요청 시 민감 데이터 로깅: GET 메서드 사용 시 URL 파라미터에 민감 데이터 노출 및 서버 로그 기록 위험.
-
Enter 키 제출 동작: 폼 내 여러 버튼 존재 시 Enter 키는 HTML 상 첫 번째 버튼을 제출하므로, 의도된 동작을 위해 숨겨진 버튼 활용 고려.