개인프로젝트 4주차 주간회고

프로젝트 4주차 끝! 저번주에는 리뷰 작성 기능과 이미지 업로드 기능을 구현했다.

이미지 업로드 기능을 어떻게 구현하게 되었는지 그 과정을 잠깐 정리해보려 한다. 이미지 업로드 기능을 구현하기 전에는 상품의 사진을 url 주소로 등록해야 했다.

지금은 이렇게 파일을 선택해서 내가 원하는 이미지를 상품 이미지로 등록할 수 있다.

이미지 업로드 기능을 구현하기 위해서 열심히 구글링을 하다 BLOB이라는 것을 알게 되었다.
JavaScript에서 BLOB(Binary Large Object)은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용할 수 있다.
URL.createObjectURL()은 BLOB 객체를 가리키는 URL을 만들 수 있었기에 이것을 사용해서 내가 업로드한 파일의 URL을 생성해주었다.
그것의 결과는 아래와 같았다.

blob:http://localhost:8080/97c553d8-4d16-40bb-b630-93071e941393

그리고 이 URL을 아래와 같이 활용할 수 있었다.

<img src="blob:http://localhost:8080/97c553d8-4d16-40bb-b630-93071e941393
" alt="Image" />

하지만 이 BLOB URL은 생성된 window의 document(브라우저)에서만 유효하다는 단점이 있었다. 그래서 클라우드 기반 이미지 관리 서비스인 클라우디너리(Cloudinary)라는 서비스를 이용해서 이미지를 관리하는 것으로 바꾸었다. 이전에 작성한 코드를 지우고 클라우디너리 공식문서에 맞춰 다시 코드를 작성했다. 구현 코드는 https://velog.io/@u-ryu-00/클라우디너리Cloudinary 에 기록해두었다.

이번주 목표는 [카카오 페이 결제 구현, 장바구니 페이지 수정] 이다. 프로젝트 5주차도 👊🏻