Angular (3) 썸네일형 리스트형 [Angular] Router 라우터 정리 Angular2 버전 이후를 기준으로 정리한 글입니다. 라우터는 URL을 사용하여 특정 영역에 어떤 뷰를 보여 줄지 결정하는 기능을 제공한다. 전통적인 서버사이드 렌더링을 하는 웹 사이트는 주소가 바뀔 때마다 서버에 전체 페이지를 요청하고 전체 페이지를 화면에 렌더링한다. 매 요청시 전체 페이지를 새로 랜더링하는 것은 비효율적이기 때문에 라우터를 이용하여 필요한 부분만 랜더링을 한다면 효율적일 것이다. 라우터는 URL에 해당하는 컴포넌트를 화면에 노출하고 네비게이션을 할 수 있는 기능을 가지고 있다. Router 구성 요소 Router – 라우터를 구현하는 객체이다. Navigate() 함수와 navigateByUrl() 함수를 사용하여 경로를 이동할 수 있다. RouterOulet – 라우터가 컴포넌트.. [Angular] Directive 지시자 정리 Angular2 버전 이후를 기준으로 정리한 글입니다. 앵귤러에는 세가지 지시자(directive)가 있다. 컴포넌트 - 템플릿을 가지는 지시자 구조 지시자 - DOM 요소를 동적으로 추가하거나 제거하는 지시자 속성 지시자 - 요소, 컴포넌트, 다른 지시자의 행동이나 모양을 변경하는 지시자 구조 지시자 : DOM 요소를 추가 하거나 제거하는 등 DOM의 레이아웃을 동적으로 변경할 때 사용하는 지시자이다. 구조 지시자에는 NgIf, NgSwitch, NgFor가 존재한다. NgIf 지시자: boolean 표현식을 가지며 값에 따라 DOM 요소가 나타나거나 사라진다. {{hero.name}} 위의 예에서 hero의 값이 존재하면 div 요소가 출력되고 값이 null 혹은 undefined라면 요소가 나타나지.. [Angular] 앵귤러 데이터 바인딩 정리 Angular2 버전 이후를 기준으로 정리한 글입니다. 앵귤러의 데이터 바인딩은 컴포넌트와 뷰 사이에 연결 고리를 맺는 것이다. 앵귤러에는 데이터 흐름에 따라 크게 단방향 바인딩과 양방향 바인딩이 있고 단방향 바인딩의 경우 세부적으로 삽입식, 프로퍼티 바인딩, 이벤트 바인딩 존재 한다. 아래 그림은 DOM과 Componnent 사이에 앵귤러 데이터 바인딩을 설명한 것이다. 1. 삽입식(interpolation) {{userName}} {{getTitle()}} 삽입식은 이중 중괄호 사이에 컴포넌트의 변수 혹은 함수를 넣으면 연산의 결과 문자열이 뷰에 반영된다. 삽입식에서는 오래 걸리는 연산이 존재하는 함수를 이용할 경우 심각한 성능 저하가 발생할 수 있기 때문에 주의해야 한다. 2. 프로퍼티 바인딩 프로.. 이전 1 다음
