ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 2장) Angular 2 작동방식 살펴보기
    Angular 2017. 1. 2. 17:12


    1장에 이어 이제 Angular-cli 로 설치된 프로젝트의 구조를 살펴보기로 합시다. 

    그전에 Angular 2 가 어떤식으로 동작하는지 간단하게 정말 간단하고 알기쉽게 알아보고 갑시다.

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

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


    만약 일반적인 Web service 에서 사용자가 다른 메뉴를 보기 위해 링크를 클릭했다고 가정하면 



    간단하게 이런 구조로 동작합니다. 

    사용자가 클라이언트 , 즉 HTML 화면에서 해당 링크를 클릭하면 클라이언트 측에서는 서버로 해당 데이터를 

    달라고 요청하게 됩니다. 

    서버는 '어이쿠 그놈이 어디있더라 여기있네' 하며 데이터를 꺼내서 던져주게 되고 해당 요청을 받은

    클라이언트는 유저에게 결과를 보여주게 됩니다. 

    해당 웹서비스에서 페이지가 바뀔때마다 서버에 요청하고 받고 요청하고 받고 모든 것을 서버와 

    함께 하게 되는 것이 기존의 전통적인 Web Service 방식이라고 생각하면 됩니다. 

    예를들어 간단히 말하면 각각의 링크에 대입되는 HTML 파일을 서버가 가지고 있고 이를 얻기위해서 

    사용자가 해당 페이지 요청시 서버에 요청을 보내서 해당 데이터를 가지오 오게 되는 구조입니다. 

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

    물론 뷰 뿐만이 아니라 DB 요청이 있을때도 당연히 서버를 방문하게 되겠죠. 



    그럼 SPA 는 어떤 방식일까요?

    SPA 는 초기 접속시에 필요한 데이터를 받아오고 난 뒤 유저가 요청을 하게 되면 해당 HTML 페이지를 

    클라이언트에서 재조립하여 보여주게 됩니다. 

    예를 들면 메인페이지에서 사용자가 '얘네들은 뭐하는 애들일까 ?' 하고 about 링크를 

    클릭했다고 가정합시다.

    일반적인 Web Service 에서는 클라이언트가 서버에게  'about 페이지 요청이 들어왔다' 고 요청하면

    서버에서 옛다 하고 about.html 파일을 던져주게 됩니다.

    하지만 SPA 에서는 about? 그놈은 '메뉴가 요롷게 바뀌고 데이터가 요롷게 바뀌면 되지' 하고 

    현재 화면에서 바뀌어야 될 부분만 바꿔서 재조립 한뒤 딱 튀어나오게 됩니다. 

    이때 조립되는 부분부분을 '컴포넌트' 라고 칭하게 되니 미리 기억 해 둡시다. 

    이렇게 되면 DB에 접속하거나 특별한 경우를 제외하고는 클라이언트 측에서 요청을 대부분 처리하기

    때문에 서버에 왔다갔다 하는 비용이 줄어들겠죠? 



    그럼 Angular 2 에서는 어떤식으로 처리할 지 볼까요? 



    간단하죠 ?  복잡하게 볼려면 훨씬 복잡하게 볼 수도 있지만 가장 중요한 건 결국 저 정도 입니다.

    사용자가 새로운 페이지나 DOM 이 변경되는 이벤트를 요청했다면 Angular 에서는 AngularRoute 에서 

    명시된 요청을 따라가서 해당 컴포넌트를 만난 뒤 현재 DOM 에서 바뀌어야 될 부분만을 바꿔서 

    조립하고 사용자에게 보여주게 됩니다. 


    그전에 Angular 는 웹컴포넌트 기술을 사용하고 ShadowDOM 을 이용하는데 이들에 대해서는 따로 

    글을 적어야 할 것 같습니다. 

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


    이번 장에서는 간단한게 작동방식을 알아봤는데 솔직히 깊게 들어가면 적어야 할 내용도 많고

    공부 할 내용도 무지하게 많습니다. 

    물론 중요한 내용이지만 시작도 전에 머리아프게 흥미를 잃을 필요는 없겠죠.

    일단은 뭐라도 만들어보면서 필요한 부분은 그때 그때 습득하도록 합시다. 



    *** 컴포넌트 간단 추가설명 

    컴포넌트는 독립적인 부품이라고 생각하면 됩니다. 

    예를들어 로봇 부품을 만드는 A공장에서 팔 , 다리 , 머리 , 몸통을 각각 만들었습니다. 

    이들을 합쳐서 로봇 A 가 나왔습니다. 

    그리고 B공장 역시 부품을 만드는데 깜빡하고 머리부분을 만들지 못했습니다. 

    그래서 A공장에게 머리부분을 빌려달라고 요청해서 A공장의 머리를 가져와서 로봇B를 만들었습니다. 

    이때 사용된 부품들이 컴포넌트라고 생각하면 됩니다. 


    일반적인 홈페이지의  Side , Top nav , Content 부분으로 나뉘어져 있다면 

    컴포넌트로 바꿔서 Side Component , TopNav Component , 그리고 Content Components 

    로 칭할 수 있겠죠.

    그리고 중요한 특징은 이들은 독립적인 구성단위를 가지고 있습니다. 

    컴포넌트에는 로직 , CSS , Html 등을 하나로 묶어서 컴포넌트로 만들고 이 컴포넌트들을 조립해서 

    하나의 페이지가 탄생하게 됩니다. 


    컴포넌트의 단위는 무엇이든 가능합니다. 

    예를 들어 위 로봇 예제에서 머리 컴포넌트가 있었는데 이 머리 컴포넌트를 구성하기 위해 

    눈,코,입 부분을 별도의 컴포넌트로 만들어 조립한 뒤 머리로 만들 수도 있는 겁니다. 


    만약, 정말 만약 지금 이해가 안되면 Angular 를 이용한 예제를 만들다보면 이해하기 싫어도 

    이해하게 될테니 걱정하지 마세요

    댓글