유튜브 클로닝 #5-1 MongoDB: Prologue (1)
Preview
🔖 강의 범위 : 6.0~6.1
진짜 database(이하 db) 를 다루기 전에 가짜 db 를 이용하여
서버에서 데이터를 불러와 웹페이지에서 이용하는 방법에 대해 알아보자.
강의 내용
예시 1
간단한 예시로 불러온 데이터로 비디오 목록을 만들고,
각 영화 목록의 title 을 클릭하면 해당 영화의 id 를 param 으로 가지는 링크로 이동하도록 해볼 것이다.
이를 위해선 적어도 title, id 를 가진 비디오들에 대한 데이터가 필요하다.
- 가짜 db 생성
- 가짜 db 해당 template 으로 보내주기
- template 에서 비디오 목록 만들기
- title 클릭시 이동할 링크 설정 🌟
여기서 새로운 Pug 룰에 대해 배워볼 수 있을 것이다.
링크 설정 방법에는 2가지가 있는데,
1) 자바스크립트 template string 이용하기
a(href=`/videos/${dbObj.id}`)=dbObj.title
복습!
pug template 에서 js 를 이용하는 방법은 두가지가 있었다:
.
(1) #{} 사용 : 주로 다른 컨텍스트 없을 떄
(2) 백틱 사용${}
: 주로 다른 컨텍스트 사이에 js 끼워넣을 때
2) Pug 의 + 문법 이용하기
a(href="/videos/" + dbObj.id)=dbObj.title
두 번째 예시로 see controller 로 비디오를 보는 장면을 얻어올 건데,
이 과정에서 params 를 이용하는 법을 한 번 건드려볼 것이다.
예시 2
// 가짜 video db, "videos"
const videos = [{
title: First video,
genre: ...,
.
.
id: 1,
}, {
title: Second video,
.
.
id: 2,
}, { ... } ];
// localhost:4000/videos/:id 로 가면 띄울 템플렛: see
export const see = (req, res) => {
const id = req.params.id;
const video = videos[id-1];
return res.send(`Watch ${video.title}`);
}
추가 공부
- pug 의 + 문법
- es6 의 문법
- 절대경로와 상대경로 absolute route vs. relative route 🌟
href="/edit" => localhost:4000/edit
href="edit" => localhost:4000/videos/edit
// 앞에 붙이는 / 하나가 경로를 완전히 바꿀 수 있다.
// 참고로
&rarr: right arrow symbol
&larr: left arrow symbol
요약
- Mongo 로 진짜 db 를 다루기 전에 가짜 db 를 이용하여 어떤 작업을 할 건지 대충 맛보기 하는 시간을 가졌다.
- 와중에 pug 와 es6 의 문법, 절대 경로, 상대경로에 대한 개념을 살짝 뿌려주심.
Author And Source
이 문제에 관하여(유튜브 클로닝 #5-1 MongoDB: Prologue (1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@jlee0505/유튜브-클로닝-5-Mongo-Introduction
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
href="/edit" => localhost:4000/edit
href="edit" => localhost:4000/videos/edit
// 앞에 붙이는 / 하나가 경로를 완전히 바꿀 수 있다.
// 참고로
&rarr: right arrow symbol
&larr: left arrow symbol
- Mongo 로 진짜 db 를 다루기 전에 가짜 db 를 이용하여 어떤 작업을 할 건지 대충 맛보기 하는 시간을 가졌다.
- 와중에 pug 와 es6 의 문법, 절대 경로, 상대경로에 대한 개념을 살짝 뿌려주심.
Author And Source
이 문제에 관하여(유튜브 클로닝 #5-1 MongoDB: Prologue (1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jlee0505/유튜브-클로닝-5-Mongo-Introduction저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)