[node.js] 백엔드 서버에 저장된 이미지 프론트 서버에 전달

0. 목차

1. 개요

2. 백 서버에 저장

3. 프론트 서버에 전달

1. 개요

이거 하다가 의문이 들었다.
서버컴퓨터에 파일을 저장은 했는데
프론트 서버에서 '님 아까 저장한 파일 좀 써야됨 그거 어딧음?"
이라고 요청을 보내면.. 나는 이거 어떻게 전달을 해줘야되지...?
라는 의문이 생겨서 이것저것 해보았다.

2. 백서버에 저장

// routes/upload/upload.js

router.post('/', upload.single('imgUpload'), (req, res) => {
  const { filename } = req.file;
  const { subject } = req.body;
  const filePath = `http://localhost:4001/${filename}`;
  const data = { subject, filePath };
  board.push(data);
  console.log(board);
  res.send('OK');
});

board 라는 빈배열을 하나 만들어서 임시 db 역할을 하게끔 만들어 주었다.
테이블 새로 만들기 귀찮..

브라우저에서 포스트 요청이 오면,
파일에 대한 정보와 subject 에 대한 텍스트가
각각 req.file 과 req.body 에 내용을 담아준다.

자세한 내용은 위의 링크의 포스팅을 보면 된다.

그리고 file에 대한 내용을 저장할때,
url주소와 filename을 합쳐서 filePath 라는 변수를 만들고
filePath 와 subject를 하나의 객체로 만들어서(data)
board에 저장한다.

http://localhost:4001/${filename}
위 주소값이 사용되게 하려면 한가지 설정을 해줘야한다.

바로 정적파일제공

app.use(express.static('uploads'));

multer라이브러리를 통해 uploads 디렉토리에 업로드된 파일이 저장되게끔 해주었다.
그리고 uploads 디렉토리를 정적파일을 제공해주는 폴더로 지정을 해준다.
이렇게 해주면 위 url에 접속시 filename과 일치하는 사진을 랜더한다.

그러면 백서버에 저장 끝

3. 프론트 서버에 전달

프론트에서 /upload/view 에 get요청이 들어오면
axios를 통해 back서버에 (http://localhost:4001/upload/view) post 요청을 보낸다.

router.get('/view', async (req, res) => {
  const url = 'http://localhost:4001/upload/view';
  const response = await axios.post(url);

  const { result } = response.data;

  res.render('upview.html', { result });
});

요청을 받은 백엔드는 해당하는 데이터를 검색해서 프론트로 전달하고
프론트에서는 해당 데이터를 response.data에 담아서 전달한다.

그리고 nunjucks를 통해 해당 데이터를 html에 전달한다.

   <div>{{result.subject}}</div>
    <img src="{{result.filePath}}" alt="" style="width: 100px; height: 100px" />

이렇게 html을 해주면
이미지태그의 src 속성에
http://localhost:4001/${filename}
이 주소값이 들어가게 되면서
해당이미지가 랜더 된다.

전체 코드는 깃헙