[Error Handling] 배상건 / form 태그 내부의 button 태그를 이용해 axios 요청 시, 이벤트 버블링 발생

> ### 어떤 에러인가요?
> 키워드 : 게시물 수정, 수정버튼, onClick, axios, form > button, 이벤트 버블링
> ### 에러 메시지
> ```shell
> $ 터미널의 에러 코드를 여기 넣어주세요.
> ```
>
> ### 에러 핸들링 방법
> * 핸들링 방법에 대해서 간단하게 기록해보세요.
>
> #### 문제의 코드
> ```jsx
> const registerPost = () => {
> window.scrollTo({ top: 0, left: 0 });
> if (
> inputTitle !== "" &&
> inputDiary !== "" &&
> inputDate! == ""
> ) {
> const formData = new FormData();
> uploadFiles.forEach((file) => formData.append("image", file));
> formData.append("imageDelete", imageDelete.join(","));
> formData.append("imagePath", postImagePath.join(","));
> formData.append("title", inputTitle);
> formData.append("diary", inputDiary);
> formData.append("day", inputDate);
> formData.append("address", addressInput);
> formData.append("latitude", `${addressCoordinate[0]}`);
> formData.append("longitude", `${addressCoordinate[1]}`);
>
> const result: any = await axios.patch(
> `${process.env.REACT_APP_API_URL}/plan/postId=${location.state.postData.postId}`,
> formData,
> {
> headers: {
> Authorization: `Bearer ${accessToken}`,
> "Content-Type": "multipart/form-data",
> },
> }
> );
> if (result) {
> navigate(`/detail`, {
> state: {
> postId: location.state.postData.id,
> postInfo: location.state.postData,
> },
> });
> } else {
> setIsCompleted(false);
> }
> };
>
> return (
>
>
> registerPost()}>수정 // 는 styled.button입니다.
>
> 취소
>
>
>
> )
> ```
>
> ### 에러 핸들링을 위해 참고한 레퍼런스 링크
> 링크
[form 버블링] https://velog.io/@albaneo0724/JavaScript-form%ED%83%9C%EA%B7%B8%EC%99%80-button-%ED%83%9C%EA%B7%B8%EC%9D%98-%EA%B4%80%EA%B3%84

[ 버블링 -모던 JS ] https://ko.javascript.info/bubbling-and-capturing