URL 파서/ protocol · host · path · query · hash
URL을 구성 요소(프로토콜, 호스트명, 포트, 경로, 쿼리 매개변수, 해시)로 실시간 분석하고 시각적으로 표시합니다.
URL
예시 사용
이 도구가 도움이 되었나요?
코드 예제
JavaScript (URL API)
const url = new URL( 'https://user:[email protected]:8080' + '/v1/search?q=hello+world&page=2#results' ); url.protocol // 'https:' url.username // 'user' url.hostname // 'api.example.com' url.port // '8080' url.pathname // '/v1/search' url.search // '?q=hello+world&page=2' url.hash // '#results' // Query params url.searchParams.get('q') // 'hello world' url.searchParams.get('page') // '2' [...url.searchParams] // [['q','hello world'],['page','2']] // Modify & rebuild url.hostname = 'api2.example.com'; url.searchParams.set('page', '3'); url.toString() // rebuilt URL
Python
from urllib.parse import urlparse, parse_qs, urlencode raw = 'https://user:[email protected]:8080/v1/search?q=hello+world&page=2#results' u = urlparse(raw) u.scheme # 'https' u.netloc # 'user:[email protected]:8080' u.hostname # 'api.example.com' u.port # 8080 u.path # '/v1/search' u.query # 'q=hello+world&page=2' u.fragment # 'results' # Parse query params params = parse_qs(u.query) params['q'] # ['hello world'] params['page'] # ['2']
Go
import "net/url"
raw := "https://api.example.com:8080/search?q=hello&page=2"
u, err := url.Parse(raw)
u.Scheme // "https"
u.Host // "api.example.com:8080"
u.Hostname() // "api.example.com"
u.Port() // "8080"
u.Path // "/search"
u.RawQuery // "q=hello&page=2"
// Parse query
q := u.Query()
q.Get("q") // "hello"
q.Get("page") // "2"
// Build URL
u2 := &url.URL{
Scheme: "https",
Host: "example.com",
Path: "/api/v1",
}
u2.RawQuery = url.Values{"key": {"val"}}.Encode()Shell (curl / python)
# Extract parts with grep/sed
URL="https://api.example.com/search?q=hello&page=2"
# Protocol
echo $URL | grep -oP '^[^:]+(?=://)'
# api.example.com
# Query param with Python
python3 -c "
from urllib.parse import urlparse, parse_qs
u = urlparse('$URL')
print(parse_qs(u.query))
"
# curl: show effective URL
curl -v "$URL" 2>&1 | grep '> GET'
# httpie
http GET "$URL"자주 묻는 질문
URL은 어떤 부분으로 구성되어 있나요?
전체 URL 구조: scheme://username:password@hostname:port/pathname?search#hash. 각 부분의 의미: scheme(프로토콜, 예: https, ftp), authority(사용자명:비밀번호@호스트명:포트), pathname(/로 시작하는 경로), search(?로 시작하는 쿼리 문자열), hash(#로 시작하는 프래그먼트 식별자, 서버로 전송되지 않음). 모든 부분이 필수는 아닙니다.
URL의 # 프래그먼트는 서버로 전송되나요?
아니요. 해시/프래그먼트는 브라우저에서 로컬로 처리되며 HTTP 요청에 포함되지 않습니다. 페이지 내 앵커 내비게이션(특정 섹션으로 스크롤)과 SPA에서의 클라이언트 사이드 라우팅(예: React Router 해시 모드)에 사용됩니다.
쿼리 문자열은 어떻게 올바르게 파싱하나요?
쿼리 문자열 형식: key=value&key2=value2. 값의 특수 문자는 URL 인코딩이 필요합니다. JavaScript에서는 new URLSearchParams(url.search), Python에서는 urllib.parse.parse_qs(), Go에서는 url.ParseQuery()를 사용합니다. 참고: 같은 키가 여러 번 나타날 수 있으며(예: tag=js&tag=python), 이 경우 값은 배열이 됩니다.
URL에서 포트는 언제 생략할 수 있나요?
프로토콜의 기본 포트를 사용할 때 생략 가능합니다: HTTP 기본값 80, HTTPS 기본값 443, FTP 기본값 21. 브라우저의 URL API에서 기본 포트 사용 시 url.port는 빈 문자열을 반환하고, url.host는 기본값이 아닌 포트일 때만 포트 번호를 포함합니다(예: example.com:8080).
JavaScript에서 URL을 파싱하려면 어떻게 하나요?
내장 URL API를 사용합니다: const u = new URL('https://example.com/path?q=1#top'); u.hostname → 'example.com'; u.pathname → '/path'; u.searchParams.get('q') → '1'; u.hash → '#top'. URL API는 모든 최신 브라우저와 Node.js 10+에서 작동하며 정규식보다 안정적입니다.
상대 URL과 절대 URL의 차이점은 무엇인가요?
절대 URL은 전체 프로토콜과 호스트명을 포함하며(https://example.com/path) 독립적으로 해석할 수 있습니다. 상대 URL은 현재 페이지 기준의 상대 경로('./page', '/api/data', '../assets/img.png')로, 완전한 URL로 해석하려면 기본 URL이 필요합니다. JavaScript에서: new URL('./page', 'https://example.com/app/')의 결과는 https://example.com/app/page입니다.