앵귤러 기초(Angular basic) 1.앵귤러 시작하기

Angular는 웹을 구축하기 위한 프레임워크 입니다.

앵귤러를 사용하면 가벼운 웹사이트를 구축하거나, 기업에서 요구하는 수준의 제품을 구축 할 수 있습니다.

앞으로 포스팅을 통해서  그동안 프로젝트에서 해왔던 앵귤러를 정리 해보려고 합니다.

앵귤러의 구성요소, HTML배치, 데이터 바인딩, 서비스가 필요한 이유, Angular 애리케이션을 만드는 과정 등을 정리할 계획 입니다.

 

이번 포스트는 앵귤러, 자바스크립트, 타입스크립트의 기본적인 배경에 대해 이야기합니다.

Angular란 무엇인가?

 

간단히 말해 Angular는 클라이언트 측 애플리케이션을 만들기 위한 자바스크립트(javascript) 프레임워크입니다.

이렇게 만들어진 애플리케이션은 브라우저에서 실행 됩니다.

 

모두가 쉽게 접할수 있는 HTML, CSS를 사용하여 화면 인터페이스를 만들고, 자바스크립트의 확장 버전인 타입스크립트(TypeScript)로 행동을 제어  하는 코드를 작성 합니다.

다른 자바스크립트 프레임 워크도 많이 있지만, Angular를 사용하면 HTML이 더많은 것을 가능하게 만듭니다.

예를 들어 반복문 조건문을 HTML에 직접 내장 할 수있습니다수 있습니다.데이터 바인딩을 통해 데이터를 UI에 직접 연결 할 수 있습니다. Angular는 모듈화가 하여 컨텐츠를 쉽게 만들고 재사용을 가능하게 합니다.

또한 백엔드 서버와의 통신을 기본적으로 지원합니다.

 

Angular에 본격적으로 들어가기 앞서서 타입스크립트를 간단히 살펴 보겠습니다.

타입스크립트는 Angular로 코딩을 할때 사용하는 언어입니다.

그전에 타입스크립트의 조상인 자바스크립트에 대해 알아봅시다.

 

자바스크립트란?

웹용 언어로 모든 브라우저 에서 실행됩니다. 공식적으론 ECMAScript 혹은 ES라고 불립니다.

ES3는 오래된 브라우저에서 지원되었고, ES5는 대부분의 최신 브라우저에서 동작합니다.

ES6사양은 ES2015로 이름이 변경되었고, 클래스 및 화살표 함수 같은 많은 기능이 추가 되었습니다.

그 이후로 매년 새로운 버전의 사양이 출시되고 있습니다. 하지만 새로운 자바스크립트의 기능이 브라우저 에서는 아직 지원 되지 않는 경우도 많이 있습니다. 따라서 새로운 자바스크립트의 기능들을 사용하기 위해선  브라우저가 이해하는 자바스크립트 구문으로 변환하는 작업이 필요하게 됩니다.  이것을 트랜스파일 이라고 합니다.

그렇다면 타입스크립트는 무엇일까요?

 

타입 스크립트(Typescript)란?

타입스크립트는 마이크로소프트가 개발한 오픈 소스 언어입니다.

타입스크립트는 자바스크립트의 상위 집합(Super set)으로, 모든 자바스크립트의 문법이 자바스크립트 안에서 유효 합니다.

최신 자바스크립트를사용하기 전에 컴파일 작업이 필요하듯 타입스크립트로 개발된 코드는 일반 자바스크립트 코드로 변환을 해서 사용해야 합니다. 그렇게 함으로 개발자는 타입스크립트의 이점을 얻음과 동시에 브라우어도 이해하는 코드를 얻을수 있게됩니다.

타입스크립트의 주요 이점 중 하나는 모든 것에 타입(데이터 유형)을 가지고 있다는 것 입니다.  

타입을 가지게 됨에 따라 타입스크립트는 인라인 문서화, 구문 검사, 코드 탐색, 고급 리팩터링을 포함한 VSCode와 같은 IDE를 갖출 수 있게되었고 코드를 더 잘 추론할 수 있도록 도와줍니다.

또한 타입스크립트는 ES2015 클래스 기반 객체 방향 등을 구현합니다. 클래스, 인터페이스 및 상속을 구현합니다.

따라서 C#, C++ 또는 Java와 같은 객체 지향 프로그래밍 언어를 사용해 본 경험이 있는 경우 타입스크립트를 사용하는 것이 매우 자연스럽게 느껴질 수 있습니다.

 

앵귤러에서는 타입스크립트를 기본언어로 사용합니다. 따라서 위에서 언급한 타입스크립트의 장점은 앵귤러 작업시 얻어지는 장점이기도 합니다.

 

앵귤러에 대한 간략한 소개는 여기까지로 하고 다음 포스트에는 앵귤러 코딩을 위한 기본준비를 소개 하도록 하겠습니다.