Spring Boot에서 Blob URL 제공 및 Vue.js로 이미지 표시하기

on

 

Spring Boot에서 Blob URL 제공 및 Vue.js로 이미지 표시하기

Spring Boot에서 Blob URL 제공 및 Vue.js로 이미지 표시하기

웹 애플리케이션에서 사용자에게 이미지를 제공할 때 효율적인 방법 중 하나는 Blob URL을 사용하는 것입니다. Blob URL은 브라우저 메모리에서 생성된 URL로, 서버에서 제공한 파일 데이터를 클라이언트가 직접 메모리에 로드하여 사용할 수 있습니다. 이 글에서는 Spring Boot를 활용해 Blob URL을 생성하고, Vue.js로 이미지를 표시하는 방법을 단계별로 설명합니다.


1. Blob URL이란?

Blob URL은 브라우저가 Blob(Binary Large Object) 데이터를 참조할 수 있도록 생성된 임시 URL입니다. 브라우저는 이를 통해 데이터를 별도의 파일 저장 없이 렌더링할 수 있습니다. Blob URL은 주로 대용량 데이터를 로컬에서 처리할 때 사용됩니다.

Blob URL의 장점

  • 빠른 로드 속도: 데이터를 메모리에 로드하므로 디스크 I/O 없이 빠르게 렌더링 가능합니다.
  • 보안 강화: Blob URL은 브라우저 세션에만 유효하며, 세션이 종료되면 자동으로 소멸합니다.
  • 사용 편의성: 대용량 이미지나 동영상 파일을 임시로 제공하는 데 적합합니다.

2. Spring Boot에서 Blob URL 제공하기

Spring Boot를 사용해 서버에서 이미지를 제공하는 코드를 작성합니다. 서버는 이미지 데이터를 스트리밍 방식으로 반환하며, 클라이언트는 이를 Blob URL로 처리합니다.

Controller 작성

아래는 Spring Boot Controller를 사용하여 로컬 파일을 Blob 형태로 반환하는 예제입니다. 

import org.springframework.core.io.Resource;
import org.springframework.core.io.UrlResource;
import org.springframework.http.HttpHeaders;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.net.MalformedURLException;
import java.nio.file.Path;
import java.nio.file.Paths;

@RestController
public class ImageController {

    @GetMapping("/api/image-file")
    public ResponseEntity<Resource> getImageFile() {
        try {
            // 이미지 파일 경로 설정
            Path imagePath = Paths.get("path/to/your/image.jpg");
            Resource resource = new UrlResource(imagePath.toUri());

            if (!resource.exists()) {
                return ResponseEntity.notFound().build();
            }

            // Content-Type 설정
            String contentType = "image/jpeg";
            return ResponseEntity.ok()
                    .contentType(MediaType.parseMediaType(contentType))
                    .header(HttpHeaders.CONTENT_DISPOSITION, "inline; filename=\"image.jpg\"")
                    .body(resource);
        } catch (MalformedURLException e) {
            e.printStackTrace();
            return ResponseEntity.badRequest().build();
        }
    }
}

주요 포인트

  1. UrlResource 사용: 로컬 파일을 Resource로 변환하여 반환합니다.
  2. HTTP 헤더 설정: Content-Type과 Content-Disposition을 설정해 클라이언트가 이미지를 올바르게 렌더링할 수 있게 합니다.
  3. 에러 처리: 파일이 존재하지 않거나 잘못된 경로가 입력된 경우를 대비한 예외 처리를 추가합니다.

3. Vue.js에서 Blob URL로 이미지 표시하기

서버에서 제공된 이미지 데이터를 클라이언트에서 Blob URL로 변환하고 이를 <img> 태그에 표시하는 방법을 살펴봅니다.

Vue.js 컴포넌트 작성

아래는 Vue.js로 Blob URL을 생성하고 이미지를 표시하는 컴포넌트 코드입니다. 

<template>
  <div>
    <h1>Blob URL Example</h1>
    <img v-if="imageUrl" :src="imageUrl" alt="Loaded Image" />
    <p v-else>Loading image...</p>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      imageUrl: null, // Blob URL 저장
    };
  },
  methods: {
    async fetchImageFile() {
      try {
        // 서버에서 이미지 데이터 가져오기
        const response = await axios.get("/api/image-file", { responseType: "blob" });

        // Blob URL 생성
        const blob = new Blob([response.data], { type: "image/jpeg" });
        this.imageUrl = URL.createObjectURL(blob);
      } catch (error) {
        console.error("Error fetching the image file:", error);
      }
    },
  },
  async mounted() {
    await this.fetchImageFile();
  },
  beforeDestroy() {
    // Blob URL 해제
    if (this.imageUrl) {
      URL.revokeObjectURL(this.imageUrl);
    }
  },
};
</script>

설명

  1. Axios를 통한 데이터 요청: 서버에서 Blob 데이터를 가져옵니다.
  2. Blob URL 생성: URL.createObjectURL(blob)을 사용해 클라이언트 메모리에 임시 URL을 생성합니다.
  3. 메모리 관리: Blob URL은 사용 후 URL.revokeObjectURL(blobUrl)로 메모리에서 해제합니다.

4. Blob URL 사용 시 유의사항

Blob URL은 브라우저 메모리를 사용하므로 관리가 중요합니다. 아래 사항을 유의하세요:

  • 메모리 해제: Blob URL은 필요하지 않을 때 반드시 해제하여 메모리 누수를 방지합니다.
  • 보안 관리: Blob URL은 세션이 종료되면 유효하지 않으므로 장기 저장 용도로는 적합하지 않습니다.
  • 브라우저 호환성: Blob URL은 대부분의 최신 브라우저에서 지원됩니다. 그러나 구형 브라우저에서는 정상 작동하지 않을 수 있습니다.

5. 결론

Spring Boot와 Vue.js를 활용하면 Blob URL을 생성하여 클라이언트에 이미지를 효율적으로 제공할 수 있습니다. Spring Boot는 이미지를 스트리밍 방식으로 제공하고, Vue.js는 이를 Blob URL로 변환하여 <img> 태그에 표시합니다. 이 방식은 대용량 파일 처리, 빠른 로드 속도, 보안성을 동시에 제공하므로 다양한 웹 애플리케이션에서 활용할 수 있습니다.


Comments

Post a Comment