오늘 포스팅할 내용

이번 포스팅은 협업을 할때 큰 문제중 하나였던 formData전송에 대해 알아보겠다. 우선 formData는 각종 미디어 정보를 전송 할 수 있는 형식이다. 이 formData를 전송하기 위해서는 몇 가지의 주의사항이 있는데 이번 포스팅에서는 필자는 어떤 문제를 겪었는지에 대해 알아보겠다.

필자의 문제

필자는 해당 formData 전송을 협업과정에서 해보면서 2가지의 문제를 겪었다. 겪은 문제는 아래와 같다 이제 해당 문제들을 해결했던 방법에 대해 알아보자

• http method중 post 요청으로만 해당 데이터를 전송 할 수 있다는 사실을 몰랐다.
• 데이터를 보낼때 다른 데이터 들은 body에 전송할때 객체 형태로 보내지만 formData는 객체 형태로 보내면 전송이 되지 않는다.

https method중 post 요청으로만 form 데이터 전송가능 문제

이 부분은 딱히 필자가 해결 할 수 있는 방법이 아니여서 서버 개발자분에게 해당 api의 method를 post로 변경해달라고 요청했었다. 그러니 해결방법말고 왜 이렇게 post 요청으로만 가능한지에 대해 알아보자

post 요청으로만 formData를 전송 할 수 있는 이유

이 부분은 정확하게 말해서는 formData를 사용하기 위해서는 데이터를 보낼때 Content/type에 대한 설정을 multipart/form-Data 방식으로 지정해줄 필요가 있다. 이게 가능한 http method는 post 밖에 없으며( 이에 대해서는 여러가지 설이있으니 궁금하면 찾아보도록 하자 ) 필자는 프로필 이미지를 전송하는 로직을 구현해야 했기 때문에 post 요청으로 이를 처리했다.

데이터를 전송할때 객체 형태로 데이터를 보내면 전송이 불가능한 문제

이 부분이 필자가 구현할때 가장 시간이 오래걸린 부분이다 하지만 걸린 시간에 비해 정말 간단한 문제여서 만일 필자와 같은 상황이 나온 사람이 있다면 이 부분을 꼭 보고 해결하길 바란다.
우선 2가지의 예시를 들어 설명해보겠다.

필자가 가장 처음 작성한 코드 예시

아래의 코드는 필자가 처음 작성한 코드 형태이다 이렇게 작성하면 위에서 말했듯이 body에 값을 담기위해 {}를 열고 사용하게 되는데 이렇게 되면 formData를 전송 할 수 없는 문제가 있다.

axios.post('/url',{
	header: {
    	"Content-Type": "multipart/form-data",
    },{
    	value : formData가 담긴 변수
    }
})

위에서 생긴 문제를 해결하기 위해 아래와 같이 작성을 하는데 이렇게 작성하면 한가지 의문이 들수 있다. 만약 서버에서 value 라는 이름으로 데이터를 전송해달라고 요청했는데 이렇게 전송하면 키값을 지정 할 수 없는게 아닌가? 하는 문제이다. 이에 대해서는 좀더 아래에서 설명하겠다

axios.post('/url',{
	header: {
    	"Content-Type": "multipart/form-data",
    },formData가 담긴 변수
})

formData key값 지정하는 방법

보통 formData를 전송할때는 아래와 같이 formData 형식의 데이터를 생성하여 append로 추가하고 위와 같이 http method에 담아서 전송한다. 이 과정에서 아래의 코드 append 부분을 보면 key , value 형태로 파일을 추가해주는 형태를 볼 수 있는데 여기서 key 값이 전송할때의 key값이 되므로 서버 개발자 분이 formData의 이름을 value라고 보내 달라고 한다면 아래와 같이 key 값을 지정하여 위와 같이 보내면 되는 것이다.

const formData = new FormData();
const targetFiles = event.target.files;
formData.append("value", targetFiles[0]);

결론

{}열어서 key 지정하지 말고 append 할때 잘 지정하자