[NODE] 📚 url 모듈 - 링크 정보 제어 (URL / WHATWG)

URL 모듈

노드에서는 url 모듈을 사용하여 사이트 주소 정보를 url 객체로 만들 수 있다.

url 모듈을 이용해 주소 문자열을 객체로 만들면 문자열 안에 있던 각각의 정보를 나누어 그 객체의 속성으로 보관한다. (ex. protocol / host / query)

 

따라서 요청 프로토콜이 http인지 https인지를 구별하거나 요청 파라미터를 확인하고 싶다면 url 객체가 갖고 있는 속성 값을 확인하면 된다. 

---

URL방식 과 WHATWG 방식

 

URL

┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│                                              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 "

 

whatwg

url방식보다 진일보 된 방식이다.

WHATWG URL의 origin 속성에는 protocol 및 host 가 포함 되지만 username 또는 password 는 포함 되지 않는다 .

"  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                                              │
└────────────────────────────────────────────────────────────────────────────────────────────────┘

---

URL

const url = require('url');

//주소 문자열을 URL 객체로 만들기
const parsedUrl = url.parse('https://sskey.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F');
console.log('url.parse():', parsedUrl);
// url.parse(): Url {
//     protocol: 'https:',
//     slashes: true,
//     auth: null,
//     host: 'sskey.tistory.com',
//     port: null,
//     hostname: 'sskey.tistory.com',
//     hash: null,
//     search: '?type=post&returnURL=%2Fmanage%2Fposts%2F',
//     query: 'type=post&returnURL=%2Fmanage%2Fposts%2F',
//     pathname: '/manage/newpost/',
//     path: '/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F',
//     href: 'https://sskey.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F'
//   }


//URL 객체를 주소 문자열로 만들기
console.log('url.format():', url.format(parsedUrl));
//   url.format(): https://sskey.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F

 

whatwg

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

const myURL = new URL('https://sskey.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F');
console.log('new URL():', myURL);
// new URL(): URL {
//     href: 'https://sskey.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F',
//     origin: 'https://sskey.tistory.com',
//     protocol: 'https:',
//     username: '',
//     password: '',
//     host: 'sskey.tistory.com',
//     hostname: 'sskey.tistory.com',
//     port: '',
//     pathname: '/manage/newpost/',
//     search: '?type=post&returnURL=%2Fmanage%2Fposts%2F',
//     searchParams: URLSearchParams { 'type' => 'post', 'returnURL' => '/manage/posts/' },
//     hash: ''
//   }


console.log('url.format():', url.format(myURL));
//   url.format(): https://sskey.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F

---

URL querystring 모듈

url.parse() 를 통해 얻은 query문자열을 사용하기 쉽게 객체로 만드는 모듈

• querystring.parse(쿼리): url의 쿼리 부분을 자바스크립트 객체로 분해
• querystrring.stringify(객체): 분해된 쿼리 객체를 문자열로 다시 조립

const url = require('url');
const querystring = require('querystring')

const parsedUrl = url.parse('https://sskey.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F');
console.log(parsedUrl.query); // type=post&returnURL=%2Fmanage%2Fposts%2F


const query = querystring.parse(parsedUrl.query) // 다루기 편하게 쿼리스트링을 객체로 변환
console.log(query); // { type: 'post', returnURL: '/manage/posts/' }
console.log(query.returnURL); // '/manage/posts/'


console.log(querystring.stringify(query)); // type=post&returnURL=%2Fmanage%2Fposts%2F

 

whatwg searchParams 메소드

url의 쿼리스트링 이름은 whatwg에선 search로 불린다.

• searchParams.getAll(key): 키에 해당하는 모든 값들을 가져온다.
• searchParams.get(key): 키에 해당하는 첫 번째 값만 가져온다.
• searchParams.has(key): 해당 키가 존재하는지 검사한다.
• searchParams.keys(): searchParams의 모든 키를 반복기 객체로 가져온다.
• searchParams.values(): searchParams의 모든 값을 반복기 객체로 가져온다.
• searchParams.append(key, value): 해당 키를 추가, 같은 키의 값이 있다면 유지하고 하나 더 추가한다.
• searchParams.set(key, value): 같은 키의 값들을 모두 지우고 새로 추가한다.
• searchParams.delete(key): 해당 키를 제거한다.
• searchParams.toString(): 조작한 searchParams 객체를 다시 문자열로 만든다.

searchParams가 유용한 이유는 query의 경우 querystring 모듈을 한 번 더 사용해야 하기 때문이다.

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

const parsedUrl = new URL('https://sskey.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F');
console.log(parsedUrl.search); // ?type=post&returnURL=%2Fmanage%2Fposts%2F


// 다루기 편하게 쿼리스트링을 MAP으로 변환
console.log(parsedUrl.searchParams); // URLSearchParams { 'type' => 'post', 'returnURL' => '/manage/posts/' }
console.log(parsedUrl.searchParams.get('returnURL')); // '/manage/posts/'


console.log(parsedUrl.searchParams.toString()); // type=post&returnURL=%2Fmanage%2Fposts%2F

---

Reference

https://runebook.dev/ko/docs/node/url