Express] URL을 이용한 정보의 전달 (GET)

쿼리스트링이란?

1. 애플리케이션으로 들어오는 입력(IN)에 의해 다른 출력(OUT)을 하는 매커니즘을 좀 더 정교하게 다루는 법

언제나 똑같이 작동하는 애플리케이션도 애플리케이션이지만, 애플리케이션이 어떠한 사용자의 입력(조작)이 있을 때 그 조작에 의해서 적당한 다른 결과를 보여주는 것이 기능성이 좋은, 의미 있는 애플리케이션이라고 할 수 있다.

2. 물음표 뒤에 나타내는 정보

보통 애플리케이션은 사용자의 어떠한 입력의 영향을 받고 있을까요? 주소!

http://a.com/login 에 따라 다른 결과를 사용자에게 보여주고 있다.

사용자가 a.com/login으로 들어오면 login에 해당되는 라우터가 그 라우터와 연결되어 있는 익명함수(콘트롤러)를 호출해서 적당한 결과를 보여주었다.

http://a.com/login

http://a.com/home

http://a.com/topic

login, home, topic : path

패스에 따라 다른 결과를 주지만,

항상 http://a.com/topic으로 들어간다면 언제나 똑같은 결과를 보여주었다 여태까지는. 

사고를 확장해서 하나의 path, 즉 topic이라는 라우터를 가지고 있다면 topic으로 사용자가 접근했을 때 경우에 따라 다른 결과를 보여줄 수 있다면 더 좋지 않을까요?? 그것을 하기 위한 방법. = 쿼리스트링

쿼리스트링 EX)

토픽이라고 하는 path뒤에 ?id=1 

- 토픽이라고 하는 라우터에 id가 1이라고 하는 값을 전달하고 있는 것.

- 토픽은 1에 해당하는 숫자를 결과로 처리해서 그것을 화면에 표현해주면 되는 것.

- 토픽이라고 하는 하나의 라우터로 id값에 따라 서로 다른 결과를 만들어낼 수 있다.

물음표 뒤에 나타내는 정보를 웹에서는 쿼리스트링이라고 부른다.

URL 구성

• 프로토콜://

웹페이지를 요청하고 받기 위해 고안된 하이퍼 텍스트 트랜스펄 프로토콜

• a.com : 도메인 : 서버컴퓨터가 위치하고 있는 주소를 나타내고 있는 것
• /topic : path : 웹애플리케이션은 직접 서버를 구축했다면 디렉토리가 해당되지만, 여기에서는 일종의 라우터와 연관되어 있다.
• ? ~ : 쿼리스트링

쿼리스트링이란 무엇인가를 구체적으로 알기 위해서 웹 애플리케이션이 돌아가는 모습과

토픽이라는 라우터로 전달되고 있는 id의 값들 1,2,3을 어떻게 토픽이 받아서 알아낼 수 있는가를 이해해야 한다.

Express의 query 객체의 사용

1.

Line 6 : topic이라고 하는 path 로 접근했을 때 라우터 연결

Line 7 : 쿼리스트링값이 무엇이든간에 똑같은 결과를 보여주는 과묵한 애플리케이션의 모습

   

2. 입력값이 따라 다른 출력을 보여주기

'topic이라고 하는 path가 가리키는 콘트롤러가 알아낼 수 있는 id 값이 무엇인지를 방법을 알아내야 한다.

Line 7 : 쿼리스트링으로 전달된 값이 함수(콘트롤러)의 첫번째 매개변수(req)의 값의 쿼리(query)라는 객체의 id라는 프로퍼티 값으로 들어온다라는 뜻 (req.query.id) (참고)

  

3. id 값이 무엇인지에  따라 다른정보를 보여줬는데, 그 정보를 작성해보자.

Line 7-11 :서로 다른 정보를 배열에 담아두기.

  

4. 좀 더 접근하기 쉬운 링크 만들기

쿼리스트링? 어떤 애플리케이션에게 정보를 전달할 떄 사용하는 URL의 약속되어 있는 국제적인 표준

쿼리스트링으로 전달된 값은 request 영역이기 떄문에 첫번째 매개변수에 담겨 있는 매개변수 값인 리퀘스트 값인

Line 17 :  레퀘스트객체 . 가 가지고 있는 쿼리라는 객채 . 또 그 객체 안에 있는 id값을 통해서 가져올 수 있다. ( ${} : 변수가져오기 )

   

- req.params 사용한 코드 -