angular21 앵귤러 기초(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) 16.커스텀 파이프 (custom pipe) 앵귤러에서 제공해 주는 내장 파이프 사용하면 편리하게 프로퍼티의 값을 변환한 후 뷰에 표시할 수 있습니다. 이번 포스트에서는 나만의 커스텀 파이프를 만들어 보겠습니다. 이번 포스트에선 아래의 내용을 다루고 있습니다. 커스텀 파이프 쓰임새 커스텀 파이프 만드는 법 템플릿에서 파이프 사용법 커스텀 파이프 쓰임새 내장 파이프에 지원하지 않는 변환이 필요할 경우 커스텀파이프를 제작 하여 사용 할 수 있습니다. 아래 개발중인 화면이 있습니다. 영화 제목에 spider-man처럼 대시(-)가 들어간 문자열이 존재 하네요. 모든 영화 제목에 포함된 대시(-)를 빈 공백 문자로 표시하라는 요구사항을 받았다고 가정해 봅시다. 이런 경우 커스텀파이프를 제작하여 이용하면 편리 합니다. 커스텀 파이프 만드는 법 커스텀 파이프.. 2022. 1. 26. 앵귤러 기초(Angular basic) 14.컴포넌트 스타일 캡슐화 컴포넌트의 스타일은 어떻게 관리해야 될까요? 컴포넌트 스타일의 캡슐화에 대해 알아보겠습니다. 이번 포스트에선 아래의 내용을 다루고 있습니다. 컴포넌트의 스타일링 컴포넌트 스타일 캡슐화 컴포넌트의 스타일링 컴포넌트에 대한 템플릿을 작성할 때 해당 템플릿의 스타일이 필요한 경우가 많이 있습니다. 예를 들어 네비게이션 컴포넌트를 작성할 경우 li 또는 div 요소 스타일링이 필요할 수 있습니다. 스타일 필요로 하는 컴포넌트를 다른 컴포넌트 내에 중첩시킬 때(부모 컴포넌트에서 자식 컴포넌트를 쓰는 경우), 우리는 컴포넌트의 고유한 스타일을 가져올 수 있는 방법이 필요합니다. 한 가지 선택사항은 템플릿의 HTML에서 직접 스타일을 정의하는 것이지만, 이러한 스타일을 보고 재사용하고 유지 관리하는 것은 더 어렵습.. 2022. 1. 24. 이전 1 2 3 4 5 6 다음
