꿈꾸는 개발자, Front-end Developer

Trust that the dots will connect in your future.

#CSS #Dev #EJS #HTML #Hexo #JavaScript #dev #jQuery #smallTalk #번역 #삽질 #신세계 #이론 #정보처리기사

Angular를 처음 접하며


홈페이지, HTML을 처음 접한 때는 대략 20년 전 인것 같다.

당시 초등학생이었던 나는 또래 사이에서 인기 절정이던 ‘’포켓몬스터아..피카츄빵“를 소개하는 홈페이지를 만들었다.

물론 오로지 HTML만을 이용해서.

메뉴와 본문 페이지를 구분하기 위해 <frame>태그를 써서 화면을 분할하곤 했었는데,

20년이 지난 지금 다시 만난 웹페이지는 그때와 너무 다르다.

페이지 내부에 다른 페이지를 불러오고 한 번 로드된 페이지가 계속해서 또 새로운 정보와 함께 로드된다.

특히 최근 공부하기 시작한 Angular는 이 모든걸 가능하게 하는 정말 굉장한 녀석이다.

새로운 기술을 접할 때 가장 먼저 드는 호기심은 두 가지,

  • 이건 왜 쓰는거지?
  • 어떻게 구성되어 있고 어떻게 작동하는거지?

    지금까지 이해한 선에서 내리는 답은

  1. 사용자로 하여금 정보를 찾아 여러 페이지를 ‘탐험’하게 하지 않고,

    하나의 페이지에서 원하는 정보를 얻을 수 있도록 하기 위해.

    (하나의 페이지에서 특정 요청에 필요한 부분이 실시간으로 바뀜, 살아 움직이는 것 같음)

  2. 하나의 페이지로 구성되어 있으니 묶어서 따로 활용하기도 좋다.

    고로 다른 APP에서 재활용하기 위해서.

Angular의 구성요소는 View, Component, Template 등 몇 가지가 더 있지만,

현재 이해한 부분은 View, Component, Template 세 가지임.

  1. View는 실제로 보여지는 페이지 화면이다.

    Component는 View를 채우는 실질적인 화면의 주인임.

    하나의 페이지에 기능이나 목적에 따라 구분된 복수의 Component들이 존재할 수 있음.

    ex) 로그인과 관련된 Component, 메뉴, 게시판, 댓글 등과 각각 관련된 Component가 모여서

    하나의 페이지를 이룸.

  2. 하나의 Component는 해당 Component의 로직을 담는 Typescript 파일과

    ‘해당 Component의’ View를 담는 Html 파일을 갖고 있음.

    만약 10개의 Component로 구성된 페이지가 있다면,

    그 페이지는 하나의 html파일이 아니라 10개의 작은 html이 모여서 이루어진 것임.

    즉, Component의 View를 모아서 하나의 페이지에 담으면 전체 페이지의 View가 완성됨.

  3. Component와 Component의 View는 서로 연결되어 있어서

    (Typescript의 변수나 함수를 html에서 불러올 수 있음! 물론 그 역도 가능)

    서로 Data를 주고 받는다. (Binding이라는 용어를 씀)

    JavaScript event나 input 태그 값 입력 등으로 Component에 변화가 생기면 View도 변한다.

    View가 변하면 Component도 변한다.

    그리고 이 변화를 Angular는 실시간으로 Rendering한다.

    그 결과 사용자는 실시간으로 변화하는 페이지를 경험한다.


#정말 #어썸#awesome #릿#lit함 #이걸 누가 개발했지 #구글

#신세계