Angular란?
Node기반의 완전하고 독립적인 웹 프런트 프레임워크로서, 체계적이고 구조화된 개발 방법 및 환경을 제공합니다. 기존의 웹 개발은 백엔드 서버와 강 결합된 상태의 템플릿 엔진 기반의 개발 방법이 주류였습니다. 웹 개발 환경은 꾸준히 발전해 왔지만 이러한 백엔드 서버의 부가적인 요소로서의 웹 개발은 비효율 적이고, 백엔드 서버의 바운더리 안에서는 더 이상 발전하기 힘든 상황에 직면하였습니다.
Angular를 비롯한 여러 가지 프런트 프레임워크의 주요 목표 중 하나는 html, javascript, css를 통한 웹 개발 시 백엔드 개발 이상의 개발 생산성을 확보하는 것입니다. Angular를 사용하면 개발면에서 상당히 논리적이고 편리한 개발환경을 제공한다는 것을 알 수 있습니다.
뭐가 다른가?
- 웹 개발을 위한 전용 프레임워크로서, node 기반으로 서버가 실행되며 별도의 백엔드 서버의 부가 요소로서 개발환경을 구성하지 않습니다.(ex. Spring-Freemarker-tomcat) npm명령을 제공하여 쉽게 개발 환경을 구축할 수 있어 기존의 환경보다 놀라운 접근성을 제공합니다.
- html, css, typescript 파일로 구성되는 컴포넌트 생성을 통해 기능에 따라 웹 화면을 완전히 독립적으로 실행되는 모듈로 만들 수 있습니다.
- Typescript의 사용을 통해 여러 가지 이점을 가지고 개발할 수 있습니다. ( 컴파일을 통한 실행 전 오류 검출, 클래스, 인터페이스, 상속 등 객체지향 프로그래밍 지원, 타입 지정을 통해 데이터의 타입에 따른 오류 처리가 필요 없고, 타입 유추가 가능하여 컴파일 단 오류 검출이 가능.)
- 막강한 자동완성 기능을 제공하여 웹 개발 시 생산성을 향상할 수 있습니다.
- SPA(Single Page Application)을 쉽게 구현할 수 있습니다.
기존 시스템에서 바뀌는 점은?
이와같은 환경을 구성하기 위해 프론트 프레임워크를 추가로 도입해야 합니다.
하지만 현대의 서비스 대부분은 리소스를 제공하는 api 서버가 존재하고, api서버를 통해 리소스를 제공받아 android, ios앱을 개발하고 있습니다.
프런트 프레임워크의 도입은 기존의 서비스에 Web App이 추가되는 개념으로 봐야 합니다. 모든 비즈니스 로직은 리소스(api) 서버에 맡기고 웹앱에서는 api서버에서 받은 리소스를 가공하여 웹화면을 만드는데 집중합니다. Angular는 최대한 효율적으로 웹페이지를 개발할 수 있도록 환경을 제공하는 프레임워크라고 보면 됩니다.
Angular version1, version2
Angular는 버전 1,2가 많은 부분 차이가 납니다. 현재는 Angular2 버전이 주류이며 여기서는 버전 2 기준 내용을 다룰 예정입니다. 또한 2 버전은 리비전이 2.x로 구분되지 않고 Major버전이 올라가는 형태입니다. 즉 Angular8은 Angular2의 8번째 업데이트 버전이라고 보면 됩니다.
Angular 환경 구축
Node 설치
Windows는 아래 링크에서 다운로드 받아 설치합니다.
https://nodejs.org/ko/
Mac은 Homebrew를 설치하고 Node를 설치합니다.
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" $ brew install node
angular 관련 라이브러리 설치
npm 명령어를 통해 아래 라이브러리를 설치합니다.
$ npm init. // 환경 초기화 $ npm install -g typescript $ npm install -g @angular/cli
angular 기본 명령어
project 생성
ng new 프로젝트명(소문자와 ‘-‘만 이용하여 생성)
ex) $ ng new hello-angular
component 생성
ng generate component 컴포넌트명(소문자와 ‘-‘만 이용하여 생성)
ex) $ ng g c guide
service 생성
ng generate service 서비스명(소문자와 ‘-‘만 이용하여 생성)
ex) $ ng g s connector
서버 실행
$ ng serve or npm start
웹페이지 확인
브라우저에서 localhost:4200 입력하여 확인 가능
IDE 설치
여기서는 VSCode를 사용합니다. https://code.visualstudio.com/ 에서 다운로드 받아 설치합니다.
vscode extension 설치
Angular Language Service
Angular v버전 Snippets ( ex. Angular v5 Snippets )
Angular v버전 TypeScript Snippets ( ex. Angular v4 TypeScript Snippets )
Auto import
GitHub
vscode Tips
터미널에서 프로젝트 디렉토리를 vscode에 바로 추가하기
Mac의경우 command + shift + p 눌러 pallet 호출하고 code 검색한다음 Shell Command Install ‘code’ command in PATH 선택하여 적용합니다. 적용 후 터미널에서 프로젝트 디렉토리로 이동한 다음 code . 을 입력하면 vs code가 실행되면서 해당 프로젝트가 로드됩니다.
터미널 여러개 띄우기
터미널 오른쪽 + 눌러서 새로운 터미널을 추가하면 여러개의 터미널을 사용할 수 있습니다.
vscode 단축키 (윈도우 기준)
찾아 바꾸기 : ctrl + H
한줄 선택 : ctrl + L
한줄 복사 : shift + alt + down(up)
한줄 삭제 : ctrl + shift + K
설정 화면 : crtl + ,
Extension 열기 : ctrl+shift+X
파일 찾기 : ctrl + p
vscode내에서 anguar Tip
태그 어트리뷰트 자동완성
위에서 extension을 설치하였을 경우 a- 타이핑하면 자동완성 가능한 내용 선택가능합니다. 선택시 디폴트 포맷 형태의 어트리뷰트를 빠르게 생성할수 있습니다. ex) a-ng 입력시 ngIf, ngFor등을 보여주고 선택하면 자동완성 됩니다.
html tag 자동완성
tag를 >로 이어서 작성하고 엔터를 치면 자동완성 됩니다.
ex) table>tr>td*2
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
