URL 파서
웹훅이 오작동하거나 추적 링크가 잘못된 파라미터를 실어 보낼 때, 가장 빠른 방법은 URL을 분해해 각 부분을 읽는 것입니다. 아무 URL이나 붙여넣으면 이 파서가 구성 요소로 나눕니다: 스킴, 사용자 이름과 비밀번호, 호스트, 포트, 경로, 쿼리 문자열, 프래그먼트로 나눈 뒤, 쿼리를 키-값 쌍의 표로 펼칩니다. 저희 서버에서 PHP 표준 URL 파서로 동작하므로, PHP 백엔드가 같은 링크를 어떻게 읽는지 그대로 볼 수 있습니다.
URL을 파싱하는 방법
-
1
URL 붙여넣기
절대 URL이든 상대 URL이든 아무 URL이나 입력하세요. 누를 버튼은 없으며, 입력하는 대로 파싱됩니다.
-
2
구성 요소 읽기
찾아낸 스킴, 호스트, 포트, 사용자, 비밀번호, 경로, 쿼리, 프래그먼트가 표에 채워집니다. 비어 있는 부분은 대시로 표시됩니다.
-
3
쿼리 펼치기
각 `key=value` 쌍이 별도의 행에 표시되며, 퍼센트 인코딩과 `+`는 실제 문자로 디코딩됩니다.
-
4
파라미터 복사
복사 버튼으로 모든 쿼리 파라미터를 한 번에 `key=value` 형식의 줄로 가져와 API 클라이언트에 붙여넣을 수 있습니다.
URL의 구조
https://user:pass@api.example.com:8443/v1/users?page=2&sort=name#profile를 예로 들면, 파서는 이를 다음과 같이 분해합니다.
| 구성 요소 | 값 |
|---|---|
| scheme | https |
| user | user |
| pass | pass |
| host | api.example.com |
| port | 8443 |
| path | /v1/users |
| query | page=2&sort=name |
| fragment | profile |
이어서 쿼리 문자열은 별도의 표로 펼쳐집니다: page = 2, sort = name.
쿼리 문자열을 읽는 방식
- 값은 퍼센트 인코딩에서 디코딩되고
+는 공백이 되므로,q=hello%20world와q=hello+world는 모두hello world로 읽힙니다. - 쌍은 첫 번째
=에서 나뉘므로,token=a=b=c는a=b=c를 값으로 유지합니다. - 반복되는 키는 마지막 값만 유지합니다:
?id=1&id=2는id=2를 반환합니다. 모든 값을 유지하려면 배열 구문id[]=1&id[]=2를 사용하세요. 목록으로 표시됩니다. filter[status]=open처럼 대괄호가 있는 키는 중첩 구조가 되어 JSON으로 표시됩니다.
포트, 경로, 프래그먼트
- 포트는 작성된 그대로 표시됩니다. 무엇도 추가하거나 제거하지 않으므로
:443은443으로 나타나고, 포트가 없는 URL은 해당 행을 비워 둡니다. - 끝의 슬래시는 경로를 바꿉니다:
https://a.com의 경로는 비어 있고,https://a.com/의 경로는/입니다. - 프래그먼트(
#뒤)는 브라우저만 사용하는 값으로, 앵커로 스크롤하거나 클라이언트 측 라우터를 구동하는 데 쓰입니다. 서버에는 절대 도달하지 않으므로, 백엔드가 읽어야 하는 것은 쿼리 문자열에 넣어야 합니다. - 호스트는 입력한 그대로 반환됩니다. 이 파서는 국제화된(비ASCII) 도메인을 퓨니코드로 변환하거나 그 반대로 변환하지 않습니다.
자주 묻는 질문
네. /v1/users?ref=nav 같은 상대 링크에는 스킴이나 호스트가 없으므로 해당 행은 비어 있고, 경로와 쿼리는 그대로 채워집니다. http://a.com:port처럼 포트가 숫자가 아닌 잘못된 형식의 URL만 완전히 거부됩니다.
마지막 값만 유지되므로 ?id=1&id=2는 id = 2를 반환하며, 이는 PHP 백엔드가 읽는 방식과 똑같습니다. 모든 값이 필요하면 배열 구문 id[]=1&id[]=2를 사용하세요. 목록으로 표시됩니다.
파서는 포트를 작성된 그대로 보고합니다. 기본 포트를 제거하거나 빠진 포트를 추가하는 일이 절대 없으므로, 포트가 없는 URL은 빈 행을 보여주고 https://a.com:443은 443을 보여줍니다.
이 도구는 브라우저뿐 아니라 서버에서 동작하므로, URL은 파싱을 위해 저희 서버로 전송됩니다. URL 자체는 저장하지 않으며, 파서가 사용되었다는 익명 집계만 기록합니다.
관련 도구
보색 찾기
어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.
Webpack 설정 생성기
순수 JavaScript, React, Vue용 webpack 5 webpack.config.js를 만드세요. TypeScript, Babel, CSS 또는 Sass, 이미지, HtmlWebpackPlugin, 개발 서버, npm install 명령까지 함께 제공합니다.
색상 혼합기
두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.
PHP 포매터
간단한 PHP 코드에 줄바꿈과 2칸 또는 4칸 들여쓰기를 추가합니다. 결과를 반드시 검토하세요. PHP 파서나 PSR-12 적용 도구가 아닙니다.
OpenAPI 검증기
OpenAPI 또는 Swagger 문서를 JSON이나 YAML로 붙여넣고 핵심 구조를 점검하세요: 버전 필드, info 객체, paths를 명확한 오류와 경고와 함께 확인합니다.
CSS 로딩 애니메이션 생성기
순수 CSS로 원형 스피너를 만듭니다. 지름, 테두리 두께, 포인트 색상, 회전 속도를 설정하고 미리 보기를 확인한 뒤 바로 쓸 수 있는 CSS를 복사하세요. SVG도 자바스크립트도 필요 없습니다.
이 도구는 다른 언어로도 제공됩니다
- Analyseur d'URL [FR]
- URL Parser [ID]
- URL-parser [NL]
- URL-parser [SV]
- محلل عناوين URL [AR]
- ตัวแยกวิเคราะห์ URL [TH]
- URL-Parser [DE]
- URLパーサー [JA]
- Analizador de URL [ES]
- Parser URL [PL]
- Trình phân tích URL [VI]
- Analisador de URL [PT]
- URL Parser [EN]
- Parser URL [IT]
- Парсер URL [RU]
- URL Ayrıştırıcı [TR]
- URL解析器 [ZH]