정적 이미지파일 Spring - React간 서버전송하기

Spring에서 static 파일로 가지고 있는 이미지파일을 React로 전송하고 이를 화면에 보여주는 작업이 필요할 때가 있습니다. 예를 들어, Spring에서의 static 파일은 기본적으로 서버재시작할 때 내장된 톰캣서버가 현재 존재하는 static 파일만 서버에 로드해서 사용하기 때문에 서버가 러닝타임일 때 변경된 static 파일은 기본적으로 인식이 불가능하지만 spring의 devtools를 이용해 정적파일이 변경된 경우 자동으로 서버재시작을 통해 서버에 즉각즉각 변경을 반영하게 만들 수 있어서 정적이미지파일을 React에서 Spring으로 업로드하고 이를 파일로 만들어서 static 파일에 저장하고 있다가(정적파일의 변경을 자동으로 인식해서 서버재시작을 통해 서버에 로드하고) 해당 파일을 화면에 보여주고 싶을 때 Spring에서 가지고 있는 static 파일을 React에 전송해줘서 화면에 보여주는 방식으로 구현이 가능합니다. 다만 이러한 방식은 Spring 서버의 재시작을 너무 자주 유발하므로 통상 개발단계에서만 실시하고 추후 배포단계에서는 AWS 등을 이용해 파일을 저장할 서버를 별도로 두고 Spring의 static 파일로 저장하는 게 아니라 파일저장서버에 저장해두고 파일저장서버와 Spring에서 서버간 통신으로 데이터를 주고 받는 방식을 구현합니다.

(1) React

  var input = "http://localhost:8088/img?no=" + no;
  
  window.onload = () => {
    $(".imageput").attr("src", input);
  }
  
  return (
    <>
    <img class="imageput" src="" alt="사진"/>
    </>
  )

위의 코드는 실제 프로젝트에서 일부 발췌한 것으로 실제 사용시 수정해서 사용하시면 됩니다. 이미지파일을 불러와서 보여줘야할 곳에 img 태그를 넣고 해당 태그의 src속성에 받아온 값만 넣어주면 됩니다. 위의 상황은 src 속성을 바로 넣어주는 것이 아니라 window가 load 되었을 때 jquery를 통해 src 속성에 input 변수데이터를 넣어주고 있습니다. input에는 spring과 서버통신해서 받아온 데이터가 필요하므로 spring 포트로 데이터요청을 보내시면 됩니다.

 

(2) Spring

@GetMapping(
            value = "/img",
            produces = MediaType.IMAGE_JPEG_VALUE
    )
    public @ResponseBody byte[] img(@RequestParam("no") String no) throws IOException {
    
        final String uploadPath = "C:\\project2\\src\\main\\resources\\static\\Images";
        // no 변수로 파일디렉토리 탐색
        File directory = new File(uploadPath + File.separator + no);
        
        //listFiles() 메소드로 해당 파일디렉토리 내의 파일 전체 검색
        File[] files = directory.listFiles();
        
        //이미지 1개만 저장한다고 가정 시 0번째 파일의 이름을 substring을 이용해 추출
        String filename = files[0].getName().substring(0, files[0].getName().indexOf("."));
        
        //해당 파일의 경로로 접근해서 byte 배열로 변경 후 return
        return Files.readAllBytes(files[0].toPath());
    }

Spring에서는 /img로 get요청이 들어오면 produces 속성으로 보낼 데이터의 형식을 알려주고 @RequestParam 어노테이션으로 get요청과 함께 들어온 파라미터 no의 값을 문자열로 저장한 다음 static 폴더의 images폴더에 해당 no의 이름으로 저장되어있는 jpg파일을 Stream형식으로 저장해서 이를 byte 배열로 바꿔서 return하고 있습니다.  React에서는 byte 배열 데이터를 받아서 이를 src에 넣으면 실제 화면에 해당 이미지파일이 보이게 됩니다.

 

이번 게시글에서는 정적 이미지파일을 Spring - React 간 서버통신으로 전송하는 방법을 알아보았습니다.