[Angualr] 라우팅과 내비게이션

Angluar Routing & Navigation 라우팅과 내비게이션! PA (Single Page Application) 단일 페이지 애플리케이션은 모던 웹의 패러다임 장점 기존의 서버 사이드 렌더링과 비교할때 배포가 간단하며 네이티브 앱과 유사한 사용자 경험을 제공 단점 link tag를 사용하는 전통적인 웹 방식은 새로운 페이지 요청 시마다 정적 리소스가 다운로드되고 전체 페이지를 다시 렌더링하는 방식으로 동작 새로고침이 발생되므로, 변경이 필요없는 부분을 포함하여 전체 페이지를 갱신하는 것으로 비효율적 SPA 웹 애플리케이션에 필요한 모든 정적 리소스를 애플리케이션 최초 기동 시에 한번만 다운로 이후 새로운 페이지 요청시 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신하므로 전체적인 트래..

• format_list_bulleted JavaScript FrontEnd/Angular
• · 2021. 4. 29.
• textsms

[Angular] If '<selector>' is an Angular component, then verify that it is part of this module

Angular에서 selector를 찾을 수 없다고 말할때 해결하는 방법 진짜 한시간동안 삽질을 한것 같다. Angular에서 모듈을 이해하는데 어려움이 있는것 같다. If my-component is an Angular component, then verify that it is part of this module. If my-component is a Web Component then add CUSTOM_ELEMENTS_SCHEMA to the @NgModule.schemas of this component to suppress this message. 위 에러를 계속 보고 있는데, 너무 답답한게 Moudle에 이미 하위 Module을 추가했는데, 찾을 수 없다는 에러가 계속 나왔다. 이 문제는 몇단..

• format_list_bulleted JavaScript FrontEnd/Angular
• · 2021. 4. 29.
• textsms

[Angular] 템플릿과 템플릿 문법

템플릿과 템플릿 문법 (Template) 템플릿 (Template) 란? 템플릿은 HTML과 Angular 고유의 템플릿 문법을 사용하여 UI의 초사 단위인 컴포넌트의 뷰를 정의 동적으로 변하는 데이터는 컴포넌트 클래스가 관리하며 템플릿 문법의 데이터 바인딩에 의해 정적 HTML에 포함 뷰 생성과정 Component class에서 데이터 바인딩을 통해 데이터와 템플릿이 합쳐져 compile을 통해 최종적인 view를 생성 Angular는 템플릿과 컴포넌트 클래스로 뷰와 모델(데이터와 비즈니스 로직)을 분리한다. Angular는 컴포넌트 기반 개발 (CBD, Component Based Development) 프레임워크 MVC와 MVVM패턴과 일치하지 않지만 템플릿은 뷰(View)를 나타내고 컴포넌트 클래..

• format_list_bulleted JavaScript FrontEnd/Angular
• · 2021. 4. 29.
• textsms

[Angular] 템플릿 참조 변수와 세이프 내비게이션 연산자

