2주차 미들웨어

1. cookie-parser

요청에 동봉된 쿠키를 해석해 req.cookies 객체로 변환한다. 변환된 쿠키 중 유효 기간이 지난 것은 자동으로 삭제된다.

name=zerocho인 쿠키 요청 시 { name : 'zerocho' }로 변환

1.1 미들웨어 사용

app.use(cookieParser(비밀키));

사용자 선택에 따라 비밀 키를 넣을 수 있다.

1.2 서명된 쿠키?

• 서명된 쿠키로 비밀 키를 가진 쿠키가 자신의 서버에서 만들어졌는지 확인이 가능하다.
• req.sigendCookies 객체에 저장된다.
• name=zerocho.sign의 형태를 가진다.
• 쿠키 생성 시 옵션 signed를 사용하며, true로 설정해야 서명되었다는 뜻이다. -> 대부분 켜두는 것이 좋음
• 서명을 위한 비밀 키: process.env.COOKIE_SECRET

1.3 실행 코드

1.3.1 쿠키 생성

res.cookie('name', 'zerocho', { //쿠키 생성
  expires: new Date(Date.now() + 900000),
  httpOnly: true,
  secure: true,
}));

1.3.2 쿠키 제거

res.clearCookie('name','zerocho', { httpOnly: true, secure: true }); 
//쿠키 제거

쿠키 제거 시 키, 값, 옵션이 정확해야 쿠키가 지워진다. (expires, maxAge 옵션 제외)

---

2. express-session

세션 관리용 미들웨어이며, 로그인 때문에 세션을 구현하거나 특정 사용자를 위한 데이터를 임시 저장할 때 사용한다. 사용자별로 req.session 객체에 저장된다.

2.1 미들웨어 사용

app.use(session({
  resave: false,
  saveUninitialized: false,
  secret: process.env.COOKIE_SECRET,
  cookie: {
    httpOnly: true,
    secure: false,
  },
  name: 'session-cokkie',
}));

• resave : 요청이 올 때 세션에 수정 사항이 없더라도 세션을 다시 저장할지 설정
• saveUninitialized : 세션에 저장할 내역이 없더라도 처음부터 세션을 생성할지 설정
• name : 세션 쿠키의 이름 설정 디폴트 connect.sid
• cookie : 세션 쿠키에 대한 설정
• httpOnly : 클라이언트에서 쿠키 확인 가능 여부 설정(true: 못 본다!)
• secure : https 환경에서만 사용하게 할지 설정
• store : 데이터베이스에 연결해서 세션 유지할지 설정

2.1.1 실행 순서

cookie-parser 미들웨어 뒤에 express-session을 놓는 것이 안전하다.

2.2 세션 등록 및 제거

req.session.name = 'zerocho'; // 세션 등록
req.sessionID; // 세션 아이디 확인
req.session.destroy(); //세션 모두 제거

---

3. multer

이미지, 동영상 등 여러 가지 파을들을 멀티파트 형식으로 업로드할 때 사용한다.

멀티파트 형식이 뭔가요?

enctype이 multipart/form-data인 폼을 통해 업로드하는 데이터 형식이다.

<form action="/upload" method="post" enctype="multipart/form-data">
 <!-- 생략 --> 
</form>

3.1 설치 및 기본 설정

3.1.1 설치

$ npm i multer

3.1.2 기본 설정

const multer = require('multer');

const upload = multer({
  storage: multer.diskStorage({
    destination(req, file, done) {
      done(null, 'uploads/');
    },
    filename(req, file, done) {
      const ext = path.extname(file.original);
      done(null, path.basename(file.originalname, ext) + Date.now() + ext);
    },
 }),
 limits: { fileSize: 5 * 1024 * 1024 },
});

• destination 속성 : 어디에 저장할 것인지
• filename : 어떤 이름으로 저장할 것인지
• limits : 업로드 제한 사항 설정
• req 매개변수 : 요청에 대한 정보
• file : 업로드한 파일에 대한 정보
• done 함수 : req나 file의 데이터를 가공해서 done으로 넘긴다. done에서 저장이 이루어짐
• 파일 저장명은 파일명+현재시간.확장자

uploads 폴더가 없으면 위 코드는 실행되지 않는다.

3.1.3 서버 시작할 때 uploads 폴더 자동 생성

const fs = require('fs');

try {
  fs.readdirSync('uploads');
} catch (error) {
  console.error('uploads 폴더가 없어 uploads 폴더를 생성합니다.');
  fs.mkdirSync('uploads');
}

3.2 파일 하나 업로드 할 때

app.post('/upload', upload.single('image'), (req, res) => {
  console.log(req.file, req.body);
  res.send('ok');
});

파일 업로드 후 req.file 객체 생성. 인수는 html의 폼 태그의 키와 동일하게 넣어야 한다.

3.3 파일 여러 개 업로드 할 때

• html

<form id="form" action="/upload" method="post" enctype="multipart/form-data">
  <!-- 생략 -->
</form>

• 미들웨어

app.post('/upload', upload.array('many'), (req, res) => {
  console.log(req.file, req.body);
  res.send('ok');
});

파일 업로드 후 req.files 객체가 생성된다.

---

4. 미들웨어 특성 활용

4.1 여러 개의 미들웨어 사용하기

미들웨어는 동시에 여러 개의 미들웨어를 사용할 수 있으며, next 함수를 호출하여 다음 미들웨어로 넘어갈 수도 있다. 만약 이 함수를 쓰지 않는다면 res.send나 res.sendFile 등의 메서드를 사용하여 응답을 보내야 한다. 미들웨어의 장착 순서에 따라 특정 미들웨어는 실행이 되지 않을 수 있다. next를 호출하지 않고 응답도 보내지 않으면 클라이언트는 응답을 받지 못해 계속 대기를 해야 한다.

4.2 미들웨어 간 데이터 전달

세션을 사용하여 데이터를 전달할 수 있지만, 세션이 유지되는 동안 해당 데이터가 계속 유지된다. 요청이 끝날 때까지만 데이터를 유지하고 싶다면 req 객체에 데이터를 저장하면 된다.

app.use((req, res, next) => {
  req.data = '데이터 넣기';
  next();
}, (req, res, next) => {
  console.log(req.data); //데이터 받기
  next();
});

위 코드를 실행하면 요청이 처리되는 동안 req.data를 통해 미들웨어 간에 데이터를 공유할 수 있으며, 새 요청이 들어오면 req.data는 초기화된다.

4.3 미들웨어 안에 미들웨어 넣기

app.use((req, res, next) => {
  if (process.env.NODE_ENV === 'production') {
    morgan('combined')(req, res, next);
  } else {
    morgan('dev')(req,res,next);
  }
});

조건문에 따라 다른 미들웨어를 적용하는 코드이다. 기존 미들웨어의 기능을 확장할 수 있다.