s3 버킷에서 이미지를 가져오는 방법

<<채팅 리스트 페이지 figma도안>>

채팅페이지와 채팅 리스트 페이지에는 닉네임, 특정인의 이미지를 불러와야한다.

React에서 s3버킷에서 이미지를 불러오는 방법에는 두 가지 방법이 있다.

1. 이미지를 불러오는 api를 백엔드에서 생성하고, api를 호출하기
2. aws amplify library를 사용하여 클라이언트에서 직접 이미지 불러오는 방법

내가 예전에 사용한 방법은
1번 말 그대로 api를 가져와서 호출한다.

아마 사이드 프로젝트에서는 백엔드와 협의 후 1,2번 중에서 선택할 것 같다.

아래는 1번 코드의 예제이다.

const ImageComponent = () => {
  const [imageData, setImageData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
		
        const result = await axios.get('api url로 설정');
        setImageData(result.data);
      } catch (error) {
        console.error(error);
      }
    };
    fetchData();
  }, []);

  return imageData ? <img src={imageData} alt="description" /> : <div>Loading...</div>;
}

export default ImageComponent;

이미지를 가져오는 방법으로는 사실 2번도 흥미로워서, 도전해보고 싶긴하다.
기회가 된다면 백엔드 분들과 같이 잘 협의해봐야겠다.