가장 먼저 해결해야 했던 문제는 현재 클라이언트에서 이미지 업로딩을 위해 이미지를 base 64형식으로 바꿔 스트림으로 보내주고 있는데 내가 현재 구성해놓은 이미지 업로딩 함수는 테스트를 위해 fs 모듈을 사용해 짜놓은 거라 작동이 안되고 있었다. 그래서 이 문제를 해결하기 위해 base64 형식을 알맞게 포맷 해주는 식으로 코드를 짜주었다. 그 과정에서 클라이언트의 프로미스가 제대로 처리가 안되는 것 같아 그걸 async await으로 해주었다.
먼저 react-natvie의 image picker는 이미지를 base64 형식으로 바로 변환만 해주어서
const imageTarget = `data:image/jpeg;base64,${result.base64}`;앞의 string부분을 붙히고 업로딩을 해주어 base64 형식이고, 또 이미지를 jpeg타입으로 보낸다는 설정을 해준다. 이 부분을 처리한 후 업로딩을 하고 또 서버에서는 약간의 변화를 준다.
const base64Data:string = new Buffer.from(imageData.replace(/^data:image\/\w+;base64,/, ""), "base64");
// const buf = new Buffer(imageData.replace(/^data:image\/\w+;base64,/, ""),"base64")
const params:{Bucket:any, ACL:string, ContentType:string, Key: string, Body:any} = {
Bucket: BUCKET_NAME,
ACL: "public-read",
ContentType: "image/jpeg",
Key: imageName,
Body: base64Data,
};들어온 이미지 데이터를 버퍼로 바꾼 후 replace로 형식을 맞추어주고 content-type 설정과 바디에 데이터를 담아 업로딩 해준다. 그리고 클라이언트 측에서도 이제 디비에 저장된 이미지는 url을 반환해주기 때문에 그걸 렌더하는 식으로 코드도 약간 수정해주었다.
이제 클라이언트는 expo를 통해 코드를 빌드하고 모바일에서 실행하는데 이 어플을 테스트 해보기 위해 컴퓨터에 android emulator를 깔고 필요한 모듈을 깔아 실행해보았다. 생각보다 시간이 매우 오래 걸렸고 내 컴퓨터 사양이 낮아 컴퓨터가 어는 경우도 많았다. 결국 답답해서 그냥 내 개인 핸드폰을 연결해 실행했고 디버거를 키면 속도가 훨씬 낮아진 다는 것을 알아차렸다.
그리고 클라이언트에서는 계속 로컬호스트로 연결했는데 처음에 나는 같은 와이파이라면 핸드폰도 컴퓨터의 로컬호스트로 연결할 수 있을 것이라 생각했다. 하지만 구글링을 통해 알아낸 결과 클라이언트가 요청을 보내는 ip는 컴퓨터 고유의 inet으로 보내야 했다. 우분투의 경우 ip a 를 통해 inet을 알아내고 이 주소로 요청을 보내야 연결이 되었다. 이 ip는 장소를 옮길 수록 계속 바뀌어 업데이트를 해줘야 했다...
그래도 클라이언트로 넘어갈 준비를 마치고 실제 어플을 렌더해보니 매우 신기했다. 이제 본격적으로 코드를 짜면 될 것 같다. 서버에서도 미세한 에러가 난다면 계속 고쳐가며 진행하면 될 것 같다.
