13. Express - URL을 이용한 정보의 전달

1. 쿼리스트링이란?

http://a.com/login 전체를 URL 이라고 한다. 그리고 위에 사진속에 빨간색으로 표시된걸 Path라고 한다. 우리는 라우터(Paht)에 따라서 다른결과를 보여주었다. 

URL에서 /topic 라우터 뒤에 id=숫자가 있는데 저것을 query string이라고 한다. 한개의 라우터에서 다른 결과들을 출력 할 수 있다.

2. Express의 query 객체 사용

query_string.js 파일을 만들고, 위와 같이 코드를 작성해보다. 그리고나서 서버를 키고, localhost.com:3000/topic으로 접속하자.

우리의 라우터로 접속을 하거나, 라우터에 query string을 입력해서 접속을 해도 결과는 똑같다.

query string은 어떻게 사용하는 것인가?!

user가 url을 입력하고, 브라우저에 접속하면 서버에 요청을 하는것 이므로 요청에 대해 공식문서를 찾아보자.

공식문서를 보면, req.query라는 프로퍼티가 있다. 공식문서의 예제를 보면 이해가 가겠지만, 한번 직접해봐야겠다.

아까 작성한 코드에서 res.send부분을 query string을 이용했다. 서버를 키고, 접속해보자.

query string의 값에 따라 다르게 화면이 출력된다.

공식문서 예제를 보면, url의 querstring의 명칭에 따라 다른값을 출력해주고 있다. 우리가 위에선 id를 썼으므로 id를 출력했고, 첫번째 예에선 q를 썻으므로  q의 값을 출력한다.

그리고 여러가지 query string을 쓸땐 &로 연결해주는것을 알 수 있다.

코드를 수정하고, 서버를 껐다 켜서, 라우터로 접속하면 위와 같이 된다는 것을 알 수 있다.

3. query 객체의 활용

위와 같은 코드를 입력하고, 서버를 껏다가 키면, query string에 따라 다르게 화면을 출력 할 수 있다.

4. 의미론적인 URL (semantic url)

• Semantic URL이란?

Clean URL이라고도 하며, 유저들이 웹사이트에 사용성과 접근성을 향상하기 위해서 만든 URL이다. 

URL을 깔끔하게 만들 수 있고, URL을 기억하기 쉽다.

   

두 주소를 비교해보면, 위에껀 query string을 사용했고, 아래는 semantic url을 사용한 것 이다. 어떻게 사용할까?

• 사용법

라우터를 설정해주고, query가 아닌 params를 입력해주자. 라우터를 설정해줄땐 /뒤에 :변수명 을 입력하면된다.

공식문서를 보면 조금 더 이해하기 쉬울 것이다. 자세한건 Restful api를 통해서 semantic url을 익힐 수 있다.

5. 정리

• http://a.com/topic?id=0 => id=0이 query string 이고, http://a.com/topic?id=0 전체를 url이라고 한다.

• 라우터에서 req.query.변수명 으로 query string을 사용 할 수 있다.

• semantic url을 사용하면, 주소가 깔끔해진다. 사용법은 라우터 경로 뒤에 :변수명 추가해주고, req.params.변수명을 이용해서 사용 가능하다.  

출처 - 생활코딩, Express 공식문서, 위키, semantic url