목차: 웹 앱 개발 로드맵

제5회：뉴스 피드의 날짜 포맷을 변환한다(파이프)

이번에는 파이프라는 것을 사용하여 뉴스 피드에 표시되는 날짜와 시간을 원하는 형식으로 변환합니다.

뉴스피드 날짜 변환

파이프란?

"|"을 파이프라고합니다.
왼쪽 프로그램의 결과를 오른쪽 프로그램에 전달하는 역할입니다.
명령행에서 사용되는 파이프와 같은 의미가 됩니다.

$ ls | grep *.ts

파이프 만들기

다음 명령을 실행하여 파이프를 만듭니다.

$ ng g pipe pipes/date-to-string
CREATE src/app/pipes/date-to-string.pipe.spec.ts (213 bytes)
CREATE src/app/pipes/date-to-string.pipe.ts (229 bytes)
UPDATE src/app/app.module.ts (836 bytes)

모듈 변경 확인

app.module.ts에 다음 수정 사항이 있는지 확인합니다.
이렇게 하면 만든 파이프와 앱이 연결됩니다.

・・・
import { DateToStringPipe } from './pipes/date-to-string.pipe';
・・・
  declarations: [
・・・
    DateToStringPipe,
  ],
・・・

파이프의 기재 내용에 대해서

만든 date-to-string.pipe.ts를 확인합니다.
@Pipe 의 name에 기재되어 있는 이름이 html에 기재할 때의 명칭이 됩니다.
transform 메소드는, 파이프의 왼쪽으로부터 얻은 값을 파라미터로서 취득해,
반환값으로 반환한 값이 화면에 표시됩니다.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'dateToString'
})
export class DateToStringPipe implements PipeTransform {

  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }

}

컴포넌트에서 호출해보기

구성 요소에서 호출해 봅니다.
newsfeeds.component.html을 아래와 같이 수정하십시오.
파이프 "|"의 왼쪽에서 오른쪽으로 값이 전달되고 오른쪽 dateToString의 처리 결과가 표시된다고 생각하십시오.
<p class="createdAt">{{newsfeed.createdAt | dateToString}}</p>

아직 파이프 처리를 아무 것도 사용자 지정하지 않았기 때문에 dateToString은 아무 것도 값을 반환하지 않습니다.
따라서 뉴스 피드의 날짜와 시간은 아무 것도 표시되지 않습니다.

파이프 처리 사용자 정의

파이프 처리를 사용자 정의해 봅니다.
date-to-string.pipe.ts의 처리를 아래와 같이 수정합니다.

export class DateToStringPipe implements PipeTransform {

  transform(date: Date): string {
      return date.toLocaleString();
  }

파이프의 사용법을 알기 쉽게하기 위해,transform() 메소드의 파라미터를 value: unknown 에서 date: Date 로,
반환값의 형태를 uknown 로부터 string 로 변경하고 있습니다.date 는 파라미터의 변수명, Date 는 파라미터의 형태입니다.

이제 원래 날짜와 시간이 뉴스 피드에 표시됩니다.

도전

이대로는 재미 없기 때문에, transform()를 커스터마이즈 해, 이하의 사양의 동작이 되도록 수정해 봅시다.


(현재 일시 - date)의 값이
동작


10분 미만일 때
"지금 지금"보기

1시간 미만일 때
"x분 전"표시

1일 미만일 때
"x시간 전"표시

하루 이상일 때
"x일 전"표시

마지막으로

이번에는 파이프를 배웠습니다. 다음 번에는 백엔드 만들기로 들어갑니다.
이번에 개발한 소스 코드는 GitHub에 들어 있습니다.