Express - URL QueryString 처리

Express - URL QueryString 처리

URL을 통해 전달되는 쿼리스트링 데이터를 처리하는 방법을 알아보자.

 API 문서

Express 사이트에서 API문서를 확인하여 쿼리스트링을 처리하는 방법을 알아볼 것이다.

Express 사이트에서 API참조 메뉴를 클릭하여 들어간다.

URL 쿼리스트링은 사용자가 서버로 어떠한 요청을 위해 전달하는 데이터이므로 Request 객체를 살펴보아야한다.

Request 객체 메뉴를 열어보면 query라는 기능이 존재하는 것을 알 수가 있다.

"이 속성은 라우트의 각 쿼리 문자열 매개 변수에 대한 속성을 포함하는 개체이다.

쿼리 문자열이 없으면 빈 개체이다."

쿼리스트링에 대한 정보를 담고 있는 속성이 request의 query속성이라는 것을 알 수 있다.

그 아래에는 쿼리스트링 데이터를 호출하는 방법들이 예제로 나와있다.

 쿼리스트링 활용

이번 시간에는 쿼리스트링을 이용해서 아래와 같은 페이지를 만들어보자.

메뉴를 클릭하면 아래에 메뉴가 담고있는 정보들을 표현해주는 웹 페이지다.

메뉴를 클릭하면 URL 쿼리스트링이 변화하고 그 쿼리스트링의 값을 통해 어떠한 메뉴를 선택한 것인지 서버측에서 판단하여 알맞는 데이터를 응답해주는 기능이다.

app.js에 아래의 코드를 작성하자.

"/topic"이라는 메뉴로 요청이 들어오면 그에 대한 처리를 한다.

13~17번 줄 - 

메뉴들을 선택했을 때 선택한 메뉴에 맞는 데이터를 표현하기 위해서 데이터 정보를 topics배열 변수에 담는다.

21 ~ 25번 줄 - 

그리고 화면에 출력해 줄 메뉴들을 output변수에 담는다.

이 때 표현식"${}"을 이용해서 문자열 내에서 변수를 호출하여 topics배열 변수에 담았던 데이터들을 표현할 것이고, 그 배열 변수에서 값에 접근하기 위한 index를 쿼리스트링으로 받아서 접근한다.

 실행

이제 서버를 실행해보고 확인해보자.

localhost:9000/topic으로 접속해보자.

그럼 아래와 같은 화면이 나타날 것이다.

이 화면에서 JavaScript, Node.js, Express 메뉴들을 클릭해보면 아래와 같이 화면이 변하게 된다.

쿼리스트링이 변함에 따라 그에 맞는 데이터들을 표현해준다.