new URL( ) 생성자

✅ Quill 에디터에 주소를 입력하면 오픈그래프를 생성해서 insertEmbed를 했는데 그때 new URL을 사용했었고, 정리하고자 쓰는 글.

✅ 오픈그래프 api에 여러 사이트에 대한 요청을 보내고, 그 응답으로는 대개 image, title, description, url 등의 정보가 온다. 이미지의 경우, 각 사이트의 index.html에 기입된 이미지의 경로에 따라 절대경로 혹은 상대경로로 응답될 수 있다.
ex) 절대경로 -> https://website.com/path/to/image.png
ex) 상대경로 -> path/to/image.png

👉 따라서 유저가 url을 입력후 og를 생성하는 과정에서 이미지에 대한 응답이 절대경로로 오든, 상대경로로 오든 모든 케이스에 대응하기 위해, 일관된 방식으로 응답을 처리하기 위해 new URL 생성자를 사용하게 되었다.

아래의 코드는 url 생성자의 구조이다. (1개의 파라미터를 넘긴 상태)

const url = new URL('https://naver.com');

URL {
  __proto__: {
    origin: 'https://naver.com',
    protocol: 'https:',
    username: '',
    password: '',
    host: 'naver.com',
    hostname: 'naver.com',
    port: '',
    pathname: '/',
    search: '',
    searchParams: URLSearchParams {
      __proto__: {
        append: ƒ append(),
        delete: ƒ delete(),
        get: ƒ get(),
        getAll: ƒ getAll(),
        has: ƒ has(),
        set: ƒ set(),
        sort: ƒ sort(),
        toString: ƒ toString(),
        entries: ƒ entries(),
        forEach: ƒ forEach(),
        keys: ƒ keys(),
        values: ƒ values(),
        constructor: ƒ URLSearchParams()
      }
    },
    hash: '',
    href: 'https://naver.com/',
    toJSON: ƒ toJSON(),
    toString: ƒ toString(),
    constructor: ƒ URL()
  }
}

new URL() 생성자의 사용법

new URL() 생성자는 주로 두 개의 인자를 받아 url을 생성한다.

• 첫번째 인자 : 절대경로 혹은 상대경로
• 두번째 인자 : Base url (첫번째 인자가 상대경로일경우 두번째 인자가 사용된다.)

예시

다음과 같은 코드가 있다고 가정해본다.

const imgSrc = new URL(
    ogResponseData.image,
    ogResponseData.url,
).toString();

아래는 URL 생성자 내부의 파라미터 값에 대한 예제이다.
✅ ogResponseData.image -> https://s.pstatic.net/static/www/mobile/edit/2016/0705/mobile_212852414260.png (절대경로)
✅ ogResponseData.url -> https://naver.com

👉 이 때, imgSrc의 결과는 https://s.pstatic.net/static/www/mobile/edit/2016/0705/mobile_212852414260.png 였다. 이유는 첫 번째 인자가 절대경로였기 때문에 두 번째 인자(base URL)는 무시되기 때문이다.

✅ 만약 첫번째 인자가 /mobile/edit/2016/0705/mobile_212852414260.png 와 같은 상대경로였다면?
이때 두번째 인자인 base url (예를 들면 https://your_website.com)이 사용되어서 imgSrc의 결과는 https://your_website.com/mobile/edit/2016/0705/mobile_212852414260.png 가 되었을 것이다.