본문 바로가기

분류 전체보기137

앵귤러 기초(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) 6.바인딩, Interpolation(보간) 바인딩의 개념 그리고 보간에 대해 알아보겠습니다. 이번 포스트에서는 아래의 내용을 다루고 있습니다. 바인딩이란 Interpolation(보간)이란 Binding(바인딩) 이란 Angular에서 바인딩은 컴포넌트 클래스와 해당 템플릿 간의 의사소통을 하고 데이터 전달하는 것을 의미합니다. 예를 들어 클래스의 값을 템플릿에 제공하여 표시할 수 있으며, 템플릿에서는 이벤트를 발생시켜 사용자 작업이나 입력값을 다시 클래스에 전달합니다. 바인딩 구문은 항상 템플릿에 정의 됩니다. Angular에서는 여러 종류의 바인딩을 제공하는데, 그중 interpolation(보간)에 대해 알아보겠습니다. Interpolation(보간) 템플릿에서는 보간을 의미하는 이중 중괄호는 쉽게 볼 수 있습니다. 위 예제의 페이지 제목은.. 2022. 1. 16.
앵귤러 기초(Angular basic) 5.템플릿, 컴포넌트 만들기 템플릿과 컴포넌트를 만들어보는 실습을 해보겠습니다. 이번 포스트에서는 아래 내용을 다루고 있습니다. 템플릿의 두 가지 작성법 bootstrap, fontawesome 설치 외부 라이브러리 글로벌 css설정 템플릿 만들기 컴포넌트 만들기 템플릿을 만드는 두 가지 방법 이전 포스트에선 AppComponet에 대한 인라인 템플릿을 만들었습니다. 위 예제는 Component의 메타데이터 에서 직접 템플릿을 정의 하고 이런 방식을 인라인 템플릿이라고 합니다. 하지만 이것이 componet에 대한 템플릿을 구축 할 수 있는 유일한 방법은 아닙니다. 템플릿을 작성한는 방법은 크게 두가지가 있습니다 인라인 템플릿 파일로 연결된 템플릿 1. 인라인 템플릿 메타데이터의 'template'속성을 사용하고 위와 같이 작은따옴.. 2022. 1. 16.
앵귤러 기초(Angular basic) 4.angular bootstrap 앵귤러 컴포넌트는 웹에서 어떻게 시작되어 동작 하는 걸까요? 앵귤러 컴포넌트의 부트스트랩에 대해 알아보겠습니다. 이번 포스트에서는 아래 내용을 다루고 있습니다. Angular Bootstrap 과정 Angular module이란 Bootstrap이란 무엇일까요? 기술적으로 프로그래밍 분야에서는 로드 및 시작 프로세스를 의미 합니다. 동명의 bootstrap이란 프레임워크도 있지만 잠시 잊어주세요:) 우리는 Angular에게 bootstraping이라고 불리는 프로세스를 통해 루트 컴포넌트를 로드하라고 지시해야 합니다. 간단히 부트스트랩 하기 위해 해야할 일은 다음과 같습니다. Index.html 파일을 설정한 후 애플리케이션을 호스팅 하기 컴포넌트를 부트스트랩 하기 위해 루트 Angular 모듈에 정의하.. 2022. 1. 14.