이미지를 웹에서 효율적으로 로드하려면 클라이언트 측에서 이미지 사이즈를 조정하는 것이 중요합니다. 이를 위해 Axios를 사용하여 이미지 사이즈를 동적으로 변경하는 방법을 알아보겠습니다.

ImageResizer API 생성

Axios를 사용하여 클라이언트 측에서 이미지를 조정하기 위해 먼저 ImageResizer API를 생성해야 합니다. ImageResizer API는 서버에서 이미지를 조정하여 필요한 사이즈로 반환해주는 역할을 합니다.

이미지를 조정하기 위해 Node.js와 Express를 사용하여 간단한 API 서버를 만들어보겠습니다.

// server.js

const express = require('express');
const app = express();

app.get('/resize', (req, res) => {
  const { imageUrl, width, height } = req.query;

  // 이미지를 사이즈에 맞게 조정하는 로직 구현

  res.send(resizedImageUrl);
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

위의 코드에서는 /resize 엔드포인트로 GET 요청을 받아 이미지 URL과 조정할 너비 및 높이를 쿼리 파라미터로 받아옵니다. 실제로 이미지를 조정하는 로직은 개별적으로 구현해야 합니다. 이 예제에서는 그 부분은 생략되어 있습니다.

Axios를 사용하여 이미지 조정하기

클라이언트 측에서 Axios를 사용하여 위에서 생성한 ImageResizer API에 GET 요청을 보내 이미지를 조정할 수 있습니다.

// client.js

const axios = require('axios');

async function resizeImage(imageUrl, width, height) {
  try {
    const response = await axios.get('http://localhost:3000/resize', {
      params: {
        imageUrl,
        width,
        height,
      },
    });

    const resizedImageUrl = response.data;
    // 조정된 이미지를 활용하는 로직 작성

  } catch (error) {
    console.error('Error resizing image:', error);
  }
}

resizeImage('https://example.com/image.jpg', 800, 600);

위의 예제에서는 resizeImage() 함수를 통해 이미지를 조정하고, 조정된 이미지의 URL을 반환합니다. 이후 해당 URL을 활용하여 조정된 이미지를 사용하는 로직을 작성할 수 있습니다.

결론

Axios를 사용하여 클라이언트 측에서 이미지 사이즈를 조정하는 방법에 대해 알아보았습니다. ImageResizer API를 생성하여 서버 측에서 이미지를 조정한 후 클라이언트로 전달함으로써 웹 애플리케이션에서 효율적으로 이미지를 로드할 수 있습니다.