쿼리스트링과 시맨틱URL

쿼리 스트링에 입력된 값에 따라 다른 내용이 출력되게 해보자. 

 

topics 라는 배열이 있다. 

인덱스 0에 JS 문자열, 인덱스 1에 Nodejs 문자열, 인덱스 2에 Express 문자열이 있다. 

 

id 의 값이 0, 1,  2 인 것에 따라서 페이지에 출력되는 문자열이 달라진다. 

 

URL이  http://127.0.0.1:3000/topic?id=2 이라면, 

인덱스 2에 해당하는 Express is 문자열이 출력된다. 

 

 

 

링크를 만들어보자. 

 

html 링크 3개를 만들어서 res.send() 에 넘기자. 

URL에서 받은 id 에 해당하는 문자는 js표현식으로 같이 넣는다.

${} 를 이용하면, 변수명을 그대로 코드에 넣을 수 있다. 

html 코드를 쓸 때는 작은 따옴표가 아닌, 그레이브 액센트 (ESC 키 위에 있는 ` ) 로 감싼다. 

 

html 코드는 output 이라는 변수로 만들고, res.send() 함수의 파라미터로 넘긴다. 

 

링크를 누를 때 마다 아래에 출력되는 문자열이 달라진다. 

---

시맨틱 URL 을 써보자. (semantic url) 

 

쿼리스트링 없이 URL만 가지고 정보를 전달해보자. 

 

예를 들어, 

http://127.0.0.1:3000/topic?id=2 이렇게 물음표와 = 이퀄 문자없이 

http://127.0.0.1:3000/topic/2 이렇게 '/'슬래시만 가지고 사용자 요청을 전달하는 것이다. 

 

위키에 semantic url 을 검색해보면 다음과 같은 예시가 나온다. 

 

깔끔!

URL 에서 /topic 뒤에 오는 것을 변수로 받고 싶다면,

 

app.get() 내부의 라우터에, 경로에 콜론과 변수명을 써준다. 

 

http://127.0.0.1:3000/topic/1

이 주소로 접근하면, 에러가 안난다!

 

id 자리에 입력한 숫자 1을 받아오려면 

${topics[req.query.id]} 가 아니라, params 라는 키워드로 바꿔준다. 

${topics[req.params.id]}

즉, id로 1을 받아올 수 있다는 것이다. 

 

2로 접근하면 Express 문자열이 나오고 

0으로 접근하면 JavaScript

라우팅에서 선언한 파라미터 명과, params.파라미터명을 정확히 맞춰주는 것이 중요하다. 

 

여러개의 파라미터를 넘겨보자. 

http://127.0.0.1:3000/topic/1/edit  

id는 1로, mode는 edit라는 정보의 파라미터를 넘긴다.