JavaScript에서 URL 인코딩 — encodeURI, encodeURIComponent 및 모범 사례

JavaScript는 URL 인코딩을 위한 두 가지 내장 함수를 제공합니다:

encodeURIComponent()

다음 문자를 제외한 모든 문자를 인코딩합니다: A-Z a-z 0-9 - _ . ! ~ * ' ( )

const name = 'John Doe'
const query = '?name=' + encodeURIComponent(name)
// ?name=John%20Doe

개별 쿼리 매개변수 값, 경로 세그먼트 또는 URL의 일부가 되는 모든 데이터를 인코딩할 때 사용하세요.

encodeURI()

위의 문자 외에도 예약된 URL 문자를 제외한 모든 문자를 인코딩합니다: : / ? # [ ] @ ! $ & ' ( ) * + , ; =

const url = 'https://example.com/search?q=hello world'
const encoded = encodeURI(url)
// https://example.com/search?q=hello%20world

완전한 URL 문자열을 인코딩할 때 사용하세요.

일반적인 함정

// 잘못된 방법 — URL 구조가 깨집니다
encodeURIComponent('https://example.com/page')
// https%3A%2F%2Fexample.com%2Fpage

// 올바른 방법 — 구조가 보존됩니다
encodeURI('https://example.com/page')
// https://example.com/page

저희 URL 인코더/디코더 도구에서 이 함수들을 실시간으로 테스트해 보세요.