[Vue.js] 날짜 포맷 변환 (yyyyMMdd)

요즘 Vue를 공부하면서 간단한 게시판을 만드는 중인데, 아주 쉽고 재미지다.
근데 하다가 보니 날짜가 DateTime 타입 그대로 넘어오길래 filter 써서 바꿔야지 했다.
엥? 근데 date format에 대한 기본적인 필터도 제공을 해주지 않는것 같았다.
AngularJS 같은 경우 몇몇 자주쓰이는 포맷은 지원을 해줬던 것 같은데...

그래서 검색을 해보니 다들 별도의 라이브러리를 다운받아서 처리하는 듯 했다 😰 (momentJS 같은...)

그거 설치하고 넣고 하는게 더 귀찮을거같음...
그래서 별로 오래걸리지도 않는데 걍 만들기로 했다.

우선 필터 설정부터

우선 컴포넌트 설정에서 로컬 필터부터 설정해주자.
왕간딴.

var vm = new Vue({
  
	el : '#example',
  
  	data : {
      		testObject : {
                         
              	}    
    	},
  
  	// 커스텀 필터 설정
  	filters : {
      		// filter로 쓸 filter ID 지정
    		yyyyMMdd : function(value){ //  yyyy MM dd 형태로 만들어줄거기 때문에 이렇게 이름을 지었음
            
            	}
    	}
})

Date Format 변환 함수 구현

그런 다음에 내가 쓰기로 했던 Filter ID에 Date Format 변환 로직을 작성해주면 된다.

filters : {  
        // filter로 쓸 filter ID 지정
	yyyyMMdd : function(value){ 
          // 들어오는 value 값이 공백이면 그냥 공백으로 돌려줌
          if(value == '') return '';
      
          // 현재 Date 혹은 DateTime 데이터를 javaScript date 타입화
          var js_date = new Date(value);

          // 연도, 월, 일 추출
          var year = js_date.getFullYear();
          var month = js_date.getMonth() + 1;
          var day = js_date.getDate();

          // 월, 일의 경우 한자리 수 값이 있기 때문에 공백에 0 처리
          if(month < 10){
          	month = '0' + month;
          }

          if(day < 10){
          	day = '0' + day;
          }

          // 최종 포맷 (ex - '2021-10-08')
          return year + '-' + month + '-' + day;
	}
}

위의 방식을 기본으로 두고 대쉬(yyyy-MM-dd)나 점으로(yyyy.MM.dd) 커스텀해서 쓰면 된다.
HH:mm:ss 같은 시간포맷도 만들면 그만

HTML에서 사용

위와 같이 만들어 주면 쓰는 것은 매우 간단하다. {{ value | filter_ID }} 의 형태로 써주면 된다.
아래는 간단한 예시

<tr v-for="board in board_list">
	<td>
          <a>{{board.TITLE}}</a>
	</td>
  	......
  	......
	<td>{{board.REG_DATE | yyyyMMdd}}</td>
</tr>

결론

💁‍♂️ JS 고자라 코드가 불편하실 수 있습니다.

• 그냥 간단하게 연습이나 공부하실 때 쓱 복사해서 쓰시면 좋겠다.
• JS 연습 겸 이 것 저 것 만들어 보자.이를테면 돈(10,000)이나, 첫글자 대문자, 공백일 경우 '-'를 넣는 등의...