Express Routing, URL

서버라우팅이라는 개념을 알기 위해서는 URL을 잘 뜯어볼 필요성이 있다. 다음과 같은 URL을 예시로 보자.

http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument

우선 http는 프로토콜이다. 브라우저에서 서버로 요청을 할 때에는 미리 약속된 방식을 통해서 리소스를 요청하게 된다.
www.example.com은 도메인이다. 뒤에 80은 일단 기본적으로 서버에 요청을 할 때 80포트로 요청을 하기 때문이다. 특별한 일이 없으면 80포트로 요청 하는 것으로 인식한다.

그 다음부터는 path이다. 뒤에 확장자가 html 그대로 끝나는 것을 볼 수 있는데, 보통 요즘 기술로 만든 홈페이지들은 서버에서 해석을 해서 내보내준다. 그렇게 되면 확장자가 잘 보여지지 않게 된다.

.do로 끝나는 것도 있고 , 정부 홈페이지를 가보면 http://www.minwon.go.kr/new_info/introduce/AA090_info_introduce_summary.jsp같이 jsp가 그대로 붙는 경우도 있다.

querystring(?)과 anchor(#)

?가 있고 #도 있다.

?는 query param이고 #은 anchor이라고 한다. express-generator를 통해서 서버 하나를 뚝딱 만들어보자.

$ npm install express-generator -g

글로벌로 설치한 후 원하는 디렉토리로 가서 다음과 같이 해보자.

$ express --view=pug myapp
$ npm i

그 다음에 npm start 커맨드를 히자하면 localhost:3000번에서 express 앱을 실행하게 된다.

generator로 만들어진 앱을 보면 다음과 같이 두 개의 router를 사용하는 것을 알 수 있다.

app.use("/", indexRouter);
app.use("/users", usersRouter);

그래서 브라우저 주소창에 http://localhost:3000/users를 입력하게 되면 잘 작동하는 것을 확인할 수 있다. 하지만 http://localhost:30000/usersabacd와 같이 입력하게 되면 서버 라우팅으로 갈 path가 없게되므로 404 not found가 발생한다.

하지만 만약 http://localhost:3000/users?id=123과같이 query param을 주면 어떻게 될까?

Not found는 뜨지 않는다. 이렇게 query param으로 넣게 되면 req에서 들어온 값을 확인할 수 있다.

// userRouter
var express = require("express");
var router = express.Router();

/* GET users listing. */
router.get("/", function (req, res, next) {
  const myQuery = req.query;
  console.log("id", id);
  res.send("respond with a resource ", myQuery);
});

module.exports = router;

그리고 이건 서버를 통해서 값을 받아오기 때문에 node로 들어온 값을 볼 수 있을 것이다.
하지만 #은 다르다.

html을 만들때 우리는 id값을 줄 수가 있다. #은 이 id가 위치한 곳을 보여주는 용도로 사용할 수 있고 #을 붙여 get 요청을 해도 서버로는 값이 들어가지 않는다.