📢 문제 상황

웹 게시판 사이트를 진행하던 중, 계속 게시글이 두번씩 작성되는 문제가 발생했다. 최근 Servlet Filter와 관련해서 스트레스를 계속 받아오던 중이라, 해당 filter의 doChain 메서드 호출이 문제의 원인이라 생각해 한참 시간을 쏟았다.

로그를 한참 살펴보다 요청 자체가 2번씩 들어오고 있는 상황이라는 것을 깨닳았다.

📑 문제 원인

<button class="btn btn-primary" @click="register">등록</button>

어디서 요청을 2번씩 하고 있는건지 한참 찾다가, 버튼을 담고있는 자식 컴포넌트 버튼에 type이 명시되지 않았다는 것을 깨닳았다.

WriteForm.vue

<form @submit.prevent="registerFreeBoard">
	 <WriteButtons @submit="registerGalleryBoard"
                   @cancel="cancel"/>
</form>

WriteButtons.vue

<template>
  <div class="button-container">
    <div class="button-box">
      <button class="btn btn-primary" @click="register">등록</button>
    </div>
    <div class="button-box">
      <button class="btn btn-secondary" @click="cancel">취소</button>
    </div>
  </div>

</template>
<script>
import {dateTime} from "@/util/ParamUtil";

export default {
  name: 'WriteButtons',
  emits: ['register', 'cancel'],
  methods: {
    dateTime,
    register() {
      this.$emit('register')
    },
    cancel() {
      this.$emit('cancel')
    },
  },
}
</script>

<button>태그 안에 별도의 type을 부여하지 않는 경우, 해당 button은 type=submit의 기능을 수행한다.

1. 버튼이 form태그 안에 있었다.
   • 따라서, 버튼 클릭 시 form 태그 submit이 시행된다.
2. 버튼이 부모 컴포넌트에게 form 전송 메서드를 emit하고 있었다.

🌼 문제 해결

문제는 정말 간단히 button에 type=button을 붙여주는 것으로 해결되었다.

WrtieButton.vue

<template>
  <div class="button-container">
    <div class="button-box">
      <button type="button" class="btn btn-primary" @click="register">등록</button>
    </div>
    <div class="button-box">
      <button type="button" class="btn btn-secondary" @click="cancel">취소</button>
    </div>
  </div>
</template>

filter 문제인줄 알고 하루를 꼬박 필터 공부에 쏟았다.. 앞으론 에러가 생기면 문제의 발생 지점을 꼼꼼하게 따져보고, 다양한 가능성을 고려해야 겠다.