프로그래밍124 앵귤러 기초(Angular basic) 20. Service, Injector, 의존성 주입(DI) 이번 포스트에서는 앵귤러 서비스의 작동방식에 대해 알아보겠습니다. 이번 포스트에선 아래의 내용을 다루고 있습니다. 서비스 란? 인젝터(Injector) 의존성 주입(Dependency Injection) 서비스 란 서비스가 정확히 뭘 말하는 걸까요? 서비스는 집중적인 목적을 가진 클래스입니다. 애플리케이션 제작 시 특정 컴포넌트와 별도로 독립적인 기능을 구현하거나 컴포넌트 간에 데이터 또는 로직이 필요한 경우가 있습니다. 또는 데이터 액세스와 같은 외부 상호 작용을 캡슐화가 필요할 수도 있습니다. 이러한 책임을 컴포넌트에서 서비스로 이동함으로써 코드를 보다 쉽게 테스트, 디버그 및 재사용 할 수 있습니다. 서비스 구축에 앞서 앵귤러에서 서비스 및 의존성 주입이 어떻게 작동하는지 알아보도록 하겠습니다. 앵.. 2022. 1. 29. 앵귤러 기초(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. 이전 1 ··· 24 25 26 27 28 29 30 31 다음
