앵귤러28 앵귤러 기초(Angular basic) 19. 컴포넌트간 데이터 통신 애플리케이션을 작성할 때는 중첩된 컴포넌트 요소는 부모 컴포넌트와 통신 해야 하는 경우가 많습니다. 컴포넌트 간의 통신에 대해 알아보겠습니다. 이번 포스트에선 아래의 내용을 다루고 있습니다. 컴포넌트 간의 통신 @input 사용법 @output 사용법 컴포넌트간의 통신 컴포넌트 간에는 데이터를 주고받는 통신이 필요합니다. 부모 컴포넌트에서는 자식 컴포넌트에서 필요로 하는 데이터를 건네주어야 하고, 자식 컴포넌트에선 특정 처리된 결과 값을 다시 부모 컴포넌트에 보내줘서 일련의 처리가 이뤄지게 해야 합니다. 앵귤러에서는 중첩된 컴포넌트(자식 컴포넌트)는 input 프로퍼티를 사용하여 부모 컴포넌트에서 정보 수신이 가능하고, output프로퍼티를 사용하여 데이터의 발신이 가능합니다. 차근차근 input, ou.. 2022. 1. 28. 앵귤러 기초(Angular basic) 18.컴포넌트 중첩(Nested Component) 컴포넌트는 중첩해서 사용이 가능합니다. 컴포넌트를 중첩해서 사용해보고 컴포넌트간의 통신이 어떻게 이뤄지는지 알아보겠습니다. 중첩 컴포넌트 중첩된 컴포넌트를 시각적으로 표현해 보았습니다. 상위 컴포넌트에서 하위 컴포넌트를 두개(sub1, sub2)를 사용하고 있습니다. 외부 컴포넌트를 컨테이너 또는 상위 구성 요소라고 하며 내부 컴포넌트를 중첩 또는 하위 구성 요소라고 합니다. 또 다른 표현으론 부모 컴포넌트와, 자식 컴포넌트로 불리기도 합니다. 이제 실제 코드에서 중첩된 구조의 컴포넌트를 살펴보겠습니다. 컴포넌트 분리하기 아래 화면을 보면 테이블에서 영화의 평점을 숫자로 표시하고 있습니다. 여기 숫자로 표시되는 평점을 별 5개의 등급 표현으로 시각적으로 바꾸고 싶습니다. 별과 같은 시각적 표현을 사용하여.. 2022. 1. 27. 앵귤러 기초(Angular basic) 17.getter, setter(게터, 세터) 앵귤러 애플리케이션을 만들때 자주 쓰이는 getter, setter에 대해 알아보겠습니다. 그리고 getter, setter를 활용한 필터 기능을 만들어 보도록 하겠습니다. 이번 포스트에선 아래의 내용을 다루고 있습니다. 타입스크립트에서 속성을 정의하는 두 가지 방법 앵귤러에서 getter, setter 사용하기 테이블 필터링 처리 만들기 타입스크립트에서 속성을 정의하는 두 가지 방법 자바스크립트와 TypeScript에서는 클래스에 속성(프로퍼티)을 정의하는 두 가지 방법이 있습니다. 첫 번째는 지금까지 해왔던 것처럼 프로퍼티에 대해 간단히 변수를 선언 할 수 있습니다. 우리는 이 변수를 통해서 직접 값을 가져오거나 값을 변경 할 수 있습니다. 두 번째는 프로퍼티를 정의하는 또 다른 방법은 자바스크립트 .. 2022. 1. 26. 앵귤러 기초(Angular basic) 16.커스텀 파이프 (custom pipe) 앵귤러에서 제공해 주는 내장 파이프 사용하면 편리하게 프로퍼티의 값을 변환한 후 뷰에 표시할 수 있습니다. 이번 포스트에서는 나만의 커스텀 파이프를 만들어 보겠습니다. 이번 포스트에선 아래의 내용을 다루고 있습니다. 커스텀 파이프 쓰임새 커스텀 파이프 만드는 법 템플릿에서 파이프 사용법 커스텀 파이프 쓰임새 내장 파이프에 지원하지 않는 변환이 필요할 경우 커스텀파이프를 제작 하여 사용 할 수 있습니다. 아래 개발중인 화면이 있습니다. 영화 제목에 spider-man처럼 대시(-)가 들어간 문자열이 존재 하네요. 모든 영화 제목에 포함된 대시(-)를 빈 공백 문자로 표시하라는 요구사항을 받았다고 가정해 봅시다. 이런 경우 커스텀파이프를 제작하여 이용하면 편리 합니다. 커스텀 파이프 만드는 법 커스텀 파이프.. 2022. 1. 26. 이전 1 2 3 4 5 6 7 다음
