nalaolla

이번장에서는 외부 리소스를 처리하는 방법에 대해 살펴보겠습니다. Angular는 통신을 위한 HttpClient 모듈을 제공하며, 이를 통해 외부 Rest 서버와 통신하여 리소스를 처리 할 수 있습니다. 외부 리소스 통신을 위한 Service 생성 외부 통신 로직을 각각의 Component에 포함시켜도 되지만, 외부리소스를 가져오는 부분은 공통된 로직으로 모아 한곳에서 처리할 수 있도록 하는것이 좋습니다. 따라서 Service를 하나 만들어 사용합니다. $ ng g s restapi app.module.ts에 선언 providers: [RestapiService] HttpClientModule 추가 Service에서 HttpClient를 사용하기 위해 app.module.ts에 HttpClientModu..

이번 장에서는 폼에 입력된 값의 유효성을 체크하는 방법에 대해 실습하겠습니다. Input 필드의 값 유효성 체크 ngModel을 사용해야 하므로 FormsModule을 app.module.ts에 선언합니다. // app.module.ts import { FormsModule } from '@angular/forms'; ... 생략 imports: [ FormsModule ] Component html파일에 다음과 같이 input을 선언합니다. Name field is required! [(ngModel)]은 양방향 바인딩을 하기 위해 사용됩니다. 예제에서는 괄호를 모두 없애고 ngModel만 사용하였는데 이렇게 사용하면 input에 validation이 적용됩니다. 예제에서는 required를 사용하여 ..

Angular 프레임웍에서 웹페이지는 컴포넌트의 집합으로 표시됩니다. 또한 웹페이지를 브라우저에서 출력하기 위해서는 유일한 URL이 필요합니다. Angular에서는 이렇게 유일한 URL과 컴포넌트 사이를 맵핑하는 기능을 제공하는데 이것을 Routing이라고 합니다. Angualr 프로젝트 생성 시에는 아래와 같이 Routing을 추가할 것인지 묻습니다. y를 입력하면 기본으로 Routing 설정 파일을 생성한 채로 프로젝트가 생성됩니다. $ ng new angular-starter ? Would you like to add Angular routing? (y/N) y 만약 생성시 Routing설정을 하지 않았다면 다음과 같이 수동으로 파일을 생성하고 app.module.ts에 추가해 줘야 합니다. // ..

Angular는 화면을 구성하는 최소 단위가 컴포넌트입니다. 클라이언트에게 보이는 최종 화면은 하나의 html로 보이지만, 내부적으로는 여러 개의 컴포넌트들로 이루어져 있을 수 있습니다. 따라서 컴포넌트 간에 데이터를 교환해야 하는 이슈가 발생할 수 있습니다. 이번 장에서는 컴포넌트간에 데이터를 교환하는 방법에 대해 알아보겠습니다. 부모 -> 자식 컴포넌트로의 데이터 전달 parent, child 컴포넌트 2개를 생성합니다. $ ng g c parent $ ng g c child parent component를 다음과 같이 작성합니다. 태그를 추가하면 parent에 child component가 추가됩니다. parent->child component로 데이터를 보내기 위해 태그 내에 [received]=..

앞서 환경이 구축되었다는 가정하에 Angular 프로젝트를 생성합니다. 터미널에서 ng명령어를 통해 Angular 프로젝트를 생성하고 아래와 같이 서버를 실행합니다. // ng new 프로젝트명(소문자와 '-'만 이용하여 생성) $ ng new angular-starter ? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? CSS CREATE angular-starter/angular.json (3497 bytes) CREATE angular-starter/package.json (1288 bytes) CREATE angular-starter/README.md (1031 bytes) .....

Node기반의 완전하고 독립적인 웹 프런트 프레임워크로서, 체계적이고 구조화된 개발 방법 및 환경을 제공합니다. 기존의 웹 개발은 백엔드 서버와 강 결합된 상태의 템플릿 엔진 기반의 개발 방법이 주류였습니다. 웹 개발 환경은 꾸준히 발전해 왔지만 이러한 백엔드 서버의 부가적인 요소로서의 웹 개발은 비효율 적이고, 백엔드 서버의 바운더리 안에서는 더 이상 발전하기 힘든 상황에 직면하였습니다. Angular를 비롯한 여러 가지 프런트 프레임워크의 주요 목표 중 하나는 html, javascript, css를 통한 웹 개발 시 백엔드 개발 이상의 개발 생산성을 확보하는 것입니다. Angular를 사용하면 개발면에서 상당히 논리적이고 편리한 개발환경을 제공한다는 것을 알 수 있습니다. 뭐가 다른가? 웹 개발을 ..