앵귤러28 앵귤러 기초(Angular basic) 10.이벤트 바인딩(event binding) 유저의 행동에 대해 대응할 수 있게 해주는 이벤트 바인딩에 대해 알아보겠습니다. 이번 포스트에서는 아래 내용을 다루고 있습니다. 이벤트바인딩 표준 이벤트 찾는 법 이벤트바인딩 지난 포스트에서 알아본 모든 데이터 바인딩은 컴포넌트에서 템플릿까지의 단방향 바인딩 이였습니다. 그러나 사용자가 버튼을 클릭할 때처럼 사용자의 동작에 대응하기 위해 다른 방법으로 정보를 보내야 할 필요가 있습니다. 컴포넌트는 이벤트 바인딩을 사용하면 유저의 작업을 수신이 가능하고, 이벤트 바인딩을 통해 이벤트를 구성 요소의 메소드에 연결할 수 있습니다. 아래 코드는HTML 버튼 요소에 이벤트 바인딩을 해 놓은 상태 입니다. 버튼의 click 이벤트를 컴포넌트의 toggleImg 메소드에 바인딩한다고 해석 할 수 있습니다. 유저가 버.. 2022. 1. 20. 앵귤러 기초(Angular basic) 9.프로퍼티 바인딩(property binding) 데이터 바인딩의 프로퍼티 바인딩에 대해 알아 보겠습니다. 이번 포스트에서는 아래 내용을 다루고 있습니다. 다양한 바인딩(프로퍼티 바인딩, 이벤트 바인딩, 양방향바인딩) 프로퍼티 바인딩 프로퍼티 바인딩과 보간(interpolation)의 비교 다양한 바인딩 앵귤러의 데이터바인딩을 이용하면 단순히 컴포넌트의 프로퍼티를 화면에 표시 하는것 이상의 많은 일을 할 수 있습니다. 1.프로퍼티바인딩 웹에서는 인터렉티브한 사용자 경험을 제공하기 위해서 필요에 따라 화면의 분위기과 느낌 혹은 출력 값 등을 변경해야 할 필요가 있습니다. 앵귤러에서는 컴포넌트의 프로퍼티를 DOM element에 바인딩하여 필요에 따라 느낌과 모양을 변경할 수 있습니다. 예를 들어 데이터 값에 따라 요소 색상 또는 스타일을 변경하거나, 사용.. 2022. 1. 19. 앵귤러 기초(Angular basic) 7.Structural Directive, ngIf 구조지시문(structural Directive)에 대해 알아보고, 구조지시문인 ngIf를 사용해 보겠습니다 이번 포스트에서는 아래의 내용을 다루고 있습니다. Directive종류 구조 지시문(Structural Directive) ngIf란 Directive Directive는 html을 강화하고 확장하는데 사용하는 custom html 요소(element) 혹은 속성(attribute)라고 생각할 수 있습니다. 우리는 directive를 만들어서 사용하거나, angular가 제공 해주는 내장 지시문을 사용할 수 있습니다. 두 종류의 Directive custom directive(커스텀 지시문) Built-In directive(내장 지시문) 이전 포스트에서는 아래와 같이 component를 만들고 .. 2022. 1. 17. 앵귤러 기초(Angular basic) 5.템플릿, 컴포넌트 만들기 템플릿과 컴포넌트를 만들어보는 실습을 해보겠습니다. 이번 포스트에서는 아래 내용을 다루고 있습니다. 템플릿의 두 가지 작성법 bootstrap, fontawesome 설치 외부 라이브러리 글로벌 css설정 템플릿 만들기 컴포넌트 만들기 템플릿을 만드는 두 가지 방법 이전 포스트에선 AppComponet에 대한 인라인 템플릿을 만들었습니다. 위 예제는 Component의 메타데이터 에서 직접 템플릿을 정의 하고 이런 방식을 인라인 템플릿이라고 합니다. 하지만 이것이 componet에 대한 템플릿을 구축 할 수 있는 유일한 방법은 아닙니다. 템플릿을 작성한는 방법은 크게 두가지가 있습니다 인라인 템플릿 파일로 연결된 템플릿 1. 인라인 템플릿 메타데이터의 'template'속성을 사용하고 위와 같이 작은따옴.. 2022. 1. 16. 이전 1 ··· 3 4 5 6 7 다음
