내일배움단 11일메이킹챌린지 6일차

프로젝트

미니튜터님께 질문한 결과, 이미지도 DB에 첨가해보기로 했다.
검색 결과 여러 방법이 있었는데, 제일 만만해보이는 걸 찾았다.

import multer from 'multer';
import fs from 'fs';

const upload = multer({storage: multer.memoryStorage()});

import mongoose from 'mongoose';

const { Schema } = mongoose;
const ImageScehma = new Schema({
  img: Buffer,
});

const Image = mongoose.model('image', ImageScehma);
export default Image;

app.post('/upload', upload.single('image'), async (req, res) => {
  try {
    const img = req.file.buffer;
    if (img.truncated) return res.status(413);
    const image = new Image({ img });
    await image.save();
    return res.json(`${image._id}`);
  } catch (e) {
    return res.status(500);
  }
});

또는 dictionary에 이미지 업로드 url을 추가하여 사용한다. (이게 더 편해보인다...)

반응형 웹의 경우 디스플레이 사이즈마다 grid를 설정해줘야해서 최종 단계나 이후 프로젝트에서 진행해야겠다. 단지 유동적인 화면을 구현하기 위한 코드는 다음과 같다.

.container {
	display: flex;
    }