[Dev] 23.02.26. 게시글 이미지 로딩 (임시)

 사실 이전에 게시글과 함께 작성하여 게시글 목록에 띄우기 위한 file upload와 관련해서 임시로 작성한 게시글이 있다.^[각주:1] 문제는 그렇게 file이 저장되고 저장한 이미지에 대한 경로까지도 table에 저장되는데 해당 경로로 이미지를 요청했을 때는 이미지가 보이지 않을 뿐더러 바로 다음과 같은 오류가 발생했다.

 

Not allowed to load local resource: file:///C:/Users/kyuhwan/Desktop/Projects/blah~blah

 Server의 외부에 file을 저장하는 공간이 있다고 가정하고 필자의 local folder에 이미지를 저장하도록 하고 그 path를 게시글 data의 image path로 저장하도록 했는데, 화면에 필요한 image를 rendering 하는 과정에서 local resource에 접근하는 것이 허용되지 않았던 것이다. 그래서 이를 우선 제외한 뒤 나머지 작업을 한 것이며, 이제야 페이지에 대한 자료를 캡쳐하기 위해서 다시 이미지를 로딩하기 위한 작업으로 돌아온 것이다.

 

 많은 블로그들에서 이런 작업이 불가능한 이유를 '보안상의 이유'라고 언급하고 있다. 어떤 의미에서 보안상의 이유인지 생각해보면 현재 필자가 작업한 project를 run 하게 되면 필자의 컴퓨터는 server가 되는데, 외부에서 server의 무엇인가에 접근할 수 있다는 점이 문제가 될 수 있는 것 같다. 그래서 browser에서는 이를 막는 것이다.

 

 이런 이유로 필자가 project 내부에 folder를 만들어 그곳에 이미지가 저장되도록 했더니, 이미지가 당연히 정상적으로 나타나기는 한다. 문제는 이미지를 업로드 하더라도 당장 볼 수 있는 것이 아니라, server를 재시작해야 이미지를 볼 수 있게 된다는 것이다. 그래서 필자는 다른 방법을 찾아야 했다.

 

 어디까지나 이미지를 저장하고 로딩하는 부분은 다시 변화될 임시 작업에 불과하다. 하지만 당장은 필요한 내용이라서 관련 내용을 찾아보았고, 한 블로그를 참고할 수 있었다.^[각주:2]

 해당 블로그에서는 특정 url에 대한 요청을 다른 방식으로 바꿔서 이미지 file을 불러오도록 했다. 작업과 함께 살펴보자.

 

 

작업

application.properties

# upload 한 file을 저장할 save directory 설정
file.directory=C:/Users/kyuhwan/Desktop/Projects/recipository_upload

 기존의 application.properties에 작성한 항목이다. 새로 추가된 사항은 아니나, 다음의 MvcConfiguration에 추가된 사항과 함께 보기 위해서 가져왔다.

 

MvcConfiguration.java

    @Value("/lib/upload/**")
    private String requestPath;
    @Value("file:///${file.directory}/")
    private String resourcePath;

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler(requestPath)
                .addResourceLocations(resourcePath);
    }

 먼저 보이는 requestPath는 table에 save되어 client로 전달하여 image의 src 옵션에 위치할 data 형식이다. 해당 url로 이미지를 로딩하게 될텐데, 그때 resourcePath에 설정한 경로에서 image를 찾아 로딩한다고 한다. 예를 들어 /lib/upload/test.jpg 로 table에 path를 저장한 경우에는 client에 rendering되는 image의 src 옵션에는 해당 값이 들어가지만, 실제로 file은 C:/ (중략) /recipository_upload/test.jpg 의 경로에서 찾아온다.

 기존에 이미지를 저장하는 과정에서 설정했던 directory의 path를 그대로 활용하기 위해서 위와 같이 양 옆에 추가만 해준 것이다.

 

RecipeServiceImpl.java

    @Value("${file.directory}")
    private String savePath;
    
    (중략)------------------------------------------------------------
    
    		// 각 운영체제에 맞는 separator
                String savePath = this.savePath + File.separator;
                String tempPath = File.separator + "lib"
                        + File.separator + "upload" + File.separator;

 기존에 이미지를 업로드하기 위한 savePath variable에 더해서 임시로 사용할 tempPath variable을 추가한 것이다. 이미지를 저장하는 것은 그대로 두되, 이미지를 로딩할 경로를 임시로 만든 것이고, 이에 맞게 MvcConfiguration에서 설정한 것이다.

 

 

 게시글을 작성하는 것에 더해서 수정하는 service logic에서도 이렇게 임시로 작업했고, 이미지가 정상적으로 로딩되는 것을 확인했다. 어디까지나 임시지만 말이다.

 

Reference

 

1. [Dev] 22.12.05. File Upload (임시, 재개발 예정) (tistory.com) [본문으로]
2. [Spring] - 외부(로컬)경로 이미지를 웹브라우저 화면에 보이기 (tistory.com) [본문으로]