encodeURI(): URL 인코딩 쉽게 이해하기

자바스크립트 encodeURI(): URL 인코딩 쉽게 이해하기

안녕하세요, 테크 좋아하는 친구들! 오늘은 자바스크립트에서 URL을 다룰 때 꼭 알아야 할 encodeURI 설명을 해보려고 해요. 자바스크립트 URL 인코딩은 웹 개발에서 특수 문자를 안전하게 처리하는 데 필수적인 기술이죠. encodeURI() 함수가 뭔지, 어떻게 쓰는지, 그리고 실전에서 바로 써볼 수 있는 encodeURI 예제까지 함께 알아봅시다. URL 때문에 골치 아팠던 적 있다면 이 글이 딱이에요!

encodeURI()란 무엇일까?

encodeURI()는 자바스크립트에서 URL을 안전하게 만들기 위해 사용하는 함수예요. URL에는 특수 문자(예: 공백, 한글, ?, &)가 포함될 수 있는데, 이걸 그대로 쓰면 브라우저나 서버가 제대로 이해하지 못할 때가 있죠. 그래서 자바스크립트 URL 인코딩으로 이런 문자들을 퍼센트 인코딩(예: %20) 형태로 바꿔줍니다.

이 함수는 전체 URL을 인코딩하는데, URL 구조를 유지하는 데 필요한 문자(예: ://, /, ?, &)는 그대로 두고, 데이터 부분만 변환해요. 비슷한 함수인 encodeURIComponent()와 다르게, URL 구성 요소는 건드리지 않는 점이 특징이에요.

궁금증: encodeURI()는 URI 전체를, encodeURIComponent()는 특정 파라미터만 인코딩해요!

encodeURI()의 동작 원리

encodeURI 설명을 좀 더 깊이 해보면, 이 함수는 UTF-8로 문자를 인코딩한 뒤 특수 문자를 퍼센트(%)와 16진수로 표현합니다. 예를 들어, 공백은 %20, 한글 "가"는 %EA%B0%80로 바뀌어요. 이렇게 하면 URL이 깨지지 않고 안전하게 전달되죠.

인코딩하지 않는 문자들: A-Z, a-z, 0-9, -, _, ., !, ~, *, ', (, ), 그리고 URL 구조 문자(: / ? & 등). 나머지는 다 인코딩돼요.

encodeURI() 예제 소스: 실전에서 써보기

이제 encodeURI 예제를 통해 직접 써보죠. 아래는 간단한 예제 소스예요.

<script>
    // 기본 URL 인코딩
    const url = "https://example.com/안녕하세요?query=공백 포함";
    const encoded = encodeURI(url);
    console.log(encoded);
    // 출력: https://example.com/%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94?query=%EA%B3%B5%EB%B0%B1%20%ED%8F%AC%ED%95%A8

    // 한글과 특수 문자 포함된 URL
    const customUrl = "http://myblog.com/자바스크립트 배우기#1!";
    const encodedCustom = encodeURI(customUrl);
    console.log(encodedCustom);
    // 출력: http://myblog.com/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%20%EB%B0%B0%EC%9A%B0%EA%B8%B0#1!
</script>
    

위 예제에서 보듯, encodeURI()는 한글과 공백을 인코딩하면서도 URL의 구조(http://, ?, # 등)는 유지해요. 이렇게 하면 서버나 브라우저가 URL을 문제없이 처리할 수 있죠.

encodeURI()와 encodeURIComponent() 비교

encodeURI 설명에서 꼭 짚고 넘어가야 할 건 encodeURIComponent()와의 차이예요. 아래 예제로 비교해볼게요.

<script>
    const urlPart = "안녕하세요?query=테스트";
    console.log(encodeURI(urlPart));
    // 출력: 안녕하세요?query=%ED%85%8C%EC%8A%A4%ED%8A%B8
    console.log(encodeURIComponent(urlPart));
    // 출력: %EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94%3Fquery%3D%ED%85%8C%EC%8A%A4%ED%8A%B8
</script>
    

encodeURI()는 ?를 그대로 두지만, encodeURIComponent()는 모든 특수 문자를 인코딩해요. 그러니 전체 URL은 encodeURI(), 파라미터만 다룰 때는 encodeURIComponent()를 쓰는 게 맞아요.

실제 활용 사례

자바스크립트 URL 인코딩은 웹 개발에서 자주 써요. 예를 들어, 검색창에 입력한 값을 URL로 넘길 때, 한글이나 특수 문자가 깨지지 않게 encodeURI()로 처리하죠. 또, API 호출 시 쿼리 문자열을 안전하게 만들 때도 유용해요. 웹사이트에서 다국어 URL을 지원하려면 필수 기술이에요.

팁: decodeURI()로 인코딩된 URL을 다시 원래대로 풀 수 있어요!

주의할 점

encodeURI()는 완벽하지 않아요. URL이 이미 인코딩된 상태면 중복 인코딩될 수 있고, 보안 관련 문자(예: <, >)는 인코딩 안 되니 주의해야 해요. 이런 경우 추가로 escaping 처리가 필요할 수 있죠.

더 궁금하다면?

encodeURI 설명과 예제가 도움이 되셨길 바라요! 더 많은 자바스크립트 팁이나 웹 개발 이야기가 궁금하다면 제 블로그 Wolf Coding에 놀러 오세요. 다른 개발 팁 이나 다른 테크 팁도 많아서 재밌게 읽으실 거예요! encodeURI 예제로 URL 인코딩 마스터해보세요. 질문 있으면 댓글로 남겨주세요!