🔗 URL 인코더/디코더 & 파서

💡 웹 통신의 기본, URL 인코딩(Encoding) 완벽 가이드

현대의 웹 개발에서 백엔드 API와 프론트엔드가 데이터를 주고받을 때 가장 많이 발생하는 버그 중 하나가 바로 '한글 및 특수문자 깨짐 현상'입니다. GET 방식의 쿼리 스트링(Query String)으로 데이터를 전송할 때 URL 규칙을 위반하면 서버는 데이터를 정상적으로 인식하지 못합니다. 이를 해결하는 핵심 기술이 바로 퍼센트 인코딩(Percent-encoding)입니다.

1. 왜 URL을 인코딩해야 할까요? (RFC 3986 표준)

인터넷 표준 기구인 IETF의 RFC 3986 문서에 따르면, URL(Uniform Resource Locator)은 오직 안전한 ASCII 문자(영문 알파벳, 숫자, 일부 기호)로만 구성되어야 합니다.

• 한글과 이모지: ASCII 문자가 아니므로, URL에 그대로 삽입되면 브라우저나 웹 서버(Nginx, Apache)가 이를 해석하는 과정에서 문자가 깨집니다.
• 예약어(Reserved Characters) 충돌: URL 생태계에서 ? (쿼리 시작), & (파라미터 구분자), = (값 할당), / (경로 구분자) 등은 이미 특수한 목적으로 예약된 기호입니다. 만약 사용자가 검색창에 "Q&A"라는 단어를 검색했는데 이를 인코딩 없이 전송하면, 서버는 & 기호를 파라미터 구분자로 오인하여 데이터가 완전히 잘려나가게 됩니다.

2. JavaScript: encodeURI vs encodeURIComponent의 차이점

자바스크립트 개발자들이 가장 흔하게 하는 실수 중 하나는 이 두 함수의 차이를 명확히 알지 못하고 혼용하는 것입니다.

• encodeURI() : URL 전체를 인코딩할 때 사용합니다. URL의 뼈대를 이루는 필수 기호인 http://나 ?, &, / 등은 인코딩하지 않고 그대로 살려둡니다.
• encodeURIComponent() : (본 툴에서 사용하는 방식) URL의 구성 요소 중 특정 '값(Value)'만을 인코딩할 때 사용합니다. ?나 & 같은 예약어까지 전부 인코딩해 버리므로, 쿼리 파라미터에 값을 집어넣을 때는 반드시 이 함수를 사용해야 안전합니다.

3. URL 구조 분석 (Parsing) 이란?

URL 파서(Parser)는 하나의 긴 URL 문자열을 입력받아 프로토콜, 도메인(Host), 경로(Path), 그리고 복잡하게 얽혀 있는 쿼리 파라미터(Query Parameters)를 각각 분리하여 보여주는 기능입니다.
예를 들어, https://example.com:8080/search?keyword=test&page=2#top 이라는 URL을 파싱하면 아래와 같이 분석됩니다.

• Protocol (프로토콜): https:
• Host (호스트 및 포트): example.com:8080
• Pathname (경로): /search
• Search (쿼리 스트링): keyword=test, page=2 (파서 기능을 이용하면 이를 하나씩 리스트업해 줍니다.)
• Hash (프래그먼트): #top (페이지 내 앵커 이동을 의미하며 서버로 전송되지 않습니다.)

본 사이트의 https://www.inven.co.kr/board/wow/5417/332578 버튼을 이용하면, 가독성이 떨어지는 긴 URL을 즉각적으로 해체하여 API 연동 시 어느 파라미터가 누락되었는지 1초 만에 디버깅할 수 있습니다.