-
프로젝트 설명: 이전에 제작한 Nodejs, axios 기반의 영화 필터링 웹사이트에 영화 업로드 기능을 추가하였습니다. 이 사이트 영상 속 웹사이트와 같은 기능을 담고 있습니다.
"/": DB에 연결하여 DB 에 있는 모든 영화의 제목들을 볼 수 있는 메인 페이지
"/:id": 각 영화 제목을 누르면, 해당 영화의 구체적인 정보를 볼 수 있는 페이지
"/filter": 연도별 및 별점 필터링 기능
"/add": 영화 추가 기능 (로컬 데이터베이스에 업로드) -
소요 기간: 2022.01.24 (약 1시간)
-
사용한 기술 스택 : Nodejs, axios
-
전체 코드 보기 : 깃허브 링크 바로가기
주요 코드
✔️ POST 방식에서 주의사항
Nodejs 에서 POST 방식으로 요청되는 경우 req.body의 데이터를 확인하기 위해서 추가 설정이 필요하다.
✏️ 방법 1. body-parser 미들웨어 사용
이렇게 body-parser를 미들웨어로 설정해 두면 post 요청시 body에 담겨온 파일을 꺼내서 확인할 수 있습니다.
- body-parser 모듈 설치
npm install --save body-parser
- body parser 사용
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false}));
app.use(bodyParser.json());✏️ 방법2. express 기능 이용 (이젠 이 방법을 사용해야 한다!)
하지만, express 버전 4.16이상 부터는 'express bodyparser deprecated ( bodyParser는 더이상 지원되지 않습니다.)' 와 같은 문제가 발생한다. 그 이유는, 4.16버전 이상 부터는 express 내부에 bodyParser가 포함되기 때문이다!!
const express = require('express');
app.use(express.urlencoded({ extended: true }));
app.use(express.json());✔️ form(action="경로", method="POST")
전송 버튼을 누르면 form 태그에 적은 action 에 해당되는 경로로 정보가 보내지는 것이다. 만약 action 이 생략되어 있다면, 들어온 경로(현재 페이지)로 정보를 보내는 것.
자, 그렇다면 addForm.pug 에서 from 태그 작성 시 둘 중 무엇이 맞을까?
form(action="/add",method="POST")
form(action="/",method="POST")
정답은 첫번째다.
라우터에서 movieRouter.route("/add").get(getAdd).post(postAdd); 로 코드 작성했는데, 이는 "/add" 경로로 POST 요청이 들어올 경우 postAdd 함수 실행하라는 의미이다. 그리고 postAdd 함수는 "/" 페이지를 redirect 한다.
✔️ 포맷팅과 map 함수
export const postAdd = (req, res) => {
const { body : {
title,
synopsis,
genres
}} = req;
const newMovie = {
title,
synopsis,
genres : formatGenres(genres)
};
addMovie(newMovie);
const movies = getMovies();
return res.redirect("/");
}
export const formatGenres = (genres) => {
return genres.split(",").map((genre) => genre.trim());
}
formatGenres 함수를 사용해주지 않았을 때에는 빈칸마다 잘렸다.
그러나, formatGenres 함수로 각 요소들의 빈칸을 제거하고 배열을 다시 만들어주었더니 의도대로 작동한다.
포맷팅 할 때 map 함수를 많이 사용하고 있는데, 아래 글을 참조하자.
map함수는 callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들 때 사용한다.
https://velog.io/@daybreak/Javascript-map%ED%95%A8%EC%88%98
✔️ res.render vs. res.redirect
-
res.render will return a template.
res.render 은 템플릿을 리턴하는 것이다. (이럴 경우, 템플릿 변수가 있다면 변수까지 같이 보내줄 수 있겠지.) -
res.redirect will change the URL.
res.redirect 은 단순히 URL 만 바꾸는 것이다.
