URL 인코딩: 개발자를 위한 스위스 군용 칼, 아마도 잘못 사용하고 있을 겁니다

Source: Dev.to

TL;DR

encodeURI() = “전체 URL을 인코딩하고 있어요” → / ? & # 같은 구조 문자들은 그대로 둠

encodeURIComponent() = “데이터 한 조각만 인코딩하고 있어요” → A-Z a-z 0-9 - _ . ! ~ * ' ( ) 를 제외한 모든 것을 인코딩

When Things Go Wrong

지난 주에 결제 게이트웨이에서 500 오류가 발생해서 한 시간 동안 디버깅했어요. 원인은? # 문자가 들어 있는 쿼리 파라미터에 encodeURI()를 사용했기 때문이었죠. 브라우저가 # 이후를 프래그먼트 식별자로 해석해서 서버에 전송하지 않았어요. encodeURIComponent()를 사용했어야 했습니다.

The 3 Rules I Now Live By

• 쿼리 문자열 값 → 항상 encodeURIComponent() 사용. 예외 없음.
• 전체 URL → encodeURI() 사용, 단 구성 요소에 특수 문자가 없다는 것이 확실할 때만.
• 확신이 서지 않을 때 → encodeURIComponent() 사용. 최악의 경우: 너무 많이 인코딩함. 최상의 경우: 버그를 피함.

A Free Tool for When You’re Lazy

가끔은 200자 정도 되는 복잡한 URL을 붙여넣고 결과가 어떻게 나오는지 보고 싶을 때가 있어요—특히 개발자 도구를 열고 싶지 않을 때 말이죠. 저는 브라우저에서 완전히 실행되는 무료 URL 인코더/디코더를 만들었어요. 업로드도, 광고도, 회원가입도 필요 없고, 그냥 붙여넣고 인코딩하면 됩니다.