2-4. 220530 게시글 생성 및 수정, 삭제 기능 구현, multer를 이용한 단일 업로드 기능 구현

userId별로 게시글을 생성하고 그 글을 수정할 수 있으며 상황에 따라 삭제를 할 수 있는 기능을 구현했다.

제일 먼저 구현한 기능은 multer모듈을 이용한 단일 업로드 기능 구현이었다.

게시글을 생성하는 기능부터 먼저 할까 했지만, multer라는 모듈을 먼저 사용하는 방법을 알고 싶었다.

 

1. multer모듈 설치

npm install multer --save-dev

제일 먼저 모듈을 설치해주었다.

 

2. upload용 라우터 만들기

const multer = require('multer');
const uploads = multer({
  dest: 'uploads/',
  storage: multer.diskStorage({
    destination: (req, file, cb) => {
      cb(null, 'uploads/');
    },
    filename: (req, file, cb) => {
      // 파일 확장자 추출
      const ext = path.extname(file.originalname);

      // 파일 이름
      const basename = path.basename(file.originalname, ext);

      // 파일이름 + 시간 + 확장자명
      cb(null, basename + Date.now() + '-' + ext);
    },
    limits: { fileSize: 5 * 1024 * 1024 }, // 5MB
  }),
});
const fs = require('fs');
const path = require('path');

multer와 fs모듈을 require해준 후, uploads라는 변수를 선언하여 uploads라는 폴더의 경로로 사진을 꺼내올 수 있도록 해주었다.

 

router.post(
  '/uploads',
  uploads.single('image'),
  uploadsController,
  (req, res) => {
    res.status(201).send({
      fileInfo: req.file,
    });
  }
);

그다음 /uploads라는 라우트를 이용하여 post요청을 넣었다. uploads.single()로 단일 업로드 기능을 구현할 수 있었다.

 

// 이미지 업로드용 라우터
try {
  // 폴더 저장 경로가 존재하지 않는 경우 폴더 만들어주기
  // console.log('uploads 폴더가 존재합니다.');
  fs.accessSync('uploads');
} catch (err) {
  // console.log('uploads 폴더를 생성합니다.');
  fs.mkdirSync('uploads');
}

try catch 구문을 이용하여 upload폴더가 존재하지 않는 경우 해당 경로에 uploads폴더를 생성하도록 했다.

콘솔로그는 제일 처음 코드를 작성할 때 제대로 생성이 되었는지 바로 콘솔에서 확인해주기 위하여 작성했다.

 

그다음 uploads컨트롤러를 작성해주었다.

module.exports = async (req, res) => {
  const util = {
    success: (message, data) => {
      return {
        success: true,
        message: message,
        data: data,
      };
    },
    fail: (message) => {
      return {
        success: false,
        message: message,
      };
    },
  };

  const image = req.file.path;
  if (image === undefined) {
    return res.status(400).send(util.fail('이미지가 존재하지 않습니다'));
  } else {
    return res
      .status(200)
      .send(util.success('이미지가 업로드되었습니다', image));
  }
};

컨트롤러 기능 코드의 전문이다.

success와 fail의 경우를 나누어 json 본문을 작성했다.

 

3. 게시글 생성 및 수정, 삭제 기능 구현

router.post로 게시글 생성을, patch로 수정, delete로 삭제를 할 수 있도록 라우트를 구성하고

각각의 기능에 맞는 create, update, destory메소드를 활용하여 기능을 구현해주었다.

 

① 게시글 생성

(수정과 삭제의 id번호가 다른 것은 게시글 생성할 때 캡처하는 것을 깜빡하여 다시 급하게 생성하여 캡처했음😅)

 

② 게시글 수정

 

③ 게시글 삭제

데이터베이스에서도 저장이 잘 되는 것을 확인할 수 있었다.

삭제 기능은 처음에 상태 코드 200을 작성했다가 204가 적절할 듯하여 수정했다. 현재는 204 코드를 받아옴.