일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- DOM
- QueryClient
- 조건부스타일
- ㅡ
- CustomHook
- es6
- 함수형프로그래밍
- ignore padding
- 제어컴포넌트
- BFC
- 부모요소의 패딩 무시
- alias설정
- transition
- useQueryClient
- createPortal
- 부모패딩
- BlockFormattingContext
- debouncing
- ?? #null병합연산자
- parent padding
- 리액트
- react
- tailwindCSS
- 서초구보건소 #무료CPR교육
- twoarrow
- 문제해결
- vite
- 화살표2개
- accordian
- Carousel
Archives
- Today
- Total
프론트엔드 첫걸음
URLSearchParams, URL 차이 본문
URLSearchParams 객체와 URL 객체는 JavaScript에서 URL과 관련된 작업을 수행하는 데 사용되는 두 가지 다른 객체입니다. 각각의 주요 목적과 차이점은 다음과 같습니다:
URL 객체:
- URL 객체는 URL을 파싱하고, 생성하며, 조작하는 데 사용됩니다.
- URL의 다양한 구성 요소(프로토콜, 호스트, 경로 등)에 접근할 수 있습니다.
- 주로 웹 주소를 다룰 때 사용됩니다
const urlObject = new URL('https://example.com/path?param1=value1¶m2=value2');
console.log(urlObject.protocol); // Output: "https:"
console.log(urlObject.host); // Output: "example.com"
URLSearchParams 객체:
- URLSearchParams 객체는 URL 쿼리 매개변수를 처리하는 데 사용됩니다.
- 쿼리 매개변수를 추가, 제거, 가져오기 및 조작할 수 있는 메서드를 제공합니다.
- 일반적으로 쿼리 문자열을 다룰 때 사용됩니다.
const params = new URLSearchParams('param1=value1¶m2=value2');
params.append('param3', 'value3');
console.log(params.toString()); // Output: "param1=value1¶m2=value2¶m3=value3"
따라서, URL을 파싱하고 조작해야 할 때는 URL 객체를 사용하고, 단순히 URL의 쿼리 매개변수를 처리해야 할 때는 URLSearchParams 객체를 사용하는 것이 적절합니다. 두 객체는 서로 보완적으로 사용되어 웹 개발에서 URL과 관련된 작업을 쉽게 수행할 수 있게 합니다.
'개발 공부 > Javascript' 카테고리의 다른 글
성능 최적화와 유지보수를 위한 Javascript Pattern (0) | 2024.09.01 |
---|---|
모든 문자 포함하는 정규식(한글, 일본어, 중국어 모두 포함) (1) | 2024.02.08 |
getElementById 생략 (0) | 2023.11.02 |
함수형 프로그래밍 - 화살표 2개 함수 이해하기 (0) | 2023.03.24 |
함수에 매개변수로 들어가 있는 ...은 rest parameter (0) | 2023.03.24 |