1. Angular의 개념

1. Angular의 개념

Angular의 개념 설명에 앞서 Angular js의 등장 배경에 대해서 설명하겠습니다.

1. 웹 개발의 변화

웹 개발 방식은 Ajax - MVC - Web Component 순으로 변화하였습니다.

먼저 일반적인 웹 페이지 로딩 절차 를 말씀드리자면 아래와 같습니다.

사용자 : 브라우저의 url 입력

브라우저 : url의 웹페이지 요청

서버 : 객체와 템플릿으로 응답을 보냄(서버사이드 기술)

브라우저 : 서버로 받은 응답 데이터로 화면을 그림

서버의 사용자 세션을 이용하였고 이후 사용자가 데이터를 요청할 때마다 서버에서 처리 후 응답을 보내면

브라우저에서는 받은 데이터로 화면을 새로 그려 사용자의 요청사항을 반영하였습니다.

Ajax 웹 페이지 로딩 절차 는 사용자의 최초 요청에 대한 처리는 일반적인 웹 페이지와 같으나

버튼 클릭 등 사용자의 특정한 이벤트가 있을 때 서버로부터 페이지를 요청하고 응답을 받아 화면을 새로 그리는 것이 아니라 DOM API를 이용해서 element를 추가, 수정하는 행위를 자바 스크립트합니다.

데이터가 필요할 시에는 xml http request를 생성하여 서버로 비동기 요청을 보냅니다.

브라우저의 메모리에 있는 세션을 이용하며 서버로부터 요청에 대한 응답을 받으면 자바스크립트를 이용해 DOM 처리를 합니다.

게시글 하단에 공감 버튼을 클릭하면 화면 전체의 새로고침 없이 공감의 숫자만 하나 올라간것을 확인할 수 있는데

Ajax를 활용한 것이라고 보시면 됩니다.

Ajax의 장점과 단점은 아래와 같습니다.

장점 : 서버에 요청을 하지 않고도 동적으로 화면 변경이 가능하기 때문에 서버의 부담이 줄어들고 서버로의 요청횟수가 줄어들어 좀 더 빠른 웹 어플리케이션 개발이 가능해짐. 주로 JQuery를 이용해 DOM을 선택하고 변경하는 일들을 했고 Ajax 요청 또한 쉽게 서버에 보낼 수 있음.

단점 : 비교적 규모가 큰 웹 어플리케이션에서는 스파게티 코드 발생 가능성이 있고 재사용이 어렵기 때문에 코드에 대한 구조화가 필요함.

웹 어플리케이션의 규모가 커져 데스크톱 어플리케이션 수준이 되면서 매번 새로운 페이지를 서버로부터 읽어오고 리소스를 처음부터 다시 읽고 브라우저 랜더링을 새로 하는 것이 성능 저하를 야기시키기 쉬웠습니다.

이런 문제점을 해결하고자 SPA(Single Page Application) , 단일 페이지 웹 어플리케이션 개발 패턴이 등장하게 되었습니다. Ajax의 확장판이라고 생각하면 됩니다.

SPA에는 라우팅이라는 개념이 있는데 url의 path에 따라 view를 지정하는것입니다.

이전에는 url에 따른 페이지를 서버로부터 받아왔다면 SPA에서는 url에 따라 자바스트립트를 이용해 동적으로 화면을 그립니다.

이때 웹 어플리케이션 구조를 잡기 위해 프레임워크들이 필요해졌는데 MVC 패턴 이 바로 그것입니다.

Web Component(웹 컴포넌트) 는 Custom Elements(커스텀 엘리먼츠), Shadow DOM(쉐도우 돔), HTML Import(HTML 임포트), HTML Template(HTML 템플릿)으로 구성되어 있습니다.

브라우저에서 재사용가능한 단위인 컴포넌트 기반으로 웹 어플리케이션 개발이 가능하게 된 것입니다.

사용자가 엘리먼츠를 정의 할 수 있고 그 안에 기능을 구현할 수 있는데 이렇게 만든 엘리먼츠를 재사용하는 단위, 화면에서의 하나의 기능 단위로 볼 수 있습니다.

(어떻게 보면 Angular JS의 지시자와 비슷하다고 할 수 있지만 웹 컴포넌트는 웹 플랫폼 자체에서 구현되었고 지시자는 Angular JS에서만 존재한다는 차이점이 있습니다.)

2. AngularJS의 개념

Angular JS(앵귤러 JS) 는 2009년 구글이 만든 단일 페이지 웹 어플리케이션 개발을 위한 자바스크립트 MVC 프레임워크입니다.

거대해져 가는 웹 어플리케이션을 구조화하기 위해 만들어졌지만 고질적인 성능 문제와 복잡한 지시자 문법이라는 단점 있었습니다.

웹 컴포넌트 개념에 등장에 따라 Polymer, React JS 같은 새로운 프레임워크들이 나오면서 Angular JS도 기존의 성능

이슈와 생산성 문제를 해결함과 동시에 컴포넌트 기반의 개발 방법을 갖춘 Angular JS 2로 변하게 되었습니다.

( 단, Angular2의 컴포넌트는 웹 컴포넌트가 아니므로 주의)

Angular 2(앵귤러 2) 는 모바일, 웹, 데스크탑과 같은 다양한 플랫폼에서 동작하는 웹 어플리케이션 개발을 위해 다양한 개발 툴과 기능들을 제공하는 웹 어플리케이션 플랫폼입니다.

3. Angular JS와 Angular의 차이

Angular JS는 초창기 배포되었던 Angular JS 1을 말합니다.

Angualr JS 2부터는 뒤에 js를 붙이지 않고, Angualr 2, Angular 4... 이렇게 버전만 붙여서 칭합니다.

from http://choonsdevlog.tistory.com/2 by ccl(A) rewrite - 2021-10-11 20:01:34