Preview

🔖 강의 범위 : 6.0~6.1

진짜 database(이하 db) 를 다루기 전에 가짜 db 를 이용하여
서버에서 데이터를 불러와 웹페이지에서 이용하는 방법에 대해 알아보자.

강의 내용

예시 1

간단한 예시로 불러온 데이터로 비디오 목록을 만들고,
각 영화 목록의 title 을 클릭하면 해당 영화의 id 를 param 으로 가지는 링크로 이동하도록 해볼 것이다.

이를 위해선 적어도 title, id 를 가진 비디오들에 대한 데이터가 필요하다.

1. 가짜 db 생성
2. 가짜 db 해당 template 으로 보내주기
3. template 에서 비디오 목록 만들기
4. 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 의 문법, 절대 경로, 상대경로에 대한 개념을 살짝 뿌려주심.