CheolCheol Dev Note

Angular든 다른 언어이든 파라미터를 보내는 방식들이 있다. 예를들어 1) http://localhost:8080/mydata/3 2) http://localhost:8080/mydata?sq=3 두가지의 url이 있다고 가정하면 1번의 경우 path로 data를 분류하는 방법이고 2번의 경우에는 key와 value의 형태로 데이터를 분류하는 방식이다. Java의 Spring은 @PathVariable과 @RequestParam의 차이라 할까? 1번의 경우 저번에 작성한 글을 참조하면 되고 이번에는 2번의 경우를 작성할 것이다. 2번의 경우를 Angular에서는 Query Parameter라고 불리는는데 위에 언급한 것처럼 라우터에 데이터를 보낼 때 path의 경로가 아닌 key 값으로 데이터를 보내..

Angular의 view의 전환으로 사용하는 router가 있다. 그리고 이 view의 접근제어를 할 수 있는 기능이 있는데 라우터 가드(Router Guard)가 있다. 라우터 guard에는 다음과 같은 인터페이스 들이 있다. CanActivate to mediate navigation to a route. CanActivateChild to mediate navigation to a child route.CanDeactivate to mediate navigation away from the current route. # 라우터의 접근권한을 검사Resolve to perform route data retrieval before route activation. # 라우터 변경시 호출되는 ㅂ라우트CanL..

사용자는 정확히 입력하였지만, 마지막글자가 반영되지 않는 것을 확인할수 있었습니다. 한글과 같은 조합형 문자의 경우 일반적으로 글자를 입력 후 스페이스나 엔터 등을 통하여 문자 입력을 완료한 시점에 compositioned라는 이벤트가 발생하고, 이 이벤트에 따라 Angular는 양방향 바인딩을 처리합니다. 작성중인 문자를 모두 바인딩하기 위해서는 Angular에서 제공되는 COMPOSITION_BUFFER_MODE를 변경합니다. 프로젝트 전체에서 일괄반영하기 위해 app.module.ts 에서 valueProvider를 사용하여 주입시켜 주면 됩니다. import {CUSTOM_ELEMENTS_SCHEMA, NgModule, NO_ERRORS_SCHEMA} from '@angular/core'; imp..

string안에html tag가있고그것을화면에tag를적용하고싶으면 [innerHTML] 속성을사용하면된다. ex) Angular가innerHTML 속성을 이용해 출력한 결과는 불완전하다.왜냐하면 Angular가 이들 요소를 잠재적인 위험 요소로 판단해 새니티제이션을 적용했기 때문이다. 새티니제이션은데이터내의잠재된위험요소를제거하는기능이다. ! angular 에서 팝업 및 데이터가 수시로 바뀌는 innerHTMLdmf 사용하는 경우에 id 및 name에 대한 security에대한 경고가 콘솔에 나온다. 그럴경우 새티니제이션을 예외적으로 허용 해줘야하는데 그 메서드가 bypassSecurityTrustHtml(v)이다. import { Pipe, PipeTransform } from "@angular/core..

Angular Router는 Angular의 핵심기능 중 하나인데 여기서 파라미터를 보내는 방법을 작성하겠다. 라우터를 선언하는 부분은 다음과 같이 가정하고 { path: 'move/:param', component: MoveComponent }, 하면 template나 component에서는 다음과 같이 사용할 것이다. template 이라하고 param값을 넣어주면 :param에 값이 전달되는 식이다. component this.router.navigate(['/move', param]); 그리고 받는쪽에서는 다음과 같이 사용할 것이다. (여러가지 방법이 있음 ) // 방법1this.activatedRoute.params.subscribe( params => { this.sq = params['par..