주말이 지나고 월요일이 밝아 하루동안 열심히 코딩을 짰다. 소통을 열심히 하고 백엔드 파트너 분과 함께 부분을 나눠서 나는 이미지 업로딩, 파트너 분은 JWT 모바일 인증을 구현하기로 하고 열심히 했다.
결과적으로 말한다면 무사히 이미지 업로딩 부분을 완수했다. 생각보다 상당히 흥미로운 과정이고 생각보다 과정이 다이렉트해서 쭉쭉 해결할 수 있었다. 중간에 알수없는 에러도 떴지만 그래도 하루안에 끝낸게 다행이라고 나는 생각한다.
먼저 아마존의 s3 버킷을 생성해 그곳에 이미지를 생성하기로 결정해 aws-sdk라는 모듈을 다운 받아 사용해야 한다. 이 모듈의 기능 중 내가 사용할 부분은 upload와 delete이었다. upload는 말 그대로 이미지를 버킷에 담아두는 역할이고 delete은 버킷에 있는 이미지를 찾아 삭제해주는 기능이다.
const s3 = new AWS.S3({
accessKeyId: ID,
secretAccessKey: SECRET,
region: "ap-northeast-2",
});먼저 이런식으로 초기 연결 세팅을 해줘야 한다. 버킷을 만들면 받는 액세스 키 아이디와 키를 사용해 연결을 할수있는 권한을 받는다.
export default function uploadFile(imageName: string, imageData:string) {
return new Promise(((resolve, reject) => {
const params:{Bucket:any, ACL:string, Key: string, Body:any} = {
Bucket: BUCKET_NAME,
ACL: "public-read",
Key: imageName,
Body: fs.createReadStream(imageData),
};
// ? ContentType:
//* MIME 타입이다. 파일에서 확장자가 없을 때는 반드시 MIME 타입을 설정해야 합니다. 확장자가 있는 파일은 확장자에 따라 자동으로 설정되므로 이 항목을 설정하지 않아도 된다.
//* 하지만 HTTP에서 주로 사용하는 확장자가 아닐 때는 자동으로 설정되지 않으므로 MIME 타입을 설정해주어야 한다.
s3.upload(params, (err:Error, data:any) => {
if (err) {
reject(err);
}
console.log(data);
console.log(`File uploaded successfully. ${data.Location}`);
resolve(data.Location);
});
}));
}이후 그 정보를 사용해 안의 세부 사항을 설정 해주고 바로 upload를 실행해주면 된다. 타입스크립트라 그런지 타입을 일일히 설정해주는데 시간이 걸리고 에러도 나와 any로 지정해버린 부분도 있다. 현재 이 코드는 내가 로컬에 있는 이미지를 올려보는 것으로 테스트 하는 것이라 fs 모듈을 사용해 이미지를 stream으로 바꿔 올려주었다. 포스트맨으로 실행시켜본 결과 잘 작동했다. 업로드를 하면 결과값으로 데이터라는 객체를 받게 되는데 그 데이터의 location이 바로 주소값이다.
이미지를 삭제하는 기능도 매우 유사하게 작동한다.
두 함수들을 따로 작성해 export한 후 필요한 route 부분에 import를 해서 적용해 주었다. 유저 프로필 사진 업로드, 고양이 프로필 사진 업로드, 그리고 포스트 사진 업로드 부분을 맞춰서 수정해주었다. 다만 다시 보니 유저 프로필 사진을 삭제하고 기본이미지로 돌아가는 기능이 없어 빨리 만들고 api 문서를 update해주었다.
글로 정리하니 매우 수월한데...에러가 생각보다 많았다. 약간 정리하는 식의 글은 이런경우가 많아 웃프다....허허
JWT 모바일 인증이 생각보다 어려워 그 부분을 같이 하러 가고 진행이 잘된다면 이후에 프런트에 뛰어들면 될 것 같다.
