Javascript로 페이지 이동 시 Query String 보내고 받기

월요일에 토이 프로젝트를 잠깐 기획하면서 점심메뉴 월드컵으로 주제를 정했고, 결과를 나열한 첫 페이지와 게임을 진행하는 페이지를 나눠야 할 필요가 생겼다. 페이지를 넘어가며 보내야 할 간단한 텍스트 정보가 있었는데, 지금까지 배운 것은 한 페이지에서 어떤 버튼(onclick)을 누르거나 페이지 로딩이 완료(.ready)하는 등의 상황에서, fetch를 이용해 GET이나 POST 요청을 해왔다.

우선 간단한 문자열을 가지고 넘어가는 방법을 찾고, 넘어간 페이지에서 그 값을 읽는 방법을 찾아야 했다.

---

가장 먼저 다른 페이지로 이동하는 방법을 알아야 했다.

1. window.location.href("url")
2. window.location.assign("url")
3. window.location.replace("url")

HTML DOM API에서 location은 객체가 어떤 위치(주소)에 연결되었는지를 나타내는 인터페이스다.

여기서,

1. href는 전체 url을 문자열 표현하는 instance property이고, 이것을 이동할 주소로 변경하면 해당 url로 이동하는 것으로 이해
2. assign()은 괄호 안의 주소를 불러오고 표시해주는 method이므로 해당 페이지로 이동할 수 있는 것이고,
3. replace() method는 현재 location 인터페이스를 입력한 url로 바꿔 페이지를 이동한 것처럼 보이게 하나, 실제로는 바꿔버린 것이므로 뒤로가기 버튼을 통해 다시 돌아갈 수 없다(히스토리가 안남는다고).

 

---

이때, 페이지 이동시 간단한 문자열을 보내는 방법은 페이지 이동할 URL뒤에 query string을 붙이는 방법을 사용하면 된다.

예를들어,

http://example.com?parameter=value

위 URL에서 "?parameter=value" 부분이 내가 보낸 부분이고,

이동한 페이지에서 이 부분만을 추출하려면, location.search를 사용하면 된다. 그리고,

그다음은 location.search는 "?parameter=value" 값을 반환할 테니... parameter와 value를 분리하려면... "="를 분리자로 split("=")하고, parameter 앞의 ?를 때야 하나? 하는 무식한 방법을 생각했으나,

검색해보니 URLSearchParams라는 객체를 사용하면 parameter와 value를 추출할 수 있다고 한다.

문서를 확인해보니, 말그대로 Query string을 다루는 유틸리티 method라고 되어있다. 

 

예를들어 location.search를 querystring이라는 변수에 저장했다면,

let queryString = window.location.search

new URLSearchParams(querystring)으로 parameter와 value를 분리할 수 있고, 

let queryParameterValue = new URLSearchParams(queryString)

분리된 parameter와 value는, URLSearchParams 라는 객체로 저장된다. (딕셔너리처럼 저장되는 듯)

URLSearchParams는 아래와 같이 여러 method로 parameter와 value를 사용할 수 있다.

 

for (const [key, value] of queryParameterValue) {
console.log(key, value)
}

for (const [key, value] of queryParameterValue.entries()) {
console.log(key, value)
}

console.log(qeuryParameterValue.keys())

어떤 method를 어떻게 쓸 수 있는지는 문서 참조

---

아직 용어와 구조, 프로토콜이나 데이터를 주고받는 방식에 대해서 전체 그림과 명확인 이해가 없다.

여유가 될 때 기본서적이나 잘 정리된 글을 찾아 읽으면서 전체를 이해해야 할 것으로 보인다.

또, Javescript에서 객체를 생성할 때 new 를 붙여줘야 한다는 사실도 잊지 말자.