이미지를 서버로 보내고, 클라이언트로 받아오기 (axios, base64)

 

 

문제가 일어난 간단한 배경 설명

클라이언트가 새로 입력한 이미지 데이터를 base64로 변환해서 서버로 보낸다. 

그리고 서버에서 데이터를 받아와서 클라이언트 서버에서 뿌려주기를 원한다. 

 

 

내가 직면한 문제

서버로부터 이미지 데이터(base64로 변환된 데이터)를 무사히 가져왔지만, 이미지가 아닌 문자열로 가지고 오는 것이 문제!

미션!

서버에서 가져온 데이터를 문자가 아닌 이미지로 바꿔라!!

 

 

삽질한 경로

서버에서 데이터는 무사히 가져왔지만, 어라? 그게 이미지가 아닌 서버네?

그럼 애초에 클라이언트가 데이터를 쏠 때를 고치면 되는게 아닐까?????

 

라고 생각해서 유저의 데이터 인풋하는 컴포넌트를 수정해보고, 구글링해서 괜찮아보이는 블로그의 코드도 다 따라해보았다. 

하지만 결과는 fail!!

3시간이 넘도록 같은 삽질을 하다보니 지쳤기도 하고, 새벽 2시가 훌쩍 지났기에 마지막으로 시도를 해보았다. 

 

 

사고의 전환

클라이언트에서 데이터를 전송할 때 문제가 없는거라면, 데이터를 받아와서 뿌려주는 쪽을 수정해볼까??

 

<수정 전 코드>

<div>{data.photo}</div>

 

<수정 후 성공 코드>

서버로부터 데이터를 받아서 화면에 뿌려주는 파일

<img src={data.photo} />

 

 

 

너무 간단히 해결되는 바람에 조금은 허무하기도 하지만 기분은 좋다. 

무작정 달려들기보다, 곰곰이 생각해보고 달려들자..!