Programmazione di Ku0re

Angular 4 Tutorial Secondo) Angular 4 작동방식 살펴보기 본문

Programmazione/Angular

Angular 4 Tutorial Secondo) Angular 4 작동방식 살펴보기

ku0re kuore 2017. 5. 2. 19:04

이 글은 단순히 Angular 공식사이트의 Tutorial을 정리해 놓은

Alexband님의 블로그 포스팅을 보고  Angular를 공부하면서 내용을 정리한 글입니다.

공부하실 분은 Angular 공식사이트의 Tutorial을 보시고 제 포스팅은 참고만 하세요! :)


*Angular 4는 Angular 2와 문법적으로 큰 차이는 없다고 합니다.




Angular 4 작동 방식 살펴보기



이전 포스팅에 이어 이제 Angular-cli로 설치된 프로젝트의 구조에 대해 살펴보자.


그 전에 Angular 4 가 어떤 식으로 동작하는지 간단하게 알아보자.


기본적으로 Angular 는 모바일 환경의 SPA(Single Page Application)를 타겟으로 만들어진 프레임워크 이다.


그럼 일반적인 Web 이랑 SPA 는 무엇이 다른가?



일반적인 Web Service 방식


만약 일반적인 Web Service 에서 사용자가 다른 메뉴를 보기 위해 링크를 클릭했다고 가정하면 아래와 같은 구조로 동작한다.

사용자가 클라이언트, 즉 HTML 화면에서 해당 링크를 클릭하면 클라이언트 측에서는 서버로 해당 데이터를 달라고 요청하게 된다.


이 때 서버는 요청한 데이터를 찾아서 클라이언트에게 주고 해당 요청을 받은 클라이언트는 사용자에게 결과를 보여주게 된다.


해당 웹 서비스에서 페이지가 바뀔 때 마다 서버에 요청하고 받고 요청하고 받고 모든 것을 서버와의 통신을 통해 처리하는 것이 기존의 전통적인 Web Service 방식이라고 생각하면 된다.


예를 들어 각각의 링크에 대입되는 HTML 파일을 서버가 가지고 있고 이를 얻기 위해서 사용자가 해당 페이지 요청 시 서버에 요청을 보내서 해당 데이터를 가지고 오는 구조이다.


ex) index.html, about.html, login.html, menu.html...


물론 뷰 뿐만 아니라 DB 요청이 있을 때도 서버를 통해 DB 서버의 데이터를 받게 된다.

(이때 웹 서버는 DB 서버의 클라이언트가 되고 DB 서버가 서버의 역할을 하게 된다.)


그럼 SPA는 어떤 방식일까?



SPA 데이터 처리 방식

SPA는 초기 접속시에 필요한 데이터를 받아오고 난 뒤 유저가 요청을 하게 되면 해당 HTML 페이지를 클라이언트에서 재 조립하여 보여주게 된다.

예를 들어 메인 페이지에서 사용자가 about 링크를 클릭했다고 가정하면 일반적인 Web Service에서는 클라이언트가 서버에게 about.html를 요청하면 서버는 about.html이란 파일을 찾아서 있다면 클라이언트에게 넘겨주게 된다.


하지만 SPA에서는 기존의 화면에서 바뀌어야 될 부분만 about에 관련된 것으로 바꿔서 재 조립 한 뒤 사용자에게 결과를 보여준다.


이 때 조립되는 부분을 '컴포넌트'라고 한다.


이렇게 되면 DB에 접속하거나 특별한 경우를 제외하고는 클라이언트 측에서 요청을 대부분 처리하기 때문에 서버를 통해야 처리할 수 있던 자원 비용을 감소할 수 있다.


그럼 Angular 4 에서는 어떤 식으로 처리할까?



Angular 4 데이터 처리 방식

더 간단하다.


사용자가 새로운 페이지나 DOM 이 변경되는 이벤트를 요청했다면 Angular에서는 AngularRoute에서 명시된 요청을 따라가서 해당 컴포넌트를 만난 뒤 현재 DOM에서 바뀌어야 될 부분만을 바꿔서 재 조립하고 사용자에게 보여준다.


그 전에 Angular는 웹 컴포넌트 기술을 사용하고 ShadowDOM 을 이용한다.


기본적인 개념은 요청 -> 라우트 -> 컴포넌트 조립 -> 결과 로 이어진다고 생각하면 된다.





ps1>Angular에서 컴포넌트의 개념이 중요하다고 들었다. 공부해보니 부품화 하여 필요한 부품만 재 조립한다는 게 뭔가 모듈과 비슷한 개념 같다.

0 Comments
댓글쓰기 폼