10/13 - Next.js FormData 다루기

Next.js FormData 다루기

프론트엔드

FormData를 프론트단에서 어떻게 보내고 백엔드 단에서 어떻게 받아야 하는지 정리하려 한다.

우선 React 컴포넌트에 form 태그를 통해 FormData로 보낼 내용을 작성한다.

<form onSubmit={handleFormSubmit} ...>
          <p>이메일</p>
          <div>
            <input
              name="email"
            />
          </div>
          ...
</form>

React에서 formData를 e.target으로 가져왔을때 인식하지 못하는 오류 · Issue #33 · 1004ljy980/CharFlyer (github.com)

React에서 formData를 e.target으로 가져왔을때 인식하지 못하는 오류 · Issue #33 · 1004ljy980/CharFlyer

중요한 점은 form을 통해 FormData형태를 보내기 위해서는

input 태그에 `name` 프로퍼티로 key를 지정해주어야 한다는 점이다.

( 지정하지 않으면 key-value 형식의 데이터가 생성되지 않는다. )

      // 폼 데이터 정의
      const form = e.currentTarget;
      const formData = new FormData(form);

onSubmit 이벤트 객체의 e.currentTarget 으로 form을 받아들인다.

그후 new FormData(form) 을 통해 FormData를 정의한다.

콘솔로 확인한 formData 값

그 후 FormData 객체의 keys(), get() 메소드를 통해 내용을 확인하여, 객체가 성공적으로 생성되었는지 확인한다.

 

FormData 전송 Error: Multipart: Boundary not found · Issue #34 · 1004ljy980/CharFlyer (github.com)

FormData 전송 Error: Multipart: Boundary not found · Issue #34 · 1004ljy980/CharFlyer

이때 FormData를 보낼 때 유의할 점이 있다.

이 상태로 보내도 문제가 없을 것 같지만, 위의 이슈 내용을 살펴보자.

Error: Multipart: Boundary not found

단순히 보내려고 하면 이러한 오류가 발생할 수 있다.

 

해결 방법을 간단하게 정리하자면 아래와 같다.
(출처 : [Node.js] Multer - fetch 파일 전송 에러: Error: Multipart: Boundary not found (tistory.com) )

1. form 태그에 encType을 지정한다.

<form ... encType='multipart/form-data' >

2. Content-Type을 지정하지 않는다.

const POST_FORM = {
  method: 'POST',
  headers: {
    // 'Content-Type': 'multipart/form-data'
    // 해당 값은 encType에 의해 자동으로 지정될 것임.
  },
};

 

이렇게 처리해준다면 해당 오류를 해결할 수 있다.

 

백엔드

백엔드에서는 받은 FormData를 심플하게 열어보겠다.

export async function POST(request: Request) {
  try {
    const Users = await connectToDatabase();
    const data = await request.formData();
    console.log(data.get('name'));
    ...

    return NextResponse.json(created);
  } catch (error) {
    console.error(error);
  }
}

해당 POST 함수를 통해 POST 라우팅을 설정할 수 있다.

request의 formData() 메소드를 통해 전달받은 FormData 값을 얻어낼 수 있다.

얻어낸 FormData를 get(key) 하여 값을 이용할 수 있다.

위에서 보낸 프론트엔드 FormData의 name값을 성공적으로 참조할 수 있었다.

 

+ 추가 내용

 

배열 값 처리하기

일반적인 JavaScript 배열의 내용은 name 프로퍼티를 지정하여도 자동으로 받아들일 수 없다.

FormData에 배열 값을 삽입하고 싶다면 같은 key 에 내용들을 차례대로 넣어주면 된다.

// 배열은 같은 key 이름으로 여러 번 넣어주기
tags.forEach(tag=> {
  tag && formData.append('prefferedTags', tag);
})

백엔드 코드에서는 getAll(key)를 사용하여 배열 값을 받아들일 수 있다.

const data = {
...
  preferredTags : formData.getAll("prefferedTags"),
}