BaeBox

Angular 초심자인 나로서 앵귤러를 활용하면서 두번째로 크게 막혔던 것은 컴포넌트를 실행중에 동적으로 생성하는 것이었다. 분명 이런 기능은 제공할거라는걸 알긴 하는데 그걸 뭐라고 부르는지 몰라서 고생했다 사용법은 간단한다. 하단 링크에 있는 공식문서를 간단히 따라하면 된다. 요는, ComponentFactoryResolver 클래스가 제공하는 resolveComponentFactory 함수를 이용하는 것이다. ComponentFactoryResolver 의 resolveComponentFactory 함수가 컴포넌트를 resolve 하고 createComponent 함수를 이용하여 컴포넌트를 생성한다. 생성까지는 어렵지 않았을거라고 생각한다. 여기서부터는 굳이 안 봐도 상관은 없지만, 개인적으로 흥미로..

Angular 내 컴포넌트간의 데이터 공유. 생각컨대, 나같은 초심자가 처음으로 막히는 부분이 아닐까 한다. 인터넷을 조금 뒤적거리다보니 여러 방법이 나오는데 크게 아래 세 가지 방법으로 귀결되더라. @Input @Output Bidirectional-Service (양방향 서비스) 위의 두 가지 방법인 @Input 태그와 @Output 태그를 이용하면, 부모-자식(parent-child)의 관계에 있는 컴포넌트끼리 데이터 공유가 가능하고, Bidirectional-Service, 쉽게 말해 중간다리인데, 이 방법을 이용하면 굳이 부모-자식 관계에 있지 않은 컴포넌트 끼리도 데이터 공유가 가능하다. 개인적으로는 이 방법이 제일 나은 것 같다고 생각한다. 내가 구구절절하게 설명할 필요 없이 아래 링크의 예..

컴포넌트 : 화면의 일부를 조작하는 구성 요소. 컴포넌트 메타데이터 : 클래스를 컴포넌트로 등록하는 메타데이터 selector : 컴포넌트 인스턴스가 DOM 트리의 어떤 자리에 위치할지 CSS 셀렉터로 지정. templateUrl : 컴포넌트 HTML 템플릿을 외부 파일에 정의할 때, 이 템플릿 파일의 위치를 지정. styleUrls : css 를 외부 파일에 정의할 때 , css 파일의 위치를 지정. providers: 컴포넌트가 생성될 때 의존성으로 주입되는 서비스의 프로바이더를 지정. 위의 예시 이미지에는 없음 provider는 module 에서도 선언 가능하며 module에서 선언했다면 그 범위는 모듈 내로, component 에서 지정했다면 해당 컴포넌트가 생성될 때마다 서비스 인스턴스도 새로이..