CheolCheol Dev Note

Angular를 사용하면서 JSON으로 받은 데이터를 localStorage에 담을일이 생겼다. 처음에는 어떻게 해야하나 싶었는데 결국에는 JSON을 String으로 변환시킨 후에 나중에 사용할 때 파싱을 통해 JSON 데이터로 다시 변환시키면 된다. var testObject = { 'one': 1, 'two': 2, 'three': 3 }; // Put the object into storage , String 으로 데이터를 저장 localStorage.setItem('testObject', JSON.stringify(testObject)); // Retrieve the object from storage, 담겨져 있는 데이터 가져오기 const retrievedObject = localStorage..

Anuglar에는 Component 생명주기라고 Life Cycle Hooks가 있다. 출처 : https://v2.angular.io/docs/ts/latest/guide/lifecycle-hooks.html Life Cycle Hooks 는 컴포넌트의 상태와 관련이 있는데 각 상태에 따른 기능을 사용하려면 core의 lifecycle_hooks.d.ts에 있는 메소드들을 implements받아서 사용해야한다. 하지만 이것은 컴포넌트의 상태에 따른 기능이고 이글은 Router의 상태에 따른 기능구현을 하는법에 대해 쓴다. Router events는 navigation마다 해당 이벤트를 감지하여 사용자가 원하는 로직을 추가할 수 있다. 공홈에는 Event와 관련된 함수들이 다음과 같다고 한다.Router..

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..