개발지식/http
HTTP URL 구조 살펴보기 / New URL()과 URLSearchParams()
thinktank911
2025. 9. 8. 19:02
URL의 기본구조
scheme://username:password@host:port/path?query#fragment1. 스키마(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<참고>