본문으로 건너뛰기
yutils
예시

입력 (URL)

https://user:pass@yutils.dev:8080/tools/base64?q=hello&lang=ko#preview

출력 (구성 요소)

protocol: https:
user: user
pass: pass
host: yutils.dev:8080
hostname: yutils.dev
port: 8080
path: /tools/base64
query: { q: hello, lang: ko }
hash: #preview

참고

WHATWG URL 표준 기반 — 브라우저 내장 `URL` 객체와 동일 결과. 쿼리는 자동 파싱돼 키-값 객체로 표시.

사용법 / 자주 묻는 질문

이런 경우 사용하세요

  • 복잡한 URL 의 구성 요소 한 번에 보기
  • 쿼리 파라미터 디버깅 — `utm_*`, 추적 코드 분석
  • redirect 체인의 각 단계 URL 분해
  • subdomain · port · path · hash 정확한 위치 확인
  • URL 인코딩된 쿼리 값의 디코드

자주 묻는 질문

Q.WHATWG vs RFC 3986?
A.RFC 3986 은 1990년대 spec, WHATWG URL Living Standard 는 브라우저 실제 동작 기준. 둘이 약간 다른 부분(예: trailing slash 처리)이 있는데 브라우저는 WHATWG 를 따릅니다. 본 도구도 WHATWG.
Q.relative URL 도 파싱되나요?
A.base URL 이 필요합니다. `/tools/base64` 단독은 host 가 없어 파싱 불가 — `https://example.com/tools/base64` 처럼 절대형으로 입력하세요.
Q.같은 키가 여러 번 있으면?
A.예: `?tag=a&tag=b`. URLSearchParams 는 `getAll('tag')` 로 배열 반환. 본 도구는 마지막 값만 표시 — 자세한 분석엔 jq 등 별도 도구.
재미있는 사실

  • URL 의 모던 표준은 두 가지 — IETF 의 RFC 3986 (2005, static) 과 WHATWG 의 URL Living Standard (2012~, 계속 갱신). 두 표준이 미세하게 다른데, 브라우저는 사실상 WHATWG 를 따릅니다.

    WHATWG URL Standard

  • WHATWG URL parser 는 'living standard' 원칙으로 실제 브라우저 동작에 맞춥니다 — backslash 를 forward slash 로 해석, 공백 무시 등 RFC 3986 가 거부하는 것도 받아들임. '실세계 호환 우선'.

    Wikipedia — URL standards

  • JavaScript 의 `new URL(...)` 생성자는 2017년 정도부터 모든 모던 브라우저·Node.js 에 정착됐습니다. 그 전엔 정규식·`document.createElement('a')` hack 같은 방법이 만연 — 매번 미세하게 다른 결과를 냈어요. 현재는 `URL.canParse(str)` (2023+) 으로 검증도 가능.

    MDN — URL constructor

관련 도구

이 카테고리 모든 도구 보기 →