2023-11-30 본 캠프 41일차 / 60일차 TIL

2023-11-30 본 캠프 41일차 / 60일차 TIL

 

주요 진행사항

 

- 내일배움캠프 리액트 심화과정 개인과제 수행

 

개인과제 진행사항

1.  현재 진행도

 - json-server와 redux-thunk 이용한 게시물 CRUD 구현

 

- 개인 프로필 업데이트

 

2. 어려웠던 점 & 해결한 부분

- 로그인 시 프로필 이미지가 없을 때 기본이미지 등록

최초 회원가입을 할 때 프로필 이미지를 등록할 수 없는 구조이다.

따라서 내정보의 avatar 데이터를 이미지로 보여줄 때 페이지에서 default로 보여줄 수는 있지만, 회원 정보에 등록된 avatar 정보는 없는 것이다.

 

이 문제를 해결하기 위해 로그인 시 회원정보의 avatar 값이 없다면 profile update(patch)를 통해서 기본 이미지를 업데이트 시키고자 했다.

 

문제 발생

최초 profile 업데이트를 시킬 때 이미지 src 데이터를 서버에 보내려고 시도하였다.

서버에서는 이미지 src가 아닌 file Object를 이미지 src로 변환시키기 때문에 보내는 데이터는 file Object여야 한다.

따라서 최초에 src데이터를 서버에 보냈을 때는 원하는 결과를 얻을 수 없었다.

 

문제 해결

기본적으로 input의 file type으로 선택하면 file object가 생성된다.

하지만 현재 상황은 input을 통해 이미지를 선택한 상황이 아니라 이미지 src를 가지고 있는 상태이다.

로직을 통해서 이미지 src를 file object로 변경시켜야 했다.

 

검색을 통해 비동기적으로 이미지를 file Object로 변환 시키는 방법을 찾았다.

const convertURLtoFile = async (url) => {
      const response = await fetch(url);
      const data = await response.blob();
      const ext = url.split(".").pop();
      const filename = url.split("/").pop();
      const metadata = { type: `image/${ext}` };
      return new File([data], filename, metadata);
    };

 

로직에 대한 간단한 설명은 다음과 같다.

1. fetch를 통해 이미지 url의 데이터를 가져온다.

2. .blob()을 통해 가져온 데이터를 이진 데이터로 변환

3. ext는 확장자를 가져오기 위해 (.) 을 기준으로 split 한 값의 마지막 값을 가져옴

4. filename의 이름을 가져오기 위해 (/) 를 기준으로 마지막 값 가져옴

5. file 형식으로 return

 

이 방법을 통해서 로그인 시 사용자 데이터의 avatar 값이 없을 때 기본 데이터를 부여할 수 있었다.