URL Path
URL은 Absolute와 Relative가 있다.
videoRouter.js
videoRouter.get("/:id(\\d+)/edit",edit);watch.pug
extends base
block contents
h1=video.title
h4 #{video.views} #{video.views === 0 ? "view" : "views"}
// 아래는 상대경로로 watch.pug 파일이 실행될때 기본적인 경로는
// videos/ 가 붙으므로 videos/2/edit과 같은 형태가 된다.
a(href=`${video.id}/edit`) Edit Video →
// 아래는 절대경로의 예시다. (제일 앞에 / 를 붙여주면 절대경로가된다.)
// a(href=`/videos/${video.id}/edit`) Edit Video → Get
edit.pug
extends base
block contents
h4 Change Title of video
//Form을 이용한 Data 전달 방식.
form(action="/save-changes") // Default GET
input(placeholder="Video Title",name="title", value=`${video.title}`, required)
input(value="Save", type="submit")URL : localhost:4000/save-changes?title=First+Video
URL을 보면 save-changes의 뒤에 ?title=First+Video(name:vlaue)를 확인할 수 있는데, 이것을 Query String이라고 말하며 해당 페이지에서 가지고 있는 Parameter 값의 전달이라고 할수있다. 이것을 통해 서버에서 해당되는 값을 찾기 위한 것으로 Index가 가능한 수준의 Parameter로 서버에 전달하고 결과값을 받아오기 위한 것이다.(Read)
GET 예시) 만약 영화를 검색한다고 할 때, 우리는
짱구는 못말려 : 태풍을 부르는 영광의 불고기로드와 같이 그 제목을 브라우저의 검색창에 입력할 것이다.
?q=짱구는+못말려+태풍을+부르는..의 형태로 주소창을 확인될 것이며 브라우저는 해당 결과에 대해 띄워줄 것이다.
POST
위에서 살펴보았듯 GET은 Query String을 그대로 노출시킨다.
따라서 GET을 사용하는 것은 DB의 형태를 외부에서 관찰할 수 있다는 것을 의미한다. 그러나 POST의 경우 GET과 같이 주소로 노출시키지 않으며, 데이터를 주고받는 방식 또한 달라지게 되는데(Query String이 없으므로) request body를 통해 서버에서 수신하게 된다.(HTTP의 양식 중 body 부분) 따라서 데이터의 양이 GET보다 크다.(Create, Update, Delete)
//edit.pug
form(method="post") // Default action /videos/:id(\\d)/edit
input(placeholder="Video Title",name="title", value=`${video.title}`, required)
input(value="Save", type="submit")
//videoRouter.js
videoRouter.route("/:id(\\d+)/edit").get(getEdit).post(postEdit);
//videoController.js
export const getEdit = (req, res) => {
const {id} = req.params;
const video = videos[id-1];
return res.render("edit",{pageTitle:`Editing: ${video.title}`,video});
}
export const postEdit = (req, res) => {
const {id} = req.params;
const {title} = req.body;
videos[id-1].title = title; //실제 DB를 사용하지 않아 업데이트 해당 방식으로 진행
return res.redirect(`/videos/${id}`);
}
//app.js
//express에서 지원하는 URL Incoding Data 구문분석 Middleware
//쉽게 말해 HTML에서 보내준 Form을 Javascript Object로 변경해준다.
app.use(express.urlencoded({extended:true})); // 이 후 req.body가 존재.
app.use("/", globalRouter);
app.use("/users", usersRouter);
app.use("/videos", videosRouter);
videoRouter.js를 보면 한페이지에서 GET, POST 두가지 상태가 존재함을 알 수 있는데 간단히 생각하면 처음 유저가 요청한 페이지는 GET, 변경사항을 Save 버튼을 눌러 서버에 보내는 것을 POST로 정리할 수 있다.
PS. terminal에서 폴더조정을 위해 작업하다 rm -rf로 Working Directory를 날려버렸다...하필 Push를 초기에만 한 탓에 git 내용까지 날아가 처음부터 다시 해야했으므로 rm 명령어는 조심하자...동시에 push는 항상 해두자...(with Conflict)
