3_8. url과 querystring - 복습

3_8_1. url 모듈

인터넷 주소를 쉽게 조작하도록 도와주는 모듈
- url 처리에 크게 두 가지 방식이 있다. (기존 노드 방식 VS. WHATWG 방식)
- 아래 그램에서 가운데 주소를 기준으로 위쪽은 기존 노드 방식, 아래쪽은 WHATWG 방식이다.

┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│                                              href                                              │
├──────────┬──┬─────────────────────┬────────────────────────┬───────────────────────────┬───────┤
│ protocol │  │        auth         │          host          │           path            │ hash  │
│          │  │                     ├─────────────────┬──────┼──────────┬────────────────┤       │
│          │  │                     │    hostname     │ port │ pathname │     search     │       │
│          │  │                     │                 │      │          ├─┬──────────────┤       │
│          │  │                     │                 │      │          │ │    query     │       │
"  https:   //    user   :   pass   @ sub.example.com : 8080   /p/a/t/h  ?  query=string   #hash "
│          │  │          │          │    hostname     │ port │          │                │       │
│          │  │          │          ├─────────────────┴──────┤          │                │       │
│ protocol │  │ username │ password │          host          │          │                │       │
├──────────┴──┼──────────┴──────────┼────────────────────────┤          │                │       │
│   origin    │                     │         origin         │ pathname │     search     │ hash  │
├─────────────┴─────────────────────┴────────────────────────┴──────────┴────────────────┴───────┤
│                                              href                                              │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
(All spaces in the "" line should be ignored. They are purely for formatting.)

위 그림은 nodejs.org/dist/latest-v14.x/docs/api/url.html 즉, url 설명 부분에 있다.
공식 문서에 가면 다 있으므로 외울 필요가 없다.

3_8_2. url 모듈 예제

// url.js
const url = require('url');

// ---------------- WHATWG 방식 ----------------
const {URL} = url;
const myURL = new URL('http://www.gilbut.co.kr/book/bookList.aspx?sercate1=001001000#anchor');
console.log('new URL():', myURL);
// new URL(): URL {
//   href: 'http://www.gilbut.co.kr/book/bookList.aspx?sercate1=001001000#anchor',
//   origin: 'http://www.gilbut.co.kr',
//   protocol: 'http:',
//   username: '',
//   password: '',
//   host: 'www.gilbut.co.kr',
//   hostname: 'www.gilbut.co.kr',
//   port: '',
//   pathname: '/book/bookList.aspx',
//   search: '?sercate1=001001000',
//   searchParams: URLSearchParams { 'sercate1' => '001001000' },
//   hash: '#anchor'
// }

console.log(url.format(myURL)); // http://www.gilbut.co.kr/book/bookList.aspx?sercate1=001001000#anchor

// ---------------- 기존 노드방식 ----------------
const parsedUrl = url.parse('http://www.gilbut.co.kr/book/bookList.aspx?sercate1=001001000#anchor');
console.log('url.parse():', parsedUrl);
// url.parse(): Url {
//   protocol: 'http:',
//   slashes: true,
//   auth: null,
//   host: 'www.gilbut.co.kr',
//   port: null,
//   hostname: 'www.gilbut.co.kr',
//   hash: '#anchor',
//   search: '?sercate1=001001000',
//   query: 'sercate1=001001000',
//   pathname: '/book/bookList.aspx',
//   path: '/book/bookList.aspx?sercate1=001001000',
//   href: 'http://www.gilbut.co.kr/book/bookList.aspx?sercate1=001001000#anchor'
// }

console.log(url.format(parsedUrl)); // http://www.gilbut.co.kr/book/bookList.aspx?sercate1=001001000#anchor

url 모듈 안에 URL 생성자가 있다.
이 생성자에 주소를 넣어 객체로 만들면 주소가 부분별로 정리된다.
이 방식이 WHATWG의 url이다.
WHATWG에만 있는 username, password, origin, searchParams 속성이 존재한다.

3_8_3. WHATWG, 기존 노드 방식 차이

https://www.naver.com/login
- 주소가 위 형식처럼 와야되는데
/login
- 이렇게 올 때가 있다.
  이런 경우엔 WHATWG 방식으론 해석이 안돼서 기존 노드 방식을 사용해야된다.

