인프런 커뮤니티 질문&답변

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요.

1. 강의 내용과 관련된 질문을 남겨주세요.
2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요.
(자주 하는 질문 링크: https://bit.ly/3fX6ygx)
3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요.
(질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG)

질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요.
=========================================
[질문 템플릿]
1. 강의 내용과 관련된 질문인가요? (예/아니오)
2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오)
3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오)

[질문 내용]
상품 수정 버튼을 클릭했을 때 이동하는 경로를 Thymeleaf 템플릿 엔진을 써서 작성했는데

<button class="w-100 btn btn-primary btn-lg" 
onclick="location.href='editForm.html'" 
th:onclick="|location.href='@{/basic/items/{itemId}(itemId=${item.id})/edit}'|" 
type="button">상품 수정</button> 

이런 경우에 실제 주소 뜨는걸 보면

http://localhost:8080/basic/items/%7BitemId%7D(itemId=$%7Bitem.id%7D)/edit

이렇게 뜨고

만약 다음과 같이 작성하면

<button class="w-100 btn btn-primary btn-lg" 
onclick="location.href='editForm.html'" 
th:onclick="|location.href='@{/basic/items/{itemId}/edit(itemId=${item.id})}'|" 
type="button">상품 수정</button> 

http://localhost:8080/basic/items/2/edit 이렇게 경로가 뜨는데 왜 이런 차이가 발생하는 건가요?

제가 처음 이렇게 한 이유가

(itemId=${item.id}) 이게 치환되는 주체는 {itemId}여야 하는 거고 그러면 선언 위치는 사실 상관없는 거 아닌가 해서 저렇게 했는데

실제 url을 까보니까 아예 다르게 나와서 왜 이렇게 되는건지 궁금합니다.

그리고 또 하나의 궁금증으로는

강사님께서 수정 부분 컨트롤러 메서드를 작성하실 때 다음과 같이 작성하셨는데

public String editForm(@PathVariable Long itemId, Model model)

그러면 위 코드를 보았을 때 아까 보았던 코드를 기반으로 생각했을 때

th:onclick="|location.href='@{/basic/items/{itemId}/edit(itemId=${item.id})}'|"

ItemId가 쿼리 파라미터 형식으로 전송되면서 서버로 넘어가는 지 그것도 궁금합니다.