이게 뭔가요?

URL에는 공백, 한글, &, ?, = 같은 문자를 그대로 넣을 수 없습니다. URL 인코딩(퍼센트 인코딩)은 이런 문자를 %XX 형태의 안전한 표현으로 바꿉니다. 이 도구는 문자열을 인코딩하거나 다시 디코딩하며, 컴포넌트(쿼리 값 하나)와 전체 URL 두 가지 범위를 구분해 처리합니다. 컴포넌트 모드는 /·?·& 까지 모두 인코딩하고, 전체 URL 모드는 이런 구조 문자를 보존합니다.

언제 쓰나요?

검색어나 한글이 들어간 쿼리 파라미터를 직접 만들 때, 로그에 남은 %EA%B0%80 같은 인코딩된 값을 사람이 읽으려고 되돌릴 때, 또는 리다이렉트 URL을 다른 URL의 쿼리 값으로 중첩해 넣을 때 씁니다.

실무에서 자주 틀리는 점

encodeURI vs encodeURIComponent 혼동. 쿼리 “값”에는 encodeURIComponent를 써야 합니다. encodeURI로 값을 인코딩하면 &·= 가 살아남아 파라미터가 깨집니다. 이 도구의 “컴포넌트/전체 URL” 선택이 이 둘에 대응합니다.
이중 인코딩. 이미 인코딩된 문자열을 한 번 더 인코딩하면 % 가 %25 로 바뀌어 값이 망가집니다.
공백의 + vs %20. 폼 전송(application/x-www-form-urlencoded)에서는 공백이 + 지만, 퍼센트 인코딩에서는 %20 입니다. 문맥에 따라 다릅니다.

실무에서 — 로그인 후 원래 페이지로 돌려보내는 redirect 파라미터에 이미 인코딩된 URL을 또 인코딩해서 넣는 바람에, %2F가 %252F로 바뀌어 리다이렉트가 깨진 적이 있다. 한참을 헤매다 값을 디코더에 넣어보고서야 이중 인코딩인 걸 알았다. 그 뒤로 URL을 쿼리 값에 넣을 땐 encodeURIComponent 한 번만, 그리고 넣기 전에 이미 인코딩돼 있진 않은지부터 확인한다.