[ Ionic3 / 아이오닉3 ] Angular부터 시작하자 6. pipe

[ Ionic3 / 아이오닉3 ] Angular부터 시작하자 6. pipe

pipe를 전에 "| json"를 통해 잠깐 볼일이 있었는데 더 많은 pipe들이 있다

ng doc pipe 하면 아래와 같이 여러 문서들을 볼 수 있다

uppercase를 예를 들면

이렇게 사용하고 결과는 저렇게 나온다

왜? Hello는 대소문자가 섞여있지? 라고 엉뚱한 질문을 하는 사람들도 간혹 있겠지만

3번째 줄을 보면 uppercase는 person.name만 영향 받도록 되어있다

그러면 파이프를 만들어서 진행 하도록 해보자

ng generate pipe PersonNameUpper

로 만들면

app밑에 person-name-upper.pipe.ts가 생성 되었다

app밑에 pipe폴더를 만들고 만들어진 2개의 파일을 이동시키도록 하자

person-name-upper.pipe.ts로 가서

value를 string으로 하고 그 리턴값을 return value.toUpperCase(); 로 아래처럼 변경하고

다시 greeting.component.html로 가서 파이프를 바꿔준다 personNameUpper로

자~ 그러면 | uppercase와 같은 효과를 보이지만 엄청 귀찮고 복잡하게 만든 파이프를 만들었는데

이 짓거리를 왜 한거야? 라는 의문이 들겠지만 이 파이프를 통해서 더 할 수 있는 일이 있다

person-name-upper.pipe.ts를 가서 

return `${value.toUpperCase()}, 반갑습니다!`; 라고 작성을 하면?

위처럼 welcome message를 만들어서 person name upper가 아니라 welcome 이라고 명명하면

person.name | welcome 으로 간단하게 welcome message를 출력 가능하다

자!

이제 아이오닉을 시작할 준비가 되었다

다음시간부터 본격적으로 아이오닉을 가지고 놀아보도록 하겠다