[JavaScript, Node.js] 유튜브 클론 정리 6장 (1) - GET, POST, 절대/상대 주소

머리글

이번 시간에는 데이터베이스에 접근하는 방법을 알아보자.

How?

우선은 앞서 만들었던 가짜 비디오 데이터베이스를 다시 사용하자.

const videos = [
	{
    	title: "First Video",
        rating: 5,
        comments: 2,
        createdAt: "2 mins ago",
        views: 59,
        id: 1,
    },
    {
    	title: "Second Video",
        rating: 5,
        comments: 2,
        createdAt: "2 mins ago",
        views: 59,
        id: 1,
    },
    {
    	title: "Third Video",
        rating: 5,
        comments: 2,
        createdAt: "2 mins ago",
        views: 59,
        id: 1,
    },
];

그리고 홈페이지에 접속하면 비디오들의 이름을 볼 수 있는데,
각 비디오의 사이트로는 접근이 불가능하다.

이를 수정해 보자.
우선 mixin에서 비디오 리스트를 보여주고 있기 때문에,
mixin을 조금 수정하자.

...
h4
    a(href=`/videos/${video.id}`)=video.title

a를 통해 링크를 생성할 수 있게 해주었고, 링크의 주소는 videos의 각 비디오 아이디로 가게 된다.
Pug에서 변수를 사용할 때, 백틱을 이용해야 하는데 ESC키 밑에 있는 ~표시와 함께 있는 키다.
이를 사용하면 변수를 함께 사용할 수 있다.

그리고 watch 컨트롤러를 수정해서 각 페이지를 렌더링 하게 만들자.

export const watch = (req, res) => {
	const {id} = req.params;
    	const video = videos[id - 1];
    	return res.render("watch", {pageTitle: `Watching ${video.title}`, video});
};

req.params를 통해 링크에 입력된 id를 찾고,
비디오를 id를 통해 찾고 있다.
리스트의 인덱스 0번이 1번 비디오를 의미하기 때문에 id - 1을 해주었다.

이제 비디오 페이지에 접속하면 정상적으로 접속이 가능한 것을 볼 수 있다.

Edit Video

비디오를 수정하는 페이지도 하나 만들어보자.
우선 watch 템플릿에 링크를 하나 생성하자.

a(href=`${videos.id}/edit`) Edit Video

아까 비디오의 링크를 걸 때와는 링크가 살짝 다르다.

상대경로와 절대경로의 차이라고 할 수 있다.

절대경로: a(href=`/videos/${video.id}`)=video.title
상대경로: a(href="edit") Edit Video

차이점은 앞에 붙는 "/"의 유무인데,
/가 붙게 되면 루트페이지(메인)를 기준으로 뒤의 주소가 붙는다.

하지만 상대경로의 경우 현재 있는 페이지를 기준으로 주소가 붙게 된다.
video edit 페이지의 경우 'localhost:4000/videos' 에서 이동을 하기 때문에
'localhost:4000/videos/1/edit' 으로 이동하게 된다.

이제 게시물을 수정하는 방법을 알아보자.

우선 edit 라우터를 수정하자.

export const edit = (req, res) => {
	const {id} = req.params;
    	const video = videos[id - 1];
    	return res.render("edit", {pageTitle: `Edit ${video.title}`, video});
};

그리고 edit 템플릿도 작성하자.

form(method="POST")
	input(name="title", placeholder="Video Title", value=viedo.title, required)
    	input(value="Save", type="submit")

POST 액션을 하는 input form을 하나 생성했다.

GET? POST?

method는 form과 백엔드 사이의 정보 전송에 관한 방식이다.

form의 method의 기본값은 get으로 지정되어 있다.
get 메소드의 경우 검색을 할 때, 주로 사용된다.
우리가 검색을 하게 되면 주소창에 검색어도 같이 작성이 되게 되는 것을 볼 수 있다.

post 방식의 경우 파일을 보내거나, Database에 있는 값을 바꾸는 뭔가를 보낼 때, 그리고 로그인을 할 때 사용한다.
post의 경우 주소창에 전송한 정보가 들어가지 않는다.

이제 수정 페이지의 save버튼을 누르게 되면 다음과 같은 화면을 볼 수 있다.

우리는 get에 대한 라우터를 만들어줬지만, post에 대한 라우터는 만들어주지 않았다.
따라서 post에 대한 라우터를 만들어보자.

videoRouter.post("/:id(\\d+)/edit", postEdit);

근데 get과 post가 따로 라우터를 갖게 되면 불편하다.
추가로 수정을 해보자.

videoRouter.route("/:id(\\d+)/edit").get(getEdit).post(postEdit);

이렇게 하면 코드를 조금 더 간결하게 작성이 가능하다.
get 요청이 들어온다면 getEdit을 실행하고,
post 요청이 들어오면 postEdit을 실행한다.

postEdit 함수도 만들어보자.

export const postEdit = (req, res) => {
	const {id} = req.params;
    	const {title} = req.body;
        videos[id - 1].title = title;
    	return res.redirect(`/videos/${id}`);
};

그리고 함수를 사용하기 전에 서버파일에 작업을 해주어야 한다.

app.use(express.urlencoded({extended: true}));
라우터를 여기에 작성해주세요

라우터 위에 이렇게 작성하면 express가 form의 value를 이해할 수 있게 된다.
그리고 자동으로 자바스크립트 형식으로 변형시켜 준다.

req.body를 사용해서 title을 얻었는데, req.body는 form을 통해 받은 정보를 보여주고,
여기서 title은 form의 input 부분에 작성한 name이다.
name="potato"라면 req.body.potato로 정보를 획득할 수 있다.

이렇게 하면 form에 입력한 정보로 title이 변경되고,
변경 이후에는 res.redirect를 통해 비디오 페이지로 리다이렉트 된다.

마무리

이번 시간에는 절대주소와 상대주소,
form을 통해 사용할 수 있는 method인 get과 post를 배웠고,
이를 통해 정보를 수정하는 방법을 배웠다.

다음 시간에는 MongoDB를 이용하며 실제 데이터베이스를 이용해 보자.