위의 홈에서 소환사명을 작성한 뒤, .GG 버튼을 누르면 해당 유저의 전적을 보여주는 페이지로 Redirect 시켜주는 기능을 작성하는 중에 문제가 생겼다. 원하는 url로 redirect가 되지 않는 문제였다.
아래와 같이 버튼을 생성했고
<button type="submit" @click="sendRequest">.GG</button>버튼을 누르면 동작할 메소드를 아래와 같이 정의했습니다.
methods: {
sendRequest() {
const trimmedId = this.id.replace(/\s+/g, ""); // 입력값에서 모든 공백을 제거하여 변수에 저장합니다.
const url = `http://localhost:3000/summoners/kr/${trimmedId}`;
window.location.href = url; // 현재 창의 URL을 변경합니다.
}
}원하던 url이 아닌 url로 안내했고, 무엇이 잘못된 지 모르겠어서 window.open을 사용하여 아래와 같이 새로운 window 창으로 요청을 생성해보았습니다.
methods: {
sendRequest() {
const url = `http://localhost:3000/summoners/kr/${this.id}`;
// 요청을 보낸 후 새로운 페이지를 열기 위해 window.open을 사용합니다.
window.open(url, "_blank");
}
}window.open은 원하던 url로 창이 떴고, window.location.href가 문제라고 생각하여 검색해본 결과 링크에서 문제를 알 수 있었습니다.
이유
버튼에서의 리디렉션 문제는 <button> 요소가 기본적으로 폼 제출을 수행하기 때문이라고 합니다. <button> 요소는 type="submit" 속성이 기본값으로 설정되어 있어 클릭 시 가장 가까운 폼을 제출하려고 시도합니다.
따라서, <button> 요소를 사용하면 클릭 시 폼이 제출되고 페이지가 새로고침되는 동작이 발생하게 됩니다. 이로 인해 Redirect가 원하는 대로 동작하지 않는다고 합니다.
해결책으로는 <button> 요소를 사용하지 않고 일반적인 <div> 또는 <span> 요소를 사용하거나 <button> 요소의 타입을 type="button"으로 설정하여 기본 폼 제출 동작을 막을 수 있다고 합니다.
비교
<div> 또는 <span> 요소를 사용하는 방법과 "type=button"으로 설정하는 방법은 각각 장단점이 있습니다.
1. <div> 또는 <span>과 같은 다른 요소 사용하기
- 장점:
- 기본적으로 폼 제출 동작을 수행하지 않으므로, URL 리디렉션을 정상적으로 처리할 수 있습니다.
- 스타일링에 더 많은 유연성을 제공하여 디자인을 자유롭게 조정할 수 있습니다.
- 단점:
- 시맨틱적으로는 버튼이 아니라면 적절하지 않을 수 있습니다.
- 키보드 접근성에 약간의 문제가 발생할 수 있습니다.
2. "type=button"으로 설정하기
- 장점:
- 버튼 요소를 사용하면 시맨틱적으로 적절합니다.
- 일반적인 버튼 동작을 유지하면서도 폼 제출 동작을 막을 수 있습니다.
- 단점:
- 스타일링에 제한이 있을 수 있습니다. 버튼 요소의 스타일은 브라우저에 의해 제어될 수 있습니다.
- 버튼 요소의 기본 동작을 막기 위해 JavaScript 이벤트 핸들러를 사용해야 합니다.
저는 다른 style로 버튼을 만드려고 하기 때문에, 다른 요소를 사용해서 클릭이벤트를 처리하도록 하기로 했습니다.
해결 방법
1. button 안에있던 클릭 이벤트를 button 바깥에 있는 form으로 이동시켰습니다.
2. <form>태그에 @submit.prevent="sendRequest" 이벤트 핸들러를 추가했습니다. 이렇게 함으로써 폼이 제출될 때 sendRequest 메서드가 호출되고, 이 메서드를 통해 URL로 이동할 수 있게 했습니다.
<form class="css-a1mmp7 e11dnomr0" @submit.prevent="sendRequest">
<!-- 내용 생략 -->
</form>
결과
결과적으로 button에 있던 클릭이벤트를 form으로 이동하니 redirect가 잘 작동했습니다.
