SPA 기반 풀스택 웹개발 과정 (Angular8 사용)

[Angular를 사용하여 SPA 기반 풀스택 웹개발하기]

본 과정은 SPA 기반 풀스택 웹개발 과정을 다루고 있는 강의입니다. Angular와 C#을 사용하여 웹앱을 만드는 과정을 설펴봅니다.

최신의 Anuglar 8 문법과 사용에 대해서 설명하고 있기 때문에 해당 내용에 대한 지식이 필요한 개발자 취업 준비생, 또는 실제 개발자 분들에게 많은 도움이 될 수 있는 강의입니다.

본 강의는 아래와 같은 목차로 구성되어 있습니다.

[HD]새로워진 Angular(앵귤러) 8 을 사용하여 SPA 기반 풀스택 웹개발하기 Part.1

• Angular(앵귤러) 8 강의 시작 및 강의 소개

• Angular(앵귤러) 8 미리보기 세미나

• Angular 2020 개발 환경 구축 및 시작하기(Node, NPM, VSCode, CLI 등)

• 강의에서 만들어볼 데모 예제 미리 실행하기

• Customers(고객 관리) API 만들기

• Angular CLI와 Visual Studio Code로 앵귤러 프로젝트 만들고 실행해보기

• Angular(앵귤러) 8에서 알아야 할 8가지 핵심 개념

• Angular 8.0과 ASP.NET Core 3.0을 사용한 풀스택 웹개발

• Component(컴포넌트)를 만들고 Module(모듈)에 등록 후 실행하기

• QuickStart 예제 추가 및 메인 레이아웃에 예제 링크 추가

• Angular Component(앵귤러 컴포넌트) 이론 설명

• Customers_01_Angular 프로젝트 생성 및 CustomersIndexComponent 생성

• Customers_02_고객 관리 관련 입력, 출력, 상세, 수정, 삭제 컴포넌트 생성

  
  

[HD]새로워진 Angular(앵귤러) 8 을 사용하여 SPA 기반 풀스택 웹개발하기 Part.2

• Template(템플릿) 이론 설명

• 스타일 이론 설명

• Customers_03_부트스트랩을 사용하여 고객 관리 5개 페이지에 대한 순수 HTML 디자인 적용

• 내장 지시자 이론 설명

• 모델과 컴포넌트 고급 및 라이프사이클 이론적인 설명

• Customers_04_Customer 모델 클래스 생성 및 각각의 컴포넌트에 OnInit 및 모델 클래스적용

• 데이터 바인딩 이론 설명

• 앵귤러 데이터 바인딩 소개 및 데모

• 앵귤러 라우팅 이론 설명

• Customers_05_ActivatedRoute와 Router 클래스를 사용하여 파라미터 받기 및 페이지 이동하기

• 서비스(Service)와 인젝터 소개

• Customers_06_CustomersService 서비스 클래스 만들고 컴포넌트에 주입해서 사용하기

• Customers_07_rxjs를 사용하여 페이징 처리 관련 데이터 서비스 클래스의 메서드 구현

• Customers_08_데이터 서비스 클래스에 CRUD 메서드 구현 후 삭제와 상세보기 페이지 테스트

[HD]새로워진 Angular(앵귤러) 8 을 사용하여 SPA 기반 풀스택 웹개발하기 Part.3

• 폼과 ngModel_템플릿 기반 폼 이론 설명

• 참고_템플릿 기반 폼 사용하기

• Customers_09_템플릿 기반 폼으로 입력 폼 구성하고 입력 처리 페이지 완성하기

• 리액티브 기반 폼(Reactive Form)에 대한 이론적인 설명

• Customers_10_리액티브 기반 폼으로 수정 폼 만들고 기존 데이터 바인딩하기

• Customers_11_수정 페이지를 리액티브 폼으로 구현 후 수정 코드 완성

• 중첩 컴포넌트(Input과 Output) 이론 설명

• Customers_12_페이저 컴포넌트 추가 및 리스트 페이지에 페이저 추가

• Customers_13_Angular Customers 고객 관리 기능 전체 구현 완료 및 실행 테스트

• 앵귤러 모듈 이론 설명

• 파이프(Pipe) 간단 소개

• 참고_Http와 비동기(Promise와 Observable(RxJS))

• Customers 앱을 Azure Web App에 올려서 실행하기 데모