AngularJS 템플릿에서 encodeURIComponent를 호출하는 방법

AngularJS 템플릿에서는 기본적으로 encodeURIComponent 같은 전역 JavaScript 함수를 직접 호출할 수 없습니다. 대신 커스텀 필터(custom filter)를 만들어 이 함수를 감싸면 템플릿 안에서 자유롭게 사용할 수 있습니다.

1. HTML에서 필터 사용하기

먼저 HTML 템플릿에서 파이프(|) 연산자를 사용해 encodeURIComponent 필터를 적용합니다.

<div ng-app = "app">
   <a href = "/foo/{{ 'bar&baz' | encodeURIComponent }}">Demo</a>
</div>

위 예제에서 문자열 'bar&baz'는 필터를 거쳐 URL에 안전한 형태인 bar%26baz로 변환되어 href 속성에 바인딩됩니다.

2. AngularJS 필터 정의하기

다음으로 애플리케이션 모듈에 encodeURIComponent라는 이름의 커스텀 필터를 등록합니다.

var app = angular.module('app', []);
app.filter('encodeURIComponent', function() {
    return window.encodeURIComponent;
});

동작 원리

필터 팩토리 함수는 실제로 값을 처리할 함수를 반환하는 구조입니다. 여기서는 별도의 로직 없이 브라우저 내장 함수인 window.encodeURIComponent를 그대로 반환하므로, 템플릿에서 필터가 적용될 때마다 해당 값이 URL 인코딩됩니다.

encodeURIComponent란?

encodeURIComponent는 URI(Uniform Resource Identifier)의 일부로 사용될 수 있도록 문자열을 인코딩하는 표준 JavaScript 함수입니다. 영문자와 숫자, 그리고 - _ . ! ~ * ' ( )를 제외한 모든 특수문자를 퍼센트 인코딩(%XX 형식)으로 변환합니다. 예를 들어 쿼리 파라미터에 특수문자나 한글이 포함될 경우 반드시 이 함수로 인코딩해야 올바른 URL이 생성됩니다.

참고 사항

• 전체 URL을 인코딩할 때는 encodeURI를 사용하고, URL의 일부분(파라미터 값 등)을 인코딩할 때는 encodeURIComponent를 사용하는 것이 좋습니다.
• 반대로 디코딩이 필요하다면 같은 방식으로 decodeURIComponent 필터를 만들어 사용할 수 있습니다.