Angular 에서는 3종류의 directive가 있다 : 1. Componenets - template을 지니고 있는 directive (가장 흔함) 2. Structural directives - DOM 엘리먼트를 추가하거나 지우면서 DOM의 레이아웃을 바꿈 (ex. NgFor, NgIf) 3. Attribute directives - 엘리먼트, 컴포넌트, 다른 directive의 형태나 동작을 바꿈 (엘리먼트의 attribute로 사용됨) 우리는 attribute directive를 만들어 해당 directive selector로 Input/Output 이벤트를 바인딩 시킬 것이다. CLI Command : ng generate directive custom-enter import { Directi..

개발자가 component 안의 html에 등록한 template들을 화면에 보여주는 게 기본이지만, 원하는 특정 시점에서 동적으로 컴포넌트를 생성해서 화면에 변화를 줘야할 때가 있다. 특정 시점에 New Container (div) 를 만들어서 그 안에 그래프가 만들어져있는 New Component를 넣을 것이다. ApplicationRef를 사용하여 New Component를 어떻게 동적으로 생성하는지 알아보자. ApplicationRef ? A reference to an Angular application running on a page. interface ApplicationRef { componentTypes: Type[] components: ComponentRef[] isStable: Ob..

Angular의 기본 양방향 바인딩은 '[()]'으로 구현한다. 이를 ngModel이라는 디렉티브를 이용하여 아래와 같이 html과 ts를 양방향으로 묶을 수 있다. *ngModel를 사용하기 위해선 FormsModule를 import해야한다 : import { FormsModule } from '@angular/forms'; @NgModule({ imports: [ FormsModule ] }) 그리고 html에서 input에 이런식으로 ngModel을 사용한다 : 이렇게 하면 html의 input값과 ts의 myText가 바인딩되어 input값이 바뀌면 myText값도 바뀐다. 하지만 이는 엄밀히 따지면 양방향 바인딩이 아니라 내부적으로 프로퍼티 바인딩 & 이벤트 바인딩을 사용한 것이다. 즉, [(n..

javax.mail mail 1.4.7 org.springframework spring-context-support ${org.springframework-version} → gmail 활용 smtp true true true MailSender — SimpleMailMessage (메일제목, 단순 텍스트 내용) package com.bitcamp.mvc; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.mail.MailSender; import org.springframework.mail.SimpleMailMessage; import org.springframework.stereotype.C..

사용목적 = 공통적으로 처리할 업무 진행 권한 체크, 로그인 관리, 페이지 인코딩 등의 업무를 공통적으로 여러 곳에서 처리해야 하는 상황이라면, 같은 코드를 중복해서 사용하기보다는 공통 프로세스로 떼어내어 따로 개발하는 게 더 효율적이다. filter와 interceptor 모두 '공통'적으로 어떠한 로직을 수행하는것인데, 실행 흐름을 보면 (1) filter - (2) interceptor 이렇게 있다. 따라서 요청이 들어오면 가장 먼저 거치는 부분은 filter, 그다음엔 interceptor이다. Filter - 요청&응답 거른 뒤 정제하는 역할 - 스프링 콘텍스트 외부에 존재 -> 스트링과 무관한 자원에 대해 동작함 - 앞단에서 요청 내용을 변경하거나 체크할 수 있음 - 자원처리가 끝난 후, 응답..

Angular로 검색 기능의 input box를 개발하려고 한다. 그냥 단순한 input box라고 생각할 수도 있겠지만, 여러 번의 불필요한 검색 호출을 막아 좀 더 효율적인 검색 기능을 만들기로 한다. 이를 위해 나는RxJS의 debounceTime + distinctUntilChanged 조합을 사용하기로 했다. 내가 원하는 검색 input은 대충 위와 같은 모습이다. 크게 2가지 조건이 있는데, 1. 시간을 정해서 지정된 시간 안에 여러 번 검색 버튼을 연속으로 눌러도 한 번의 결과값만 검색되도록 한다. 2. 직전의 검색어와 현재 검색한 검색어를 비교하여 같은 검색어가 두 번 검색되지 않도록 한다. debounceTime과 distinctUntilChanged을 아주 깔끔하게 정리해놓은 포스트가 ..