- 프로젝트 설명: Nodejs 기반의 영화 필터링 웹사이트를 제작하였습니다.
이 사이트 영상 속 웹사이트와 같은 기능을 담고 있습니다.
- "/" : DB에 연결하여 DB 에 있는 모든 영화의 제목들을 볼 수 있는 메인 페이지
- "/:id" : 각 영화 제목을 누르면, 해당 영화의 구체적인 정보를 볼 수 있는 페이지
- "/filter" : 연도별 및 별점 필터링 기능
- 소요 기간 : 2022.01.23 (약 5시간) + css 디자인은 전혀 하지 않았음
- 사용한 기술 스택 : Nodejs, moongoose, mongoDB
- 전체 코드 보기 : 깃허브 링크 바로가기
주요 코드
filterMovie 함수 자세히 살펴보기
폼에 넣은 연도보다 더 큰 연도(최신)의 영화를 모두 찾고,
폼에 넣은 별점보다 더 높은 연도의 영화를 모두 찾아
배열을 만들고, 그것을 movies 라는 변수에 넣는다.
그리고 그 movies 를 templates 에 던져주면 끝.
(참고로 movies/home 에서는 movies 를 가지고 반복문 돌려준다.)
✓ get방식과 post방식
GET 방식
method를 생략하면 GET 방식
서버로 데이터를 전송할 때 URL을 통하여 전송하는 방식
POST 방식
method="post" : url을 통하지 않고 데이터를 전송하는 방식(우리가 알 수 없게(Network > Form Data)).
//Router.js 라우터 파일
app.get( PATH(경로), HANDLER ) -> GET 방식으로 요청들어오면~
app.post( PATH(경로), HANDLER ) -> POST 방식으로 요청들어오면~
여기서 app은 express 객체따라서, 폼으로 데이터를 받고 받은 데이터를 url 을 통해서 전송하는 것이므로 get 방식의 라우터만을 사용했다. 이후 그 데이터 값을 req.query 로 받아 사용하였다.
✓ 변수 선언 멋지게 하는 법 ( es6 )
예1.
const id = req.params.id
->
const { id: id } = req.params
->
const { id } = req.params //id 와 id 같으므로 생략 가능예2.
const year = req.query.year;
const rating = req.query.rating;
->
const {
query : {year, rating}
} = req;
//year 과 rating 변수 이용✓ req.body, req.params, req.query
-
req.params
/user/:name 경로가 있으면 "name"속성을 req.params.name으로 사용할 수 있다.
(예. https://params/user/12341234 일 경우 12341234를 받는다.) -
req.query (경로의 각 쿼리 문자열 매개 변수)
https://query/search?searchWord=구글검색 이면 searchWord 매개변수(parameter)의 구글검색 이라는 값(argument)을 가져온다. -
req.body
JSON 등의 데이터를 담을때 사용한다. 주로 POST로 유저의 정보 또는 파일 업로드를 보냈을 때 사용.중요!
body-parser는 node.js 모듈이다.클라이언트 POST request data의 body로부터 파라미터를 편리하게 추출한다. 위의 말은 쉽게 설명하자면 req.body는 body-parser를 사용하기 전에는 default 값으로 Undefined 설정되기 때문에 body-parser를 사용하여 해결해야 오류를 뿜지 않는다. 이것을 사용하기 위해서는 우선 npm i body-parser 를 하고 아래와 같이 코드를 작성해주어야 했다.그러나, Express 4.16.0버전 부터 body-parser의 일부 기능이 익스프레스에 내장되어 있어 body-parser 설치 없이
app.use(express.urlencoded({extended:true}));으로 사용 가능하다.
// 예제코드 - app.js 부분
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extends: true }))
↓
↓
// Express 4.16.0버전 부터 body-parser의 일부 기능이 익스프레스에 내장되어 있어 아래와 같이 사용 가능하다.
↓
↓
app.use(express.json())
app.use(express.urlencoded({ extends: true}))따라서, form 에서는 name: value, email: value, password: value의 값을 body에 담아 POST request를 보냄
// 예제 join.pug 부분
form(action=routes.join, method="post")
input(type="text", name="name", required=true)
input(type="email", name="email", required=true)
input(type="password", name="password", required=true)
input(type="submit", value="Join")form 에서 post method로 보낸 것을 req.body property(속성)으로 name, email, password를 받을 수 있다.
// 예제 코드 js
export const postJoin = (req, res) => {
const {
body: { name, email, password }
} = req
}✓ dotenv
-
dotenv 란? 환경변수 숨기기!
node.js로 개발을 하게 될 경우 포트번호, DB 관련 정보등 전역으로 필요한 변수(정보)들이 존재한다. 때로는 이러한 정보들이 오픈소스(깃허브)에 프로젝트를 공개했을 경우, 민간한 정보들을 다른 사람으로부터 숨겨야(보안성)할 경우가 생긴다. dotenv 패키지를 사용하여 환경변수 파일을 외부에 만들고, 접근 관리할 수 있다. -
dotenv 설치
npm install dotenv -
dotenv 사용
// .env 파일
DB_URL = "mongodb://localhost:12345/name"
PORT = 5000// db.js 파일
import mongoose from 'mongoose'
import "dotenv/config";
mongoose.connect(process.env.DB_URL)
const PORT = process.env.PORT- 주의사항
.gitignore 에 .env 파일을 무시해줘야 한다. 이것을 설정해주지 않았을 경우 말짱도루묵이다.
// .gitignore
.env
.env.test✓ [...args]
"전개구문" 이라고 부른다.
배열 : [...args]
객체 : {...obj}
전개 구문 없이, 이미 존재하는 배열을 일부로 하는 새로운 배열을 생성하기에, 배열 리터럴 문법은 더 이상 충분하지 않으며 push(), splice(), concat() 등의 조합을 사용하는 대신 명령형 코드를 사용해야 했습니다. 전개 구문으로 이는 훨씬 더 간결해졌습니다.
var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];
// ["head", "shoulders", "knees", "and", "toes"]https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax
✓ if 와 조건부 연산자 ‘?’
let accessAllowed = age > 18 ? true : false;
평가 대상인 age > 18 이 사실이라면, true 이, 그렇지 않으면 false 가 accessAllowed 에 반환됩니다.
const pageTitle = `Searching by
${ year === "" ? "" : `year: ${year}` }
${ year !== "" && rating !== "" ? "||" : ""; }
${ rating === "" ? "" : `rating: ${rating}` } `;https://ko.javascript.info/ifelse
