thymeleaf client side redirection 질문
안녕하세요 강의 듣다가 좀 헷갈리는게 있어 질문 올려요
<button class="w-100 btn btn-secondary btn-lg"
th:onclick="|location.href='@{/form/items}'|"
type="button">취소</button>
여기서 onclick은 서버한테 해당 url로의 새 http request message 를 보내지 않는 그냥 client 쪽에서 온전히 redirection 하는 거라고 들었는데요, 이러면 client는 해당 URL의 view를 어떻게 찾아내나요?
원래는 새 url로 이동하려면 해당 url로 request 보내고 서버로부터 완성된 VIEW를 받아서 보여주는거잖아요?
근데 얘는 thymeleaf로 되어있어서 서버로부터 데이터도 껴넣어져야되는데 어떻게 온전히 client가 알아서 view를 찾아낼 수 있다는건지 이해가 안갑니다
답변 2
0
안녕하세요. mintuchel님
AI 인턴이 답을 잘 해주었는데요.
다음 내용을 참고해주세요.
location.href를 사용할 때, 클라이언트 측에서는 JavaScript를 통해 새로운 URL을 브라우저의 주소창에 설정하고, 그 URL로 페이지를 새로 로드합니다. 이때 실제로 새로운 리소스를 요청하는 것이기 때문에 서버에서 뷰를 찾아 응답하는 과정이 다시 이루어집니다. 따라서 클라이언트가 독립적으로 뷰를 찾는 것이 아니라, 서버에 새로운 HTTP 요청을 보내 뷰를 요청하는 것입니다.
감사합니다.
0
안녕하세요, 인프런 AI 인턴입니다.
mintuchel님의 질문은 Thymeleaf 템플릿 엔진을 사용할 때 th:onclick 속성을 통해 클라이언트 측 리다이렉션을 할 때, 클라이언트가 어떻게 해당 URL의 뷰를 찾아내는지에 대한 이해와 관련된 내용 같습니다.
Thymeleaf를 사용할 때 th:onclick 구문 내에 쓰이는 @{...} (링크 URL 표현식)은 서버 측에서 렌더링 될 때 해당 애플리케이션의 컨텍스트 패스를 포함한 적절한 URL로 변환됩니다. 즉, 이 구문은 서버에서 HTML 페이지를 생성할 때 실제 컨텍스트 경로에 맞게 URL을 조정해줍니다.
location.href를 사용할 때, 클라이언트 측에서는 JavaScript를 통해 새로운 URL을 브라우저의 주소창에 설정하고, 그 URL로 페이지를 새로 로드합니다. 이때 실제로 새로운 리소스를 요청하는 것이기 때문에 서버에서 뷰를 찾아 응답하는 과정이 다시 이루어집니다. 따라서 클라이언트가 독립적으로 뷰를 찾는 것이 아니라, 서버에 새로운 HTTP 요청을 보내 뷰를 요청하는 것입니다.
이쪽 내용과 관련해서는 아래의 링크에서 비슷한 질문의 답변을 찾을 수 있습니다:
두 링크 모두 Thymeleaf의 링크 표현식과 리터럴 표현에 대한 이해를 돕는 답변이 담겨 있기 때문에, mintuchel님의 궁금증을 해소하는 데 도움이 될 것입니다.
강의 내용과 답변을 통해 클라이언트 측 JavaScript에서 location.href를 사용하는 것과 서버 측 URL 매핑, 그리고 Thymeleaf의 URL 표현식의 차이점을 좀 더 명확하게 이해하실 수 있기를 바랍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
이미지 업로드와 db 트랜잭션 묶는법
0
42
1
Could not resolve org.springframework.boot:spring-boot-starter-validation:2.4.4
0
52
2
MessageSourceTest 코드
0
47
1
인터셉터 에러 설정
0
48
1
resolveArgument()메서드 질문
0
56
1
43강 검증1 에서 실패 로직 관련 질문있습니다.
0
55
2
타임리프 3.X 버전 rendering, serializer 에러 해결 방법
2
133
3
스프링 빈에 등록이 안되는거 같은데 어떻게 하면 좋을까요?ㅠㅠ
0
90
3
pdf 오타 문의
0
57
1
ItemUpdateForm 검증 관련 질문입니다.
0
48
1
22page 링크 주소 변경
0
59
2
특정 데이터와 파일을 함께 저장 시, 테이블 구조 질문
0
53
1
섹션3번 수업에 대한 질문입니다.
0
80
2
@Autowired 보다 더 좋은 방법이 어떤 걸까요?
0
85
2
타입컨버터 가 람다랑 비슷해 보이는데 저의 생각이 맞는지?.
0
65
1
자바스크립트 인라인에서 객체 직렬화 시 오류가 납니다
0
142
3
스프링부트 - 오류페이지2 에서 500.html 에서 쓰인 객체 질문
0
63
1
톰캣 에러 페이지가 안보입니다.
0
102
2
apiEceptionController에서 센드 에러 호출하면 안되는지?
0
81
1
세션 타임아웃시 쿠키 삭제 방법이 없나요?
0
118
2
ApiExceptionController 질문드립니다.
0
64
1
셀렉박스 챕터에서 option value에 ==배송 방식 선택== 이것을 넣은 이유가 궁금함, 이렇게 구상해도 되는지?
0
66
1
MemberRepository 필드의 fianl 선언 유무
0
85
2
혹시 index.html 에서는 fragment 사용이 안되는건가요
0
58
1