it-box

URL 파서

URL을 프로토콜, 원본, 매개변수, 포트, 사용자 이름·비밀번호 등 구성 요소로 나눕니다.

URL 파서 도구 열기

URL을 입력하면 프로토콜, 사용자 이름, 비밀번호, 호스트, 포트, 경로, 쿼리 문자열과 쿼리 파라미터 목록을 나누어 보여 줍니다. 브라우저의 URL 객체를 그대로 사용합니다.

사용 순서

  1. 입력란에 http:// 또는 https://로 시작하는 전체 URL을 넣습니다.
  2. 속성 목록에서 프로토콜, 호스트, 포트, 경로를 확인합니다.
  3. Params 행과 아래 파라미터 목록에서 키와 값을 확인합니다.
  4. 필요한 값은 각 행의 복사 버튼으로 가져갑니다.

예시

https://me:pwd@it-box.dev:3000/url-parser?key1=value&key2=value2 를 넣으면 Protocol은 https:, Username은 me, Password는 pwd, Hostname은 it-box.dev, Port는 3000, Path는 /url-parser, Params는 ?key1=value&key2=value2 로 나옵니다.

한계

해시(#로 시작하는 부분)는 속성 목록에 없어서 표시되지 않습니다. 같은 키가 여러 번 나오면 파라미터 목록에는 마지막 값만 남습니다. 예를 들어 key1=value&key1=again이면 again만 보입니다. 프로토콜이 없는 주소(it-box.dev/path)는 URL로 해석되지 않아 오류가 표시됩니다.

보안 주의

사용자 이름과 비밀번호가 들어간 URL(사용자:비밀번호@호스트)은 화면에 평문으로 나옵니다. 화면 공유나 스크린샷 전에 Password 행을 가리고, 운영 데이터베이스 접속 문자열은 이 도구에 넣지 않는 편이 안전합니다.

배경 지식

URL은 프로토콜, 인증 정보, 호스트, 포트, 경로, 쿼리, 해시가 정해진 순서로 이어진 문자열입니다. 브라우저는 이를 URL 객체로 나눠 주며, 이 도구의 속성 목록도 그 객체의 속성을 그대로 읽습니다. 문자열을 직접 자르면 @가 여러 번 나오거나 IPv6 주소가 들어간 경우 잘못 나뉘므로, 표준 파서를 쓰는 편이 안전합니다.

pathname은 경로만, search는 물음표를 포함한 쿼리 전체를 뜻합니다. 쿼리 파라미터 목록은 search를 다시 키와 값의 쌍으로 나눈 결과입니다. 기본 포트(https는 443, http는 80)는 URL 객체가 비워 두므로 포트 칸이 비어 있어도 정상입니다. 리다이렉트 주소처럼 URL 안의 쿼리 값이 또 다른 URL인 경우에는 그 값을 다시 디코딩하고 파싱해야 내부 주소가 보입니다.

자주 묻는 질문

URL의 해시는 어디서 확인하나요?

이 도구의 속성 목록에는 해시가 없으므로 주소창이나 URL 객체의 hash 속성으로 확인해야 합니다. 해시는 서버로 전송되지 않고 브라우저 안에서만 쓰이므로, 단일 페이지 앱의 라우팅 상태를 볼 때 자주 필요합니다.

같은 이름의 파라미터를 모두 보려면 어떻게 하나요?

URL 객체의 searchParams.getAll(키)를 쓰면 모든 값을 배열로 얻을 수 있습니다. 이 도구는 Object.fromEntries를 사용하므로 나중 값이 앞의 값을 덮어씁니다. 중복 파라미터가 중요한 API라면 쿼리 스트링 변환 도구나 getAll 호출로 확인하세요.

경로 끝의 슬래시가 있고 없고는 차이가 있나요?

서버에 따라 다르게 처리됩니다. /docs와 /docs/는 URL 객체에서 서로 다른 pathname이므로 리다이렉트나 404를 일으킬 수 있습니다. 이 도구는 주소를 나눠 보여 줄 뿐, 서버가 어떻게 응답하는지는 알려 주지 않습니다.