클라이언트에서 서버 로컬스토리지에 있는 이미지 사용하기

이전에 Multer 모듈을 이용하여 클라이언트로 부터 받은 이미지파일을 서버 로컬스토리지에 저장하는 작업을 진행하였다.

그러면 반대로 서버에 저장된 이미지 파일을 클라이언트가 사용할 수 있는 방법에 대해 알아보았다.

Express 정적 파일 제공

Express 프레임워크에는 정적인 파일을 제공할 수 있게 해주는 Static 미들웨어가 있다. 공식문서의 설명은 아래와 같다.

이미지, CSS 파일 및 JavaScript 파일과 같은 정적 파일을 제공하려면 Express의 기본 제공 미들웨어 함수인 express.static을 사용하십시오.

정적 자산이 포함된 디렉토리의 이름을 express.static 미들웨어 함수에 전달하면 파일의 직접적인 제공을 시작할 수 있습니다. 예를 들면, 다음과 같은 코드를 이용하여 public이라는 이름의 디렉토리에 포함된 이미지, CSS 파일 및 JavaScript 파일을 제공하십시오.

즉, 클라이언트에서 해당 express 서버 내에 있는 정적인 파일(express.static)으로 제공하고자 지정한 디렉토리의 파일을 활용할 수 있게 된다.

• 여러 개의 정적자산 디렉토리를 이용하기 위해서는 express.static을 여러개 지정하면 된다.

// index.js
const express = require('express');

const app = express();
const PORT = 3000;

// ... 중략 ...

// 정적파일 다루기 위한 설정
app.use(express.static('uploads'));

// ... 중략 ...

app.listen(PORT, () => {
  console.log(`app Listening on ${PORT}`);
});

업로드 된 이미지파일을 클라이언트에서 이용하기

업로드 된 이미지를 클라이언트에서 이용하기 위해서는 다음과 같은 처리들이 필요하다.

1. 클라이언트에서 서버로 이미지 업로드
   • 아래와 같이 이미지 파일 업로드를 담당하는 폼을 이용하여 서버에 이미지 업로드 요청한다.

// Info_Trail_Input.js
// ... 중략 ...
<form onSubmit={this.onFormSubmit}>
  <h1>File Upload</h1>
<input type="file" name="img" onChange={this.onChangeFile} />
  <button type="submit">Upload</button>
</form>

2. 서버에서 Multer를 이용하여 이미지파일을 받고, 서버 로컬 스토리지에 저장

   • Multer를 이용하여 서버 로컬 스토리지에 저장하는 방법은 이전 dev log에서 확인한다.
     https://velog.io/@josworks27/2020-01-18-0001-%EC%9E%91%EC%84%B1%EB%90%A8-qrk5iamlmv](https://velog.io/@josworks27/2020-01-18-0001-작성됨-qrk5iamlmv)

3. 클라이언트에 변경된 이미지 파일의 이름과 경로를 응답
   • 아래 소스코드와 같이 images 테이블에 삽입된 결과를 이용하여 새로운 trails에 삽입하고 클라이언트에 해당 imageId를 응답한다.
   • 클라이언트는 imageId를 이용하여 이미지 파일의 경로와 파일명을 확인한다.

// controller/trails.js
if (req.file !== undefined) {
  createImageResult = await images.create({
    fileName: req.file.filename,
    filePath: req.file.path,
  });
}

// ... 중략 ...
const createTrail = await trails
.create({
  userId: decoded.userId,
  locationId: createLocation.dataValues.id,
  categoryId: createCategory.dataValues.id || created.dataValues.id,
  imageId: createImageResult !== undefined ? createImageResult.dataValues.id : null,
  title: title,
  review: review,
  adminDistrict: adminDistrict,
})
.catch((error) => {
  console.log(error);
  res.sendStatus(500);
});

// send trails
res.status(200).json({ trails: createTrail.dataValues })

4. 클라이언트에서 이미지 파일 사용

   • 서버에서 변경된 파일명을 확인한 후 서버 url + 파일명으로 접근하여 express.static에 의해 정적파일을 제공하기 때문에 이미지를 가져올 수 있다.

• 클라이언트에서는 아래와 같이 이미지 태그 src에 url+파일명 으로 작성하면 된다.

<img src="http://localhost:3000/1579342603996.jpg" alt="">