URL

1. URL 객체 생성 방법 URL 객체는 new URL() 생성자를 사용. 두 가지 인자를 받음 • 첫 번째 인자: 절대 URL 또는 상대 경로. • 두 번째 인자: 상대 경로를 사용할 경우 기준(base) URL.

// 절대 URL
const url = new URL('https://example.com/path?query=123#hash');

// 상대 경로 (기준 URL 필요)
const relativeUrl = new URL('/path', 'https://example.com');

1. URL 객체의 주요 속성
이 속성들은 값을 적용해서 URL을 수정 가능하다

URL 객체의 메서드

1. toString() ⇒ URL 객체를 문자열로 반환. href 속성과 동일한 값 반환, but 읽기 전용

2. toJSON() ⇒ URL 객체를 JSON 형식의 문자열로 반환.
⇒ toString()과 동일한 결과를 반환, but JSON 직렬화에 사용됨

3. searchParams ⇒ URL의 쿼리 문자열(물음표 뒤에 있는 것들)을 조작할 수 있는 URLSearchParams 객체를 반환
1. get(name) / set(name, value) : 특정 쿼리 파라미터 값을 가져옴 / 쿼리 파라미터를 추가 or 기존 값 수정
2. append(name, value) : 쿼리 파라미터를 추가(있으면 중복 추가)
3. delete(name) : 특정 쿼리 파라미터를 제거
4. has(name) : 특정 파라미터가 존재하는지 확인
5. forEach(callback) : 모든 쿼리 파라미터를 순회하며 콜백을 실행

url.searchParams.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});
// 출력:
// foo: 42
// foo: 99

4. createObjectURL(object) - 정적 메서드
• Blob, File, 또는 MediaSource 객체로부터 임시 URL을 생성
• 브라우저 메모리에 있는 데이터를 URL로 변환
• 브라우저에서만 사용 가능하며, 생성된 URL은 페이지가 닫히면 무효화 됨

const blob = new Blob(['Hello, world!'], { type: 'text/plain' });
const objectURL = URL.createObjectURL(blob);
console.log(objectURL); // 예: "blob:https://example.com/abc123"

• 활용 사례 1. 파일 업로드 미리보기: 사용자가 업로드한 파일(예: 이미지)을 미리보기로 보여줄 때. 2. 동적 파일 다운로드: 클라이언트 측에서 생성된 데이터를 파일로 다운로드할 때. 3. 미디어 처리: 동영상 또는 오디오 데이터를 브라우저에서 재생할 때.
• 정적 메서드이므로 URL 클래스 자체에서 호출되며, 생성자로 호출하는 것이 아님!

5. revokeObjectURL(objectURL) - 정적 메서드
⇒ createObjectURL()로 생성된 임시 URL을 해제하여 메모리를 정리

1. URL 조작

const url = new URL('https://example.com/path?query=value');

// 프로토콜 변경
url.protocol = 'http:';
console.log(url.href);  // "http://example.com/path?query=value"

// 쿼리 문자열 추가
url.searchParams.append('newParam', 'newValue');
console.log(url.search);  // "?query=value&newParam=newValue"

// 해시 변경
url.hash = '#newSection';
console.log(url.href);  // "http://example.com/path?query=value&newParam=newValue#newSection"
ㅕ