[JavaScript] URL 인자 (QueryString) 다루기

dhkim 1월 28, 2024


 이번 포스팅에서는 URL에 내포한 URL QueryString에 대해 다룹니다.



1. QueryString ? Request Body ?

HTTP Request에 인자를 전달하는 방법들 입니다.

    1) Query String

     - URL에 노출되어 이해하거나, 디버깅 등의 요청에 의미를 파악하기 쉬움.
     - 민감한 정보의 경우 보안상의 이슈가 될 수 있음.
     - URL의 길이 제한에 따라, 너무 많은 인자를 전달하는 경우 오류가 발생할 수 있음.

    2) Request Body

     - 민감한 정보를 노출하지 않으므로 보안에 저촉되지 않음.
     - QueryString에 비해 더 많은 데이터를 전달 할 수 있음. (파일업로드 등)
     - 데이터 형식(Format)에 대해서 JSON, XML, FormData등 다양한 형태로 전달 가능.



2. URL 가져오기, QueryString 값 다루기

QueryString은 도메인 주소 뒤에 물음표(?)로 붙는 항목들을 뜻하며, 보통 key-value 형태로 구성합니다.

[예제] https://itteamb.blogspot.com/search/label/javascript?updated-max=2023-07-09T17:33:00%2B09:00

    1) URL, SearchParams

    Javascript에서 URL 객체와, URLSearchParams 객체를 통해 쉽게 다룰 수 있으며,
    현재 브라우저의 URL을 window.location에서 참조하여 생성할 수 있습니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
/**
 * URL 객체 (현재 전체 URL 획득 : window.location.href )
 * [예제] https://itteamb.blogspot.com/search/label/javascript?updated-max=2023-07-09T17:33:00%2B09:00&max-results=20&start=3&by-date=false
 */
let exUrl = new URL(window.location.href);

/**
 * URL QueryString 객체 (현재 URL의 QueryString 정보 : window.location.search)
 * ?updated-max=2023-07-09T17:33:00%2B09:00&max-results=20&start=3&by-date=false
 */
let exUrlSearch = new URLSearchParams(window.location.search);



    2) 값 확인 (entry 순회)

    URL 객체의 searchParams와 URLSearchParams 객체는 같은 값을 갖습니다.
    따라서, 아래와 같이 두 가지 형태로 표현할 수 있습니다.

1
2
3
4
5
6
7
8
9
/** Key, Value 순회 (1) */
for(const [key, value] of exUrl.searchParams.entries()){
    console.log(key + ':' + value);
}

/** Key, Value 순회 (2)*/
for(const [key, value] of exUrlSearch.entries()){
    console.log(key + ':' + value);
}

    3) 퍼센트 디코딩

    한글 또는 일부 특수문자에 대해서는 '퍼센트 디코딩' 방식에 따라 변환됩니다.
    아래 예시와 같이 퍼센트(%)로 구분된 듯한 모습을 보이는 것이 인코딩된 인자입니다.
    퍼센트 디코딩 값은 위에서 다룬 URL, URLSearchParams 객체에서는 디코딩된 값으로 읽게 됩니다.

    [예시] https://itteamb.blogspot.com?a=%ED%85%8C%EC%8A%A4%ED%8A%B8
                => https://itteamb.blogspot.com?a=테스트

    그 외에 문자열에 대해 다뤄야할 경우 기본적으로 탑재된 encodeURL, encodeURIComponent, decodeURI, decodeURIComponent를 통해 다룰 수 있습니다.

  • encodeURL, decodeURI : 예약어를 제외한 값들을 대상으로 인/디코딩 합니다.
  • encodeURIComponent, decodeURIComponent : 예약어를 포함한 모든 값을 대상으로 인/디코딩합니다.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// 결과 :: https://itteamb.blogspot.com?a=%ED%85%8C%EC%8A%A4%ED%8A%B8
encodeURI('https://itteamb.blogspot.com?a=테스트');

// 결과 :: https://itteamb.blogspot.com?a=테스트
decodeURI('https://itteamb.blogspot.com?a=%ED%85%8C%EC%8A%A4%ED%8A%B8')

// 결과 ::  https%3A%2F%2Fitteamb.blogspot.com%3Fa%3D%ED%85%8C%EC%8A%A4%ED%8A%B8
encodeURIComponent('https://itteamb.blogspot.com?a=테스트');

// 결과 :: https://itteamb.blogspot.com?a=테스트
decodeURIComponent('https%3A%2F%2Fitteamb.blogspot.com%3Fa%3D%ED%85%8C%EC%8A%A4%ED%8A%B8');



3. 그 외 '#' (hash)

URL에 해쉬(#) 값으로 구분되어 있는 경우는 보통 FE F/W에서 라우팅되는 경우에도 볼 수 있는 데,
Vue의 경우 Router mode를 'hash/history'로 변경함에 따라 URL에 붙는 형식입니다.

[예시 1] https://itteamb.blogspot.com/#home
[예시 2 : vue playground] https://play.vuejs.org/#eNp9kUFLwzAUx7/KM5cqzBXZbXQDlYF6UFHBSy6je+sy0yQkL3NQ+t19SdncYezW9//9X/pL24l758a7iGIqqlB75QgCUnRzaVTrrCfowOMaelh720LB1UIaaWprAkEbGpglfl08odYWvq3Xq6viRpqqHI7jg3ggbJ1eEvIEUG3u5l2Xl/u+KnnKqTIuEuxuW7tCPZOCuRRQMqzKk30xEhT49WvVjLfBGjbv0r4UtW2d0ujfHCnWk2IKmSS2ZLvfl5yRjzg65PUG658z+TbsUybFu8eAfodSHBktfYM04MXnK+75+QjZPmpuX4AfGKyOyXGoPUSzYu2TXrZ9zt9fmeYrLPaEJhwulURTs899KfifPF64+r/uZDzJe9L0ov8DExSnNA==

아래는 Javascript에서 현재 URL의 해시값을 얻는 예제 입니다.

1
2
3
4
window.location.hash;

let temp = new URL(window.location.href)
temp.hash;


0 댓글