multipart/form-data 형태로 JSON데이터와 이미지 파일 서버에 같이 전송시키며 겪게된 시행착오들

이번에 나가는 한국관광공사x카카오 공공 api 활용 공모전 프로젝트를 진행하며, 숙소 등록 화면의 프론트엔드와 백엔드를 병합시키는 과정에서 JSON 데이터만을 String 형태로 변환하여 사용자가 입력한 데이터를 서버에 보낼때는 문제 없이 작동했지만, multipart/form-data 형태로 바꾸어 서버에 이미지 파일과 Json데이터를 같이 보낼 때 정말 많은 오류들을 발생해 숙소 등록시에 이미지를 서버와 aws s3를 활용한 DB에 제대로 보내지 못하고 있던 상황이었다.


3주동안 해당 오류에 직면하게 된 이유는 아무래도 앱 개발 환경과 백엔드와의 통신, React Native 언어를 모두 처음 접해보는 것이었기에 사소한 오류에서부터 남들보다 힘겹게 걸음마를 떼기 시작한게 가장 크지 않을까 싶다.


잡담은 여기까지하고 그럼 이제 내가 3주동안 가장 고통받았던 몇몇 오류 코드들을 토대로 어떤 시행착오들을 겪게 되었는지 정리해보도록 하겠다. ( rn환경에서 라이브러리를 활용해 서버에 이미지파일과 JSON파일을 동시에 보내는 RN관련 핵심 정보글은 추가로 깔끔하게 정리해둘 예정)


먼저 글쓴이는 React가 아닌 React Native를 사용하며 프로젝트를 진행 중이기에 웹 환경이 아니라 앱 환경에서 Axios와 fetxh api를 사용하여 blob, cors, XMLHTTPRequest 등의 개념들이 웹환경과 달리 쓰이지 않거나 사용법이 다르며, 서버는 같이 진행하는 백엔드 측에서 배포한 서버를 활용한다는 점, 이미지 파일을 다루기 위해 React-native환경에서 react-native-fs, image-picker등의 라이브러리를 활용했다는 점 (같은 앱 환경이라도 쓰는 언어에 맞는 라이브러리를 끌어와야할 수 있음) 등을 참고해 읽어주면 좋겠다. 
 
 
 
 
 

겪었던 시행착오들

 
 

 

[axios network 에러]

해당 오류는  어떠한 이유에서든 axios 라이브러리를 통해 서버와 통신할 때 axios와 서버측과의 통신이 제대로 이루어지지 않았을 때 발생하게 되는 에러이다. 나같은 경우엔 서버는 제대로 작동하여 엑세스 토큰을 받아 post 요청을 보내려 하는 상황임에도 이 오류를 50번이상은 보게 된 것 같다. 주로 axios 라이브러리 사용법에 익숙하지 않았을 때 접하게 된 오류였으며, 사소한 변수명이라도 서버측에서 명시한 것과 다르거나 Content-type이 서버측과 일치하지 않을때 자주 발생했던 것 같다.. (서버측에 데이터자체가 전달이 안되는 경우에 주로 발생한다.)
 
(+ 웹에선 웹보안 정책과 관련된 문제인 cors 때문에 주로 발생)

아직까지 네트워크 통신에 대해 전문적으로 알진 못하기에 내가 경험했던 해당 오류가 뜨는 이유에 대해서만 정리해보자면, network error밑에 axios post요청에 대해 try-catch문으로 예외처리 해둔 문구를 보면 request 자체가 서버로 도달하지 못했다는 문제가 발생했다는 걸을 알 수 있다. 이는 서버 uri를 중간에 /슬래쉬를 연달아 uri를 잘못 적었을 때와 서버가 원하는 데이터의 형태와 내가 보내는 데이터의 형태가 다를 때에 request자체에 문제가 있었을 때 겪게 되었던 에러 코드이다. (위의 오류에선 JSON데이터의 type이 서버에서 기대한 'applicaton/json' 이 아니라 'application/x-www-form-urlencoded' 형태로 전송중이므로 서버로 request가 제대로 전달되지 못하고 있다는 에러코드이다.)


