프로그래밍124 앵귤러 기초(Angular basic) 16.커스텀 파이프 (custom pipe) 앵귤러에서 제공해 주는 내장 파이프 사용하면 편리하게 프로퍼티의 값을 변환한 후 뷰에 표시할 수 있습니다. 이번 포스트에서는 나만의 커스텀 파이프를 만들어 보겠습니다. 이번 포스트에선 아래의 내용을 다루고 있습니다. 커스텀 파이프 쓰임새 커스텀 파이프 만드는 법 템플릿에서 파이프 사용법 커스텀 파이프 쓰임새 내장 파이프에 지원하지 않는 변환이 필요할 경우 커스텀파이프를 제작 하여 사용 할 수 있습니다. 아래 개발중인 화면이 있습니다. 영화 제목에 spider-man처럼 대시(-)가 들어간 문자열이 존재 하네요. 모든 영화 제목에 포함된 대시(-)를 빈 공백 문자로 표시하라는 요구사항을 받았다고 가정해 봅시다. 이런 경우 커스텀파이프를 제작하여 이용하면 편리 합니다. 커스텀 파이프 만드는 법 커스텀 파이프.. 2022. 1. 26. 앵귤러 기초(Angular basic) 15.생명주기(lifecycle), hook 앵귤러 생명주기(lifecycle)와 훅(hook)에 대해 알아보겠습니다. 이번 포스트에선 아래의 내용을 다루고 있습니다. 생명주기(lifecycle) OnInit OnChanges OnDestroy 구성 요소에는 Angular에서 관리하는 라이프사이클이 있습니다. Angular는 1.컴포넌트를 생성하고 2.렌더링하고 3.하위 컴포넌트를 만들고 렌더링하며 4.데이터 바인딩 속성이 변경될 때 변경사항을 처리한 다음 5.DOM에서 해당 템플릿을 제거하기 전에 삭제합니다. Angular는 이 라이프사이클을 활용하고 필요에 따라 작업을 수행하는 데 사용할 수 있는 일련의 라이프사이클 훅(hook)을 제공합니다. Lifecycle hook 라이프 사이클 hook는 Angular에서 제공하는 인터페이스입니다. (인.. 2022. 1. 25. 앵귤러 기초(Angular basic) 14.컴포넌트 스타일 캡슐화 컴포넌트의 스타일은 어떻게 관리해야 될까요? 컴포넌트 스타일의 캡슐화에 대해 알아보겠습니다. 이번 포스트에선 아래의 내용을 다루고 있습니다. 컴포넌트의 스타일링 컴포넌트 스타일 캡슐화 컴포넌트의 스타일링 컴포넌트에 대한 템플릿을 작성할 때 해당 템플릿의 스타일이 필요한 경우가 많이 있습니다. 예를 들어 네비게이션 컴포넌트를 작성할 경우 li 또는 div 요소 스타일링이 필요할 수 있습니다. 스타일 필요로 하는 컴포넌트를 다른 컴포넌트 내에 중첩시킬 때(부모 컴포넌트에서 자식 컴포넌트를 쓰는 경우), 우리는 컴포넌트의 고유한 스타일을 가져올 수 있는 방법이 필요합니다. 한 가지 선택사항은 템플릿의 HTML에서 직접 스타일을 정의하는 것이지만, 이러한 스타일을 보고 재사용하고 유지 관리하는 것은 더 어렵습.. 2022. 1. 24. 앵귤러 기초(Angular basic) 13.인터페이스(interface) Interface는 앵귤러 고유의 기능은 아니지만 앵귤러 애플리케이션을 만드는데 있어서 필수 불가결한 중요한 기능입니다. 잠시 interface에 대해 알아보고, 앵귤러 애플리케이션에 적용해 보겠습니다. 이번 포스트에선 아래의 내용을 다루고 있습니다. 타입 인터페이스란 인터페이스를 쓰는 두 가지 사용법 타입 TypeScript사용의 이점 중 하나는 강력한 타입(type)을 갖는 것 입니다. 모든 프로퍼티에는 타입이 있고 모든 메서드에는 반환 타입이 있으며, 모든 메서드 매개 변수 에는 타입이 있습니다. 타입은 더 나은 구문 검사 및 도구를 통해 오류를 최소화 하는데 도움을 줍니다. 그러나 경우에 따라 아래 movies배열과 같이 사전에 정의된 타입이 없는 프로퍼티 혹은 메서드가 있습니다. 이런 경우 mo.. 2022. 1. 23. 이전 1 ··· 25 26 27 28 29 30 31 다음
