[Angular-01]Angular와 TypesScript

JavaScript와 HTML, CSS등에 대해서는 일체 다루지 않는다.

기초지식은 다른 강의를 참조하도록 하라.

또한 Angular에서는 JavaScript로 번역되는 TypeScirpt라는 새로운 언어를 사용한다.

이 언어는 JavaScript에 Type을 추가한 언어로 좀더 객체지향적인 설계가 가능한 언어이다.

이 언어에 대해서 조금씩의 설명은 있겠지만 자세한 설명은 다루지 않을 계획이다.

필자는 아직 이 TypeScript를 강의로 제공할 생각이 없으므로 자세히 알고싶다면

https://www.typescriptlang.org/

를 참조하라.

웹이 세분화 되면서 FE(Front End) Framework는 중요하게 되었다.

과거에(사실 과거라고 하기에는 10년도 채 되지 않았지만.) FE라고 한다면 html,css,js로 이루어진 페이지를 의미했다.

지금도 뭐 그렇다. 그러나 이 세가지만으로 웹을 정의하기에는 웹이 너무 커졌다.

가령 아래의 페이지를 보자.

아래의 이미지는 인터넷에서 검색하면 쉽게 구할 수 있는 웹 채팅 템플릿이다.

보면 알겠지만 이 웹 페이지는 화면에서 중복으로 보여줘야할 템플릿은 총 3가지가 존재한다.

<div class="chat-box-left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

이 코드가 바로 채팅 대화 부분의 html코드이다.

<div class="chat-box-online-left">
    <img src="assets/img/user.png" alt="bootstrap Chat box user image" class="img-circle" />
    -  Justine Goliyad
    <br />
    ( <small>Active from 3 hours</small> )
</div>

이 코드가 온라인 유저의 목록이다.

<img src="assets/img/user.png" alt="bootstrap Chat box user image" class="img-circle" />
(@Justine)

이 코드가 newchat의 목록이다.

보면 알겠지만 이 코드들은 얼마든지 추가될 수 있고 또한 같은 목록으로 중복된다는걸 확인할 수 있다.

코드를 전체적으로 보면 현기증이 날 정도로 복잡하다.

만약 native html+css+js의 조합으로는 코드가 굉장히 복잡해지고 유지 보수및 관리가 힘들어 지는것은 당연지사이다.

이 때까지 이러한 부분은 백엔드에서 관리해왔다. 대표적인 예가 django template나 jsp의 액션태그이다.

그러다 보니 특정언어에 종속정이라는 문제점이 있었다.

그리고 백엔드에서 사용하는것과 프론트엔드에서 사용하는것은 또다른 차이점이 존재했다.

무슨 문제점이라기 보단 선택의 문제이지만 백엔드에서 템플릿을 사용하는 것은 서버의 자원을 쓰므로 서버에서 처리를 한번한다.

즉 서버에 부하가 걸린다는 뜻이다. 물론 적은 양이라면 부하라고 부를만큼 심각한 일은 아니겠지만 사용자가 많다면 문제가 될 수 있다.

그러나 프론트엔드에서(즉 자바스크립트를이용해서)사용하면 서버의 렌더링 부담은 덜해지고 클라이언트에서 렌더링을 처리하게된다.

이제  프론트엔드 프레임워크를 사용하는지는 알것이다. 프론트엔드 프레임워크는 현재 굉장히 많다.

그러나 그중에서는 크게 3종류로 귀결되는 경향이 있다.

바로 angular,react,vue이렇게 세가지 이다. 각각은 장단점이 존재한다.

그 중에서 angular는 모듈화와 체계화에 초점이 되어있다. 즉 성능은 솔직히 다른 것 보단 모자라다.

만약 소규모에 성능을 중시하고 싶다면 다른 모듈을 찾는게 더 좋을 수 있다.

단 angular도 총 2종류가 존재한다. 바로 angular1(AngularJS)와 angular2(Angular)가 존재하기 때문이다.

Anuglar4, Angular5같은 것도 존재하는데 이는 Angular2와 같다고 생각해도 무방하다.

Angular1과 Angular2는 Python2와 Python3처럼 완전 단절된 관계이다.

둘은 전혀 다른 프레임워크라 생각하고 접근해도 무방하다는 것이다.

둘 중 기업에서 쓰는 것은 Angular1이나 이제는 Angular2가 대체하게 될 것이다.

물론 Angular1을 배우고 싶다면 말리진 않겠다. 나쁘지는 않다.

그러나 필자가 할것은 Angular2가 될 것이다.

언어는 타입 스크립트라는 새로운 언어를 사용한다.

타입 스크립트는 마이크로소프트에서 만들었는데 누가 만들었는지는 사실 중요하지 않다.

타입 스크립트는 자바 스크립트가 모듈화가 힘들다는 단점을 보완하기 위해서 만들어 졌다.

자바 스크립트는 타입이 없고 클래스라는 개념이 없어서 객체지향을 하기도 힘들고 모듈화를 하기도 힘들다.

따라서 그걸 보완하기 위해서 만든게 타입스크립트이다.

단 타입스크립트는 어떠한 웹브라우저에서도 지원하지 않는다.

타입스크립트를 그냥 읽을 수 있는 방법은 없다.

그래서 타입스크립트는 자바스크립트로의 일차적인 번역이 필요하다.

자바스크립트로 번역을 해야한다는 점에서 성능 저하가 있지 않을까 걱정할 수 있지만

사실 배포되는 시점에서 빌드를 이미 한 것을 배포하기 때문에 그러한 걱정이 필요하진 않다.

사실... 굳이 자바스크립트를 안쓰고 타입스크립트를 써야할 필요가 있을까 생각이 들긴한다.

여기에는 많은 사람들이 의견이 분분하지만 결과적으로 angular를 사용할 때는 타입스크립트가 낫다로 귀결된다.

필자생각도 그러하다.. angular는 typescript를 사용할걸 전재로 하고 만들어졌기 때문이다.

npm install -g @angular/cli

angular를 설치하기 위해서는 위와 같은 명령어로 설치 해야한다.

설치하기 위해서는 npm이 설치되어있어야한다.

운영체제에 따라서 설치하는 방법이 다르다.

그러나 여기서 npm설치방법을 논하지는 않겠다.