Angular 기본과 간단한 To-Do 어플리케이션 만들기 1강

Angular 기본과 간단한 To-Do 어플리케이션 만들기(인프런)

강의 보면서 필기하기.

---

웹개발 흐름 : Ajax -> SPA(MVC) -> Web Component

 

<일반적인 html 홈페이지-동기방식>

사용자가 브라우저URL을 입력하면 브라우저가 해당 url의 웹페이지를 서버에 요청함.

자바의 객체와 jsp 템플릿을 가지고 브라우저가 인식하는 html 페이지를 만들어서 응답을 보냄.

각 페이지별로 전달되어야 하는 데이터들은 서버쪽 세션에 저장되어 있다가 페이지 요청이 올 때 사용자 세션에서 사용자 데이터 정보를 읽고 jsp단에서 화면을 보여줌.

 

<AJAX-비동기방식>

서버부터 웹페이지로 받아옴

사용자가 특정 행위(버튼클릭)를 했을 때 서버로부터 페이지를 요청받아 하는게 아니라 DOM API를 통하여 페이지를 요청하거나 수정하거나 하는 행위 == >Javascript 보통 jqeury를 통하여 쉽게 데이터를 전송.

 

BUT

규모카 큰 어플리케이션에서는 코드가 꼬이기 쉽고 재사용이 어렵기 때문에 코드에 대한 구조화가 필요 ==> 성능저하

===> SPA라는 단일 페이지 웹 어플리케이션 개발 패턴이 등장(Ajax의 확장판)

 

<SPA>

라우팅이라는 기능이 있음. url path에 따라 url을 지정

 

즉 Angular Js는 구글이 만든 단일페이지 웹어플리케이션 개발을 위한 자바스크립트 프레임워크

규모가 큰 Angular JS는 성능저하, 개발의 어려움이 있었음. ==> Web Component 개념이 등장

 

Component? 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈

Web Component : Custom Elements + Shadow DOM + ES Modules(HTML Import) + HTML Templete

- Shadow DOM : DOM과 스타일을 캡슐화하여 메인으로부터 독립적으로 스크립트와 스타일을 처리할 수 있도록 한다.

- Custom Elements : HTML에 새로운 HTML/DOM 요소를 정의할 수 있는 JavaScript API.

- HTML Templates : 문서가 처음 로드될 때는 비활성화된 상태이지만, JavaScript를 사용하는 런타임에 나타나는 HTML 조각.

- ES Modules : 이전 규격이었던 HTML Import를 대체하여 나온 규격이며, 자바스크립트로 구현하는 모듈 시스템.

 

뭔가 나랑 맞지 않는듯한 강의 style..하핫