[TDL] 9/6/22

프로젝트에서 vue filter를 추가하라고 코드리뷰를 받았다.
comma 함수를 유틸 함수 안에서 사용하고 있었는데, vue 에서 지원하는 걸로 사용하는 것이 좋다는 피드백을 받았다.
vue filter는 vue3에서는 권장하지 않고 computed로 사용하는 걸로 권장하고 있다는 사실도 알았다.
현재 프로젝트는 vue2 기반으로 사용하고 있어서, filter 부분을 사용해 보기로 했다.
Vue에서 특정 데이터를 가공하여 표혈할 수 있는 filter라는 기능을 제공한다.
나는 이 기능이 computed와 비슷하다고 생각했다. 하지만 filter는 전역에서도 사용가능하다.

사용법

중괄호 보간법, v-bind 표현법에서 사용할 수 있다.
파이프 (|) 기호와 함께 사용한다.

//**중괄호 보간법**//
{{number | commas}}

//**v-bind 표현법**//
<div :id ="rawId | formatId"></div>

전역 필터 정의

Vue.filter('commas', (number: string | number) => {
  const num = number.toString().split('.');
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
});

필터 체이닝
필터 함수의 첫번째 전달인자는 자바스크립트의 표현식의 값이다.

{{ phoneNumber | filterA | filterB }}