[RN] FormData 트러블 슈팅 - RNMIP 사용법

모두가 붙어서 해결했던 폼데이터 트러블 슈팅

백엔드, 기술매니저님, 프론트엔드 모두가 붙어서 해결했던 삽질 최고 폼데이터 전송방법

---

 

FormData

FormData는 폼을 쉽게 보내도록 도와주는 객체입니다. 이름을 보고 유추하셨듯이 FormData 객체는 HTML 폼 데이터를 나타냅니다.

 

let formData = new FormData([form]);

 

FormData method

• formData.append(name, value) – name과 value를 가진 폼 필드를 추가
• formData.append(name, blob, fileName) – <input type="file">형태의 필드를 추가. 세 번째 인수 fileName은 (필드 이름이 아니고) 사용자가 해당 이름을 가진 파일을 폼에 추가한 것처럼 설정해줌
• formData.delete(name) – name에 해당하는 필드를 삭제
• formData.get(name) – name에 해당하는 필드의 값을 가져옴
• formData.has(name) – name에 해당하는 필드가 있으면 true를, 그렇지 않으면 false를 반환

append 메서드 이외에 필드 추가 시 사용할 수 있는 메서드로 set도 있습니다. set이 append 메서드와 다른 점은 set은 name과 동일한 이름을 가진 필드를 모두 제거하고 새로운 필드 하나를 추가한다는 데 있습니다. 따라서 set 메서드를 쓰면 name을 가진 필드가 단 한 개만 있게끔 보장할 수 있습니다. 이 외에 다른 기능은 append 메서드와 동일합니다.

• formData.set(name, value)
• formData.set(name, blob, fileName)

 

▶︎ 참고사이트

https://ko.javascript.info/formdata

 

브라우저가 보내는 HTTP 메시지는 인코딩되고 Content-Type 속성은 multipart/form-data로 지정된 후 전송

---

일단,

삽질했던 원인 중 하나는
리액트에서 는 폼데이터 전송을 어렵지(?)않게 했었지만 리액트네이티브를 시작하고,
multiple image picker라는 라이브러리를 사용하면서 혼동이 오기 시작했다.

 

1. 리액트에서 코드를 썼을 때는 base64로 변환해서 서버로 전송하는 것이 문제가 되지 않았고
서버 측에서도 문제없이 데이터를 전송받았다.

2. RNMIP 를 사용하면서 문득 서버측에 어떤 데이터를 보내줘야하는 것인가 의문점이 들었다.

이미지를 불러오면 response값이 위 데이터가 담기는데, 여기서 어떤 데이터를 보내줘야하는지 감이 안왔다.

그래서 그냥 reponse값 전체를 보내주고 서버측에 알아서...(?)필요한거 가져가라고 해야하나 싶다가
서버측에 물어봐서 어떤 데이터를 보내주면 되는지 물어봤다.

그리고 서버측에 얻은 답변은 서버에서는 버퍼형식으로 데이터를 받기때문에
위 사진과 같은 데이터로는 받을 수가 없다. 버퍼형식으로 인코딩해서 보내달라 라는 것이였다.

그리고 모두가 붙어서 버퍼형식이 무엇인지에 대해 알아보고
저 데이터를 버퍼형식으로 바꾸고자 구글링하기 시작했다.

https://pg-titannia.tistory.com/102

버퍼는 위의 from() : 하고 적힌 형태를 버처라고 하는 것 같고,
이제 생김새를 알았으니 저렇게 생긴 형태로 변환하고자 라이브러리를 알아보게됐다.

그리고 react-native-fs 라는 filesystem 라이브러리와 react-native-buffer라는 라이브러리를 활용해 base64 또는 buffer로 변환하려고했다. 라이브러리 활용하기 위한 구글링을 하던 과정에서 RNMIP 라이브러리 자체에서 변환이 되는 것을 알게됐고, 어떻게 폼데이터를 작성해서 서버측에서 인식을 할지 알아봤다. 그리고 결론은 'file://' + realPath 로 보내주면 된다는 것을 알게됐다.

 

 

---

 

 

 

 

 

 

 

 

 

 

아래 링크는 백엔드 node.js에서 buffer를 json 형식을 바꿔서 사용하는 것 같아 가져와봤다.

https://www.w3schools.com/nodejs/met_buffer_tojson.asp

Node.js buffer toJSON() Method