url

인터넷 주소를 쉽게 조작하도록 도와주는 모듈입니다. url 처리에는 크게 두 가지 방식이 있습니다. 노드 버전 7에서 추가된 WHATWG(웹 표준을 정하는 단체의 이름) 방식의 url과 예전부터 노드에서 사용하던 방식의 url이 있습니다.

가운데 주소를 기준으로 위쪽은 기존 노드의 url 구분 방법이고, 아래쪽은 WHATWG의 url 구분 방법입니다.

 

 

url.js

const url = require("url");

const { URL } = url;
const myURL = new URL("https://melocoding.tistory.com/");
console.log("new URL():", myURL);
console.log("url.format():", url.format(myURL));

console.log("---------------------------------");
const parsedUrl = url.parse("https://melocoding.tistory.com/");
console.log("url.parse():", parsedUrl);
console.log("url.format():", url.format(parsedUrl));

 

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

 

콘솔

$ node url
new URL(): URL {
  href: 'https://melocoding.tistory.com/',
  origin: 'https://melocoding.tistory.com',
  protocol: 'https:',
  username: '',
  password: '',
  host: 'melocoding.tistory.com',
  hostname: 'melocoding.tistory.com',
  port: '',
  pathname: '/',
  search: '',
  searchParams: URLSearchParams {},
  hash: ''
}
url.format(): https://melocoding.tistory.com/
---------------------------------
url.parse(): Url {
  protocol: 'https:',
  slashes: true,
  auth: null,
  host: 'melocoding.tistory.com',
  port: null,
  hostname: 'melocoding.tistory.com',
  hash: null,
  search: null,
  query: null,
  pathname: '/',
  path: '/',
  href: 'https://melocoding.tistory.com/'
}
url.format(): https://melocoding.tistory.com/

 

기존 노드 방식에는 두 메서드를 주로 사용합니다.

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

WHATWG 방식은 search 부분을 searchParams라는 특수 객체로 반환하므로 유용합니다. search 부분은 보통 주소를 통해 데이터를 전달할 때 사용됩니다. search는 물음표(?)로 시작하고, 그 뒤에 키=값 형식으로 데이터를 전달합니다. 여러 키가 있을 경우에는 &로 구분합니다.

 

searhParams.js

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

const myURL = new URL(
  "http://www.gilbut.co.kr/?page=3&limit=10&category=nodejs&js&category=javascript"
);
console.log("searchParams:", myURL.searchParams);
console.log("searchParams.getAll(): ", myURL.searchParams.getAll("category"));
console.log("searchParams.get(): ", myURL.searchParams.get("limit"));
console.log("searchParams.has(): ", myURL.searchParams.get("page"));

console.log("searchParams.keys(): ", myURL.searchParams.keys());
console.log("searchParams.values(): ", myURL.searchParams.values());

myURL.searchParams.append("filter", "es3");
myURL.searchParams.append("filter", "es5");
console.log(myURL.searchParams.getAll("filter"));

myURL.searchParams.set("filter", "es6");
console.log(myURL.searchParams.getAll("filter"));

myURL.searchParams.delete("filter");
console.log(myURL.searchParams.getAll("filter"));

console.log("searchParams.toString(): ", myURL.searchParams.toString());
myURL.search = myURL.searchParams.toString();

 

콘솔

$ node searchParams
searchParams: URLSearchParams {
  'page' => '3',
  'limit' => '10',
  'category' => 'nodejs',
  'js' => '',
  'category' => 'javascript' }
searchParams.getAll():  [ 'nodejs', 'javascript' ]
searchParams.get():  10
searchParams.has():  3
searchParams.keys():  URLSearchParams Iterator { 'page', 'limit', 'category', 'js', 'category' }
searchParams.values():  URLSearchParams Iterator { '3', '10', 'nodejs', '', 'javascript' }
[ 'es3', 'es5' ]
[ 'es6' ]
[]
searchParams.toString():  page=3&limit=10&category=nodejs&js=&category=javascript

 

URL 생성자를 통해 myURL이라는 주소 객체를 만들었습니다. myURL 안에는 searchParams 객체가 있습니다. 이 객체는 search 부분을 조작하는 다양한 메소드를 지원합니다.

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

query 같은 문자열보다 searchParams가 유용한 이유는 query의 경우 다음에 배우는 querystring 모듈을 한 번 다 사용해야 하기 때문입니다.