HTTP URL 구조 살펴보기 / New URL()과 URLSearchParams()

URL의 기본구조

scheme://username:password@host:port/path?query#fragment

1. 스키마(Scheme)

• 프로토콜을 지정
• 주요 스키마
  • http : 일반 웹 통신
  • https : 보안 웹 통신
  • ftp : 파일 전송
  • mailto : 이메일
  • file : 로컬 파일

2. 사용자정보(Userinfo)

• username:password 형식
• 거의 사용되지 않음(보안상 권장x)
• 예) ftp://user:pass@ftp.example.com/

3. 호스트(Host)

• 도메인 이름 또는 IP 주소
• 예)
  • www.example.com
  • 192.168.0.1
  • localhost

4. 포트(Port)

• 서비스 포트 번호
• 생략 시 기본값 사용:
  • HTTP: 80
  • HTTPS : 443
  • FTP : 21

5. 경로(Path)

• 리소스 경로
• 디텍토리/파일구조 반영
• 예) /products/category/electronics

6. 쿼리 스트링(Query String)

• ?뒤에 위치
• key=value 형태
• &로 여러 파라미터 구분
• 예) ?page=1&limit=10&sort=desc

7. 프래그먼트 or 앵커 (Fragment or Anchor)

• #뒤에 위치
• 페이지 내 특정 섹션 지정
• 서버로 전송되지 않음
• 예) #section-1

---

URL 관련 함수

New URL()

• JavaScript에서 URL 객체를 생성하기 위한 생성자 함수
• 이 객체는 웹 주소를 구성하는 다양한 부분에 접근하고 조작할 수 있게 해준다.

  const url = new URL('https://www.example.com:8080/path?query=1#hash');

url 객체를 사용해 URL의 각 부분에 접근할 수 있다.

 

1. href : 전체 URL

console.log(url.href); // "https://www.example.com:8080/path?query=1#hash"

 

2. protocol : URL의 프로토콜

console.log(url.protocol); // "https:"

 

3. hostname : 호스트이름(도메인)

console.log(url.hostname); // "www.example.com"

 

4. port : 포트 번호

console.log(url.port); // "8080"

 

5. pathname : 경로

console.log(url.pathname); // "/path"

 

6. search : 쿼리 문자열

console.log(url.search); // "?query=1"

 

7. hash : 해시(Fragment)

console.log(url.hash); // "#hash"

 

8. searchParams :
url 객체의 속성으로, 해당 URL의 쿼리 문자열을 파싱한 URLSearchParams 객체를 반환
URL과 직접 연관된 상태에서 쿼리 문자열을 조작할 수 있게 함

// URL 객체 생성 
const url = new URL('https://www.example.com?name=John&age=30'); 
// searchParams를 통해 URLSearchParams 객체에 접근 
const params = url.searchParams; 
// 쿼리 문자열 조작 
params.set('name', 'Doe'); 
params.append('city', 'New York'); 
// URL이 자동으로 업데이트됨 
console.log(url.toString()); // "https://www.example.com/?name=Doe&age=30&city=New%20York"

New URLSearchParams

• URL의 쿼리 문자열을 쉽게 다룰 수 있도록 도와주는 JavaScript 생성자 함수
• URL 쿼리 문자열은 ?이후에 오는 부분으로, 키와 값이 쌍으로 이루어진 데이터
• URLSearchParams 객체 사용 시 쿼리 문자열 파싱하고 추가, 수정, 삭제 가능

const params = new URLSearchParams('name=John&age=30');

 

 

1. get(): 특정 키의 값을 가져옵니다.

console.log(params.get('name')); // "John" 
console.log(params.get('age')); // "30"

 

2. set(): 특정 키의 값을 설정합니다. --> *같은 키값이 있으면 덮고, 없으면 추가

params.set('name', 'Doe'); 
console.log(params.toString()); // "name=Doe&age=30"

 

3. append(): 새로운 키와 값을 추가합니다. --> * 같은 키값이 있어도 추가, 없어도 추가

params.append('city', 'New York'); 
console.log(params.toString()); // "name=Doe&age=30&city=New York"

 

4. delete(): 특정 키와 그 값을 삭제합니다.

params.delete('age'); 
console.log(params.toString()); // "name=Doe&city=New York"

 

5. has(): 특정 키가 있는지 확인합니다.

console.log(params.has('name')); // true 
console.log(params.has('age')); // false

 

6. forEach(): 모든 키-값 쌍에 대해 반복 작업을 수행합니다.

params.forEach((value, key) => { console.log(`${key}: ${value}`); }); 
// 출력: 
// name: Doe 
// city: New York

---

<참고>

https://observerlife.tistory.com/147

https://y-chyachya.tistory.com/120#google_vignette