231214 [TIL] 백오피스 팀프로젝트 3일차

요약

 

메뉴 생성을 하던 중 thunderclient가 무한로딩이 되었다. aws s3에는 이미지가 잘 전송되고 있었는데 사용자에게 보여지는게 안되고 있었다.

---

고민한 내용- 한글이 포함된 파일 이름을 안전하게 저장하기

문제는 imageuploader 미들웨어에 있었다. 

        key: (req, file, cb) => {
            cb(null, 'product_image/' + Date.now() + '_' + file.originalname);

 

내가 보내는 파일은 한글이름으로 된 파일이었는데 그러다보니 문제가 발생했다. file.originalname이 한글을 제대로 처리하지 못하는 문제였다. 

 

---

 

생각한 해결 방법- UUID

안전성을 고려해서 uuid라는 식별자를 사용하기로 했다. 

https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID

Crypto: randomUUID() method - Web APIs | MDN

 

 let uuid = crypto.randomUUID();
            const extArray = file.originalname.split('.');
            const ext = extArray[extArray.length - 1].toLowerCase();
            cb(null, `product_image/${uuid}.${ext}`);

 

UUID 는 랜덤으로 파일명을 만들어준다. UUID는 무작위로 생성되며 전 세계적으로 고유한 값을 가지는 식별자라고 한다.

extArray라는 변수를 생성하여 file.originalname을 점(.)을 기준으로 분할하여 확장자를 추출한다. 파일 안에 점(.)이 여러개있을수도 있으니 확장자는 배열 마지막 요소에 위치한다.

추출한 확장자는 소문자로 변환해 ext 변수에 저장된다. 소문자로 따로 변환해주는 이유는 파일 확장자가 대소문자를 구분할 수 있기 때문에 파일 시스템이나 url에서 사용할 때 일관성을 유지하기 위해서다.

 

cb(null, product_image/${uuid}.${ext}); 를 통해 파일이름을 생성한다. product_image/는 파일경로, ${uuid}.${ext}는 UUID를 사용한 파일이름과 확장자를 합친 거다.

 

 

---

회고

튜터님이 많은 도움을 주셨다. mozila 사이트에서 UUID를 검색해서 사용법을 보고 할 수 있는 방법을 가르쳐주셨다.

 

 

---

 

제목1

 

본문1

---

제목1

 

본문1

---

 

도움되었던 유튜브링크: 튜터님 영상

https://www.youtube.com/watch?v=xGcroJ9bL9c&list=PLraqxKY_jbi7UlXB3fMXon4K6GoEo07lP&index=3

https://www.youtube.com/watch?v=k9e0ByYi4OM&list=PLraqxKY_jbi5GJ98qr5SmYf7RE6b49_so&index=10&t=3s

 

---