해당 에러는 JSON 파일만을 보낼때는 텍스트로만 이루어진 DTO객체를 JSON파일 형식의 문자열로 변환하여 서버에 전송하기만 되었었지만 이미지파일과 같이 보내게 되며 formdata에 해당 객체를 추가하는 방식으로 코드를 수정하는 과정에서 blob객체를 잘 못 사용하여 Content-Type이 'application/json'으로 처리되지 않고, 불분명한 텍스트 문자열 데이터들을 처리할 때 사용되는 기본타입인  'application/x-www-form-urlencoded'으로 서버에 전송되며 서버가 기대한 데이터 type이 달라 request에러가 생겼던 것 같다. (시간이 많이 지난뒤 정리하는 것이기에 정확하게 복원하는 것은 힘든 점 양해부탁드립니다.) 
 
 
해결 방법) 해당 오류를 직접적으로 해결하진 못했었고, 직접적으로 해당 오류를 해결했던 것은 아니였고 form-data에 이미지 파일과 같이 보내기전 JSON파일만을 먼저 테스트할 때 발생했던걸로 기억하는데 이미지 파일과 관련된 데이터를 추가해주니 아래와 같은 에러로 바뀌게 되었음 + blob은 웹에서는 기본적으로 지원해주지만 앱에서는 지원해주지 않아 외부 라이브러리를 사용해야 하는데 정보글이 웹위주의 코드들이 많았어서  blob객체를 잘 못 선언한게 문제 였던 것 같고, blob객체를 앱환경에 맞게 설정한 다음, 파일 시스템 관련 라이브러리를 활용해 파일로 변환하여 formData에 JSON데이터를 파일로 추가하며 파일의 Type을 'applicaiton/json'으로 지정해주면 해결될 것 같다 (관련 오류들을 해결하고 나니 지금 봤을 때 이렇게 하면 되겠구나를 적어둔 것이므로 참고만 해주세요)
 
 
 
 
 
 

 
 

[TypeError: Nework request failed]

 
해당 오류는 서버측에서 기대하는 content-type과 클라이언트 측에서 보내는 데이터의 content-type이 다를 때 주로 발생하지만, 나같은 경우엔 이미지를 파일형태로 제대로 처리하지 못한 경우에도 자주 보게 되어 axios Network와 같이  50번dms 넘게 보게 되었떤 에러 코드이다. 주로 네트워크 통신과 RN환경에서의 이미지를 파일로 처리하는 방법에 익숙하지 않았을 때 자주 접하게 되었다.
 
 
해결 방법) 서버측에서 원하는 content-type을 postman등의 라이브러리들을 활용해 체크한다음 해당 type으로 데이터를 보내주면 된다. 글쓴이 같은경우는 이미지를 파일 형태로 참조하여 보내지 못할 때 많이 보게되었던 에러므로 파일 시스템 라이브러리를 활용해 실제 파일로 변환한듬 참조하여 formdata에 추가해주었더니 해결 되었다. (다른 오류로 바뀜)
 
 
 
 
 
 

 
 

[ 'application/octet-stream' is not supported 에러]

 
해당 오류는 이미지 파일을 완벽하게 form-data에 참조하여 보내는 중이라는 것을 공부를 통해 거의 확신하고 있던 상황에서 불분명한 파일에 대해 default값으로 데이터를 처리하는 'application/octect-stream'으로 자꾸 처리되는 것을 보고 멘탈이 부서지다 못해 증발까지 하게 만든 오류로, 손에 꼽힐정도로 많이 봤던 에러코드였는데 주로 JSON객체의 type을 서버가 원하는 방식인 'application/json'으로 명시 해주지 않아 같이 formData에 추가된 파일을 제대로 인식하지 못하여 자동으로 불분명한 파일 객체를 처리하는 content-type인 'application/octet-stream' 형태로 데이터가 전송되어, multipart/form-data형식의 데이터들만 받아들이게 설정해둔 서버측에서 내뱉는 에러코드였다. 마지막에 이 부분에서 거의 절망을 경험했기에 직접 포스트맨으로 데이터를 쏴보는 시행착오 끝에 겨우 해결되었고, 관련하여 참고했던 블로그중 정말 많은 도움이 되었던 블로그 링크를 아래 적어두도록 하겠다. ( 참고록 해당 블로그는 웹 환경이기에 앱환경이었던 글쓴이는 또 직접 몸으로 부딪히며 앱환경에서 해당 개념을 적용해보느라 시간이 정말 많이 갈렸었는데, 앱환경이신 분들은 추후에 작성할 예정인 JSON파일과 이미지파일 서버로 보내는 방법에 대한 제 블로그 글을 참고해주시면 감사하겠습니다.)
 
 
https://velog.io/@hhhminme/Axios%EC%97%90%EC%84%9C-Post-%EC%8B%9C-Contenttypeapplicationoctet-streamnotsupported-%ED%95%B8%EB%93%A4%EB%A7%81415-%EC%97%90%EB%9F%AC

