221204 클라우디너리를 활용해 이미지 업로드하기

샨티(shanti)·2022년 12월 4일
0

하루를 마무리 하기 전, 오늘 있었던 일들을 잔잔히 되짚어봅니다.
성공과 실패의 모든 요소에서 '배울 점'을 찾아내어 기록하고,
더 성장하는 내일의 나를 위해 'action plan'을 세웁니다.

어제 AWS S3와 클라우디너리에게 신나게 두드려 맞다가 결국 멘탈이 나가버리고 일찍 집에 들어갔다.
그리고 오늘 다시 도장에 나와서 다른 기능을 구현할까 하다 며칠째 시간을 부은 것이 너무 아까워서 딱 2시간만 고생해보자는 마음으로 브라우저를 켰다.
S3는 다른 사람들이 많이 사용하다보니 레퍼런스가 많긴 많은데 어제 그 레퍼런스들을 참고해서 구현해둔 코드가 제대로 작동하지 않았고...
상대적으로 S3보다는, 영문이기는 하나 클라우디너리 공식 문서를 보는 데 시간을 좀 더 투입했었던지라 노아님이 말씀해주신 클라우디너리로 좀 더 고생 해보기로(ㅎㅎ) 결정.

엊그제 TIL에 쓰기도 했지만 간혹 꿈에서나, 또는 자고 일어나서 말짱한 상태로 코드를 구현하다 보면 안되던 게 되기도 했던지라 약간은 희망을 가지고, 그러나 안되더라도 너무 절망하지는 말자는 마음으로 공식 문서를 찾아 들어갔다.

공식문서를 찾아보다가 문득 그 생각이 들었다.

'지난번 YouTube 영상을 받아올 때도 어쨌든 되는 상태를 만들기 위해 프론트에서 서버와 통신했는데... 클라우디너리 역시 서버측에서 당장 구현하기가 어렵다면 클라이언트 측에서 소통할 수 있는 방법을 취하는게 어떨까?'

그렇게 이틀동안의 대장정을 빠르게 끝마치기로 작정하고 문서를 참고해 우선은 '되는 상태'를 만들어보기로 결정했다.

그렇게 PlaceApiService.js에 말도 안되는 코드를 때려넣었지만 결국 서버에 사진이 잘 올라가는 상태를 만들었다.


// PlaceStore.js
async uploadFirstImage(imageFile) {
    const imageUrl = await placeApiService.upload(imageFile);

    this.firstImageUrl = imageUrl;

    this.publish();
  }

// PlaceApiService.js

 async upload(imageFile) {
    const url = `https://api.cloudinary.com/v1_1/${cloudinaryName}/image/upload/`;

    const formData = new FormData();

    formData.append('api_key', cloudinaryKey);
    formData.append('upload_preset', 'wherewego');
    formData.append('timestamp', (Date.now() / 1000) || 0);
    formData.append('file', imageFile);

    const configOfUpload = {
      header: { 'Content-Type': 'multipart/form-data' },
    };

    const { data } = await axios.post(url, formData, configOfUpload);

    return data.url;
  }


아.......................
예상시간 2시간을 잡았지만 단 30분만에 되는 상태를 만들고나니 지난 이틀이 정말 꿈같았다. 아.................. 하.......................

유튜브, 네이버 서치(blog 정보 스크래핑), 카카오 지도, 카카오 로그인, 네이버 로그인, 클라우디너리, 다음 주소찾기.
이제까지 사용한 외부 API 또는 라이브러리들이다.
그래도 적지 않은 가짓수의 API를 사용했는데 아직도 익숙하지 않다는 점에서 약간 현타가..ㅎ.

어쨌든. 어드민 기능은 뭐가 되었건 내일 스프린트 회의 전까지 마무리를 지어야 하기 때문에 해보려고 했던 다양한 기능들을 정말 거의 다 없애버리다 시피 하여 범위를 줄여놓은 상태이다.
정돈되지 않은 상태라 남은 한주동안 디자인을 적용하고 에러 없는 상태를 만들려먼 기능 추가는 불가능하겠지만 그래도 어드민 페이지를 시도해본것 자체가 큰 챌린지였던 것 같다. 특히 막판에 기능을 다각화하기 위해 여러가지 메모를 남겨두었는데 더 잘 할수 있단 욕심도 생기고... ㅠㅎㅎㅎ 할튼 이번에 한 어드민은 여러모로 아쉬움만 가득....

이제 남은시간이 정말 없다. 마지막까지. 5%의 디테일을 챙기며 포트폴리오 한회차 마무리를 해보자.

profile
가벼운 사진, 그렇지 못한 글

0개의 댓글