이미지 업로드 시 바로 출력하기 (Resource)

DK Lee·2023년 5월 12일
0

프로젝트를 계속해서 만들던 도중에 크나큰 문제가 생겼다.
문제점은 이와 같았다.

  • 이미지 업로드 구문을 만들고나서 이미지를 확인하면 이미지가 깨져있다.
  • 경로를 재차 정상적인 경로로 넣고나서 확인을 해도 여전히 같은 문제가 있다.

                    - 보기만 해도 머리가 어질어질해진다...
                 

여기에서 왜 이미지가 깨지는지 생각해보면, 이유로는 여러가지가 있으나 가장 큰 점은 클라이언트는 백엔드의 구조를 알 방법이 없다는 것이었습니다.

보통 위치를 지정할때 String 기반의 위치를 지정하나 클라이언트는 Http 요청만 파악할 수 있기에 우리가 만든 경로에서 바로 이미지를 불러오는데 자꾸 실패한다는 것이었습니다.

여기에서 착안점을 두어, 경로에 대한 정보를 클라이언트에 지정해두면 이미지를 불러올 수 있지 않을까했습니다.

여기에서 인터넷을 찾아보면 Resourcehandler나 nginx를 이용하는 방법 등 여러가지가 있지만 여기에서는 Restful api를 이용한 Resource로 이미지를 바로 불러오는 방법을 택했다.

(*) FileSystemResource로 경로 지정하기

Resource라는 구문은 spring framework에서 파일 시스템, 클래스 경로, 원격 URL 등의 다양한 리소스에 추상화된 인터페이스입니다. 이 구문을 이용하면 리소스를 저장하거나 사용할 때 사용되는데,

이를 이용하여 저장된 경로를 통한 자원 중 하나인 이미지를 불러올 수 있습니다.

  • FileSystemResource : file을 system에서 load하기 위한 Resource의 구문 중 하나입니다. 이 구문은 파일의 경로나 URL을 전달받아 파일을 로드하고, 메소드들을 구현한 객체를 생성합니다.

ResponseEntity는 Http 응답코드를 의미하며, 여기에서 Resource를 반환합니다.

  • 새로운 FileSystemResource 객체 생성
  • 경로를 외부 디렉토리나 혹은 내부 디렉토리로 지정
  • 디렉토리의 경로에서 Mapping을 통해서 특정한 이미지의 경로 지정
  • return값으로 해당 데이터 내용을 반환

이 방법으로 해당 디렉토리에 해당하는 그림을 저장하는 순간 Restful api로 바로 클라이언트에 해당 경로를 전송하여 바로 이미지를 업로드 하는 순간 볼 수 있게 기능을 해준다.

                       !! 드디어 바라던 녀석이 나타났다 !!
                            

이렇게 구성하면 리소스에 대한 정확한 반환과 함께 이미지도 생성이 된다.

#마무리

이미지 한번 보겠다고 이틀간 ResourceHandler를 이용해봤으나 기본적인 지식 배경없이 인터넷에서 본 코드만 따라썼는데 진행이 되지 않아, 근본적으로 잘못된 점을 느꼈다.

그래서 기본적인 클라이언트가 http 정보를 불러오는 과정에 대한 어느정도 숙달이 필요하다 느껴, 다시 한번 스프링 기본서를 보고 http단에서 소스들을 불러올 수 있는 Resource에 주목하게 되었고, 사용해 볼 수 있는 기회가 되었다.

profile
고진감래(苦盡甘來)

0개의 댓글