3_8_4. url 모듈 메서드

기존 노드 방식 메서드
- url.parse(주소): 주소를 분해한다. WHATWG 방식과 비교하면 username과 password 대신 auth 속성이 있고, searchParams 대신 query가 있다.
- url.format(객체): WHATWG 방식의 url과 기존 노드의 url 모두 사용할 수 있다.
  분해되었던 url 객체를 다시 원래 상태로 조립한다.

3_8_5. searchParams (WHATWG 방식)

WHATWG 방식에서 쿼리스트링(search) 부분 처리를 도와주는 객체이다.
- ?page=3&limit=10&category=nodejs&category=javascript 부분
- 문자로 다루기 불편하니까 객체로 변환을 도와주는 객체이다.

const {URL} = require('url');

const myURL = new URL('http://www.gilbut.co.kr/?page=3&limit=10&category=nodejs&category=javascript');
console.log(myURL.searchParams);
// URLSearchParams {
//   'page' => '3',
//   'limit' => '10',
//   'category' => 'nodejs',
//   'category' => 'javascript' }

console.log(myURL.searchParams.getAll('category')); // [ 'nodejs', 'javascript' ]
console.log(myURL.searchParams.get('limit')); // 10
console.log(myURL.searchParams.has('page')); // true
console.log(myURL.searchParams.keys()); // URLSearchParams Iterator { 'page', 'limit', 'category', 'category' }
console.log(myURL.searchParams.values()); // URLSearchParams Iterator { '3', '10', 'nodejs', 'javascript' }

myURL.searchParams.append('filter', 'es3');
myURL.searchParams.append('filter', 'es5');

console.log(myURL.searchParams.getAll('filter')); // [ 'es3', 'es5' ]

myURL.searchParams.set('filter', 'es6');
console.log(myURL.searchParams.getAll('filter')); // [ 'es6' ]

myURL.searchParams.delete('filter');
console.log(myURL.searchParams.getAll('filter')); // []

console.log(myURL.searchParams.toString()); // page=3&limit=10&category=nodejs&category=javascript
myURL.search = myURL.searchParams.toString();
console.log(myURL.search); // ?page=3&limit=10&category=nodejs&category=javascript

3_8_6. searchParams 예제 결과

?page=3&limit=10&category=nodejs&category=javascript
- getAll(키): 키에 해당하는 모든 값들을 가져온다.
  category 키에는 두 가지 값, 즉, nodejs와 javascript의 값이 들어있다.
- get(키): 키에 해당하는 첫 번째 값만 가져온다.
- has(키): 해당 키가 있는지 없는지를 검사한다.
- keys(): searchParams의 모든 키를 반복기(iterator, ES2015 문법) 객체로 가져온다.
- values(): searchParams의 모든 값들을 반복기 객체로 가져온다.
- append(키, 값): 해당 키를 추가한다. 같은 키의 값이 있다면 유지하고 하나 더 추가한다.
- set(키, 값): append와 비슷하지만 같은 키의 값들을 모두 지우고 새로 추가한다.
- delete(키): 해당 키를 제거한다.
- toString(): 조작한 searchParams 객체를 다시 문자열로 만든다.
  이 문자열을 search에 대입하면 주소 객체에 반영된다.

3_8_7. querystring (기존 노드 방식)

기존 노드 방식에서는 url querystring을 querystring 모듈로 처리했다.
- querystring.parse(쿼리): url의 query 부분을 자바스크립트 객체로 분해해준다.
- querystring.stringify(객체): 분해된 query 객체를 문자열로 다시 조립해준다.

// querystring.js
const url = require('url');
const querystring = require('querystring');

const parsedUrl = url.parse('http://www.gilbut.co.kr/?page=3&limit=10&category=nodejs&category=javascript');
const query = querystring.parse(parsedUrl.query);

console.log(query);
// [Object: null prototype] {
//   page: '3',
//   limit: '10',
//   category: [ 'nodejs', 'javascript' ]
// }

console.log(querystring.stringify(query)); // page=3&limit=10&category=nodejs&category=javascript

searchParams 모듈이 기능이 좀 더 많다.
간단한걸 원하면 querystring으로 간단한 처리를 하면 된다.