Axios에서 Post 시 Content type 'application/octet-stream' not supported 핸들링(415 에러)

 



 
 
 
 

그 외의 여러 에러 코드들

 
 

 
 
이미지를 파일 시스템 라이브러리를 통해 전달하지 않고 blob 객체를 base 64인코딩 방법으로 서버에 전송을 시도할려 했을 때 발생했던 에러사항이다. (base64로 인코딩하면 파일 하나 업로드하는게 엄청 메모리를 많이 차지한다는게 별로 체감이 안되었는데 스크린샷 내용의 2배를 채우는걸 보고 이건 어지간해선 쓰면 안되겠다고 바로 느끼게 되었던,,) 
 
 
 
 

 
 
blob 객체를 제대로 선언했음에도 불구 하고 NetWork error가 발생했었음 -> 파일 시스템 라이브러리를 통해 파일로 변환시켜서 JSON파일형태로 서버에 보내야 서버에서 기대하는 데이터 형태와 일치되게 된다는 걸 postman으로 직접 데이터를 보내본다음알게됨
 
 
 
 
 

 
 
multipart-type중 하나가 누락 되어 발생하게 오류가 발생했었음 --> 웹환경이 아닌 앱환경에서 blob을 활용해 application/json 타입으로 JSON데이터를 다루는 부분에 미숙했을 때 주로 발생했었고, blob을 파일시스템을 활용해 파일형태로 변환하는 과정에서 typr을 application/json 으로 지정해주며 해결됨
 
 
 
 
이 외에도 3주동안 정말많은 시행착오와 셀수 없는 오류코드들을 반복해서 보게 되었었는데 하나하나 자세히 정리하려니 책 한권을 집필해야할 것 같아서 중간쯤부터 간단하게만 정리하게 되었는데, 다음 글에서  JSON데이터와 이미지를 multipart/fome-data 형태로 서버에 보내는 방법에 대해서 제대로 정리해보도록 한다.
 
 
 
RN환경에서 서버 api통신을 하는데에 있어 나와같이 해당부분에서 직접 시행착오를 겪게 될 RN 코린이들의 고통을 덜어주고자 오류들을 기반으로 관련 개념들까지 정리해두고 싶었지만, 에러코드들만 정리해도 너무 힘들어 급하게 글을 마무리 하게 된걸 정말 아쉽게 생각한다.( 더 자세히 작성해달라는 요청이 많아지면 나중에 추가로 작성해볼게요)
 
 
 
앱환경에서, 그중에서도 RN언어를 활용해 서버에 JOSN데이터와 이미지를 보내는 부분에 대한 정보글이나 서적 등이 너무 부족하여, 앱 환경이며 서버와의 api 통신이며 RN이며, 모두 처음이었던 나는 관련 전공서적과 서칭을 통해 직접 시행착오를 겪을 수 밖에 없는데 이부분이 3주동안 끝없는 동굴에 갇힌 기분이라 가장 힘들었지만, 한편으론, 프론트엔드 앱 개발자로서 정말 많이 성장하게 된 것 같아 좋았던거 같고, 무엇보다 이 에러를 포기하지 않고 끝까지 메달려 끝끝내 해결했다는 것이 더 기뻤던 것 같다.




(너무 정신없이 목디스크에 쫒기며 글을 쓰느라 횡설수설하지만 정보글은 깔끔하게 정리해서 올리도록 하겠습니다)