템플릿 참조 변수와 세이프 내비게이션 연산자 (Template reference variable & Safe navigation operator) 템플릿 참조 변수 (Template reference variable) DOM요소에 대한 참조를 담고 있는 변수 템플릿 요소 내에서 해시 기호(#)를 변수명 앞에 추가하여 템플릿 참조변수 선언 템플릿 내에서만 유효하며 컴포넌트 클래스에 어떠한 side effect도 주지 않는다. 이벤트 바인딩을 통해 컴포넌트 클래스로 전달할 수는 있다. 사용예로는 이메일 주소 validation check html .... 세이프 내비게이션 연산 (Safe navigation operator) 세이프 내비게이션 연산 ?는 컴포넌트 클래스의 프로퍼티의 값이 null 또는 und..

• format_list_bulleted JavaScript FrontEnd/Angular
• · 2021. 4. 29.
• textsms

[Angular] Basic

Angular 소개 Angular는 SPA(Single Page Application) 개발을 위한 구글의 오픈소스 자바스킓트 프레임워크 모바일 웹, 네이티브 모바일과 데스크탑 애플리케이션까지 프론트엔드 개발에 필요한 대부분 기능을 갖추고 있다. TypeScript를 주력 언어로 채택하여 대규모 애플리케이션 개발에 보다 적합한 환경 Angular VS AngularJS Angular는 정적 타이핑 ECMAScript6 스펙을 충족시키기 위해 TypeScript로 재작성 Controller와 $scope 기반 개발 --> 컴포넌트 기반 개발(CBD, Component Based Development)로 전환 angular.module과 jQlite보다 향상된 모듈 시스템과 DOM 제어 기능을 제공하며 AP..

• format_list_bulleted JavaScript FrontEnd/Angular
• · 2021. 4. 29.
• textsms

[Angular] Built-in Directive (빌트인 디렉티브)

빌트인 드렉티브 빌트인 디렉티브(Built-in directive)란? DOM의 모든것을 관리하기 위한 지 HTML요소 또는 어트리뷰트의 형태로 사용하여 디렉티브가 사용된 요소에게 무언가를 하라는 지시를 전달 컴포넌트의 복잡도를 낮추고 가독성을 향상 디렉티브 3가지 유형 컴포넌트 디렉티브 (Component Directives) 컴포넌트의 템플리 표시하기 위한 디렉티브 @Component 데코레이터의 메타데이터 객체의 selector 프로퍼티 어트리뷰터 디렉티브 (Attribute Directives) HTML 요소의 어트리뷰트와 같이 사용하여 해당 요소의 모양이나 동작을 제어, ngClass, ngSylte 구조 디렉티브 (Structual Directives) DOM 요소를 반복 생성(ngFor), ..

• format_list_bulleted JavaScript FrontEnd/Angular
• · 2021. 4. 29.
• textsms

[Angular] Service & Dependency Injection (서비스와 의존성 주입)

서비스(Service)란? 화면을 구성하는 뷰를 생성하고 관리하는 역할 컴포너는트 내의 부가기능(로깅기능, 서버 통신 기능에 사용) 컴포넌트 외의 부가 기능이 변경되면 컴포넌트를 변경해야한다. (독립성x) 코드중복, 재사용성이 낮고, 복잡도는 높아진다. 서비스가 필요한 이유? 컴포넌트 관심사와 애플리케이션 전역 관심사를 분리하기 위해서 서비스 사용 서비스느 재사용이 가능하게 되어 일관된 앱 코드 작성이 가능 뷰를 구성하기 위해 데이터를 서버로 부터 취득 하는 행위를 컴포넌트에게 필요한 기능이지만 그 기능 자체가 컴포넌트의 주된 괌심사는 아니다. 위 데이터를 서버로 부터 취득하는 공통 관심사를 서비스로 분리한다면 구성 요소마다 자신의 관심사에 집중할 수 있음 결과적으로 재사용성은 높아지고 복잡도는 낮출 수..

• format_list_bulleted JavaScript FrontEnd/Angular
• · 2021. 4. 29.
• textsms

[Angular] Data Binding (데이터 바인딩)

데이터 바인딩이란? 필요한 이유? 구조화된 웹앱은 뷰, 모델의 분리가 필요, 하지만 뷰와 모델은 유기적으로 동작이 필요 위 문제를 해결하기 위해 데이터 바인딩이 필요 데이터 바인딩은 뷰와 모델을 하나로 연결 템플릿 = View, 데이터 = Model 뷰와 컴포넌트 클래스의 데이터를 하나로 묶어 유기적 동작 기존 jQuery를 사용 뷰와 모델 간의 관계를 느슨하게 결합하기 어려운 구 구조 상 문제로 뷰가 변경되면 로직도 변경될 가능성이 매우 높음 Angular는 DOM에 직접 적느하지 않고, 템플릿과 컴포넌트 클래스의 상호 관계를 선언 (Declarative programming)으로 뷰와 모델 관계를 관리 컴포넌트 클래스와 템플릿 문법으로 기술 {{title}} 결과적으로 템플릿이 변경되어도 컴포넌트 클..

• format_list_bulleted JavaScript FrontEnd/Angular
• · 2021. 4. 29.
• textsms

[Angular] 02.튜토리얼 (4~8)

Angular Tutorial 아래 튜토리얼은 4~8 Displaying a List Master/Detail Components Services Master/Detail Components Services Routing HTTP Displaying a List Heroes의 리스트를 보여주고, hero 선택 및 hero의 details까지! Create mock Heroes 실제로는 remote data server로 부터 데이터를 가져와야 하지만, mock heroes를 만들어서 서버에서 동작하듯 mock-heroes.ts를 src/app/ 폴더에 생성 Displaying heroes HeroesComponents에 보여주기 위해서 위에서 생성한 mock-heroes를 import 그런다음 heroe..

• format_list_bulleted JavaScript FrontEnd/Angular
• · 2021. 4. 29.
• textsms

[Angular] 01.튜토리얼(1~3)

Angular Tutorial 아래 튜토리얼은 1~3 Introduction The Application Shell The Hero Editor Introduction Tour of Heroes 위 튜토리얼은 Angular의 fundamentals를 커버 할 수 있음 튜토리얼 구성 Use built-in Angular directives to show and hide elements and display lists of hero data. Create Angular components to display hero details and show an array of heroes. Use one-way data binding for read-only data. Add editable fields to upd..

• format_list_bulleted JavaScript FrontEnd/Angular
• · 2021. 4. 29.
• textsms