Angular | 앵귤러란? / 앵귤러 장단점 / SPA(Single Page Application)

현 회사는 프론트엔드 프레임워크로 앵귤러와 타입스크립트를 사용한다. 앵귤러를 접한지 얼마 되진 않았지만.. 앵귤러를 써보며 느꼈던 가장 큰 특징은 모듈과 컴포넌트 기반으로 동작한다는 점이 가장 강렬했다.

 

Angular란?

AngularJS는 단일 페이지 애플리케이션 (SPA, Single Page Application) 방식의 프론트엔드 개발을 위한 자바스크립트 프레임 워크 (또는 라이브러리)

 

Angular 특징

• 완전한 프레임 워크로, 프로젝트의 생성, 테스트, 빌드, 배포를 위한 모든 기능을 제공한다.
• TypeScript를 사용한다.
• Angular CLI를 제공하여 개발환경을 지원한다. 파일 생성, 빌드, 패키징, 라이트 서버 기능 등 개발에 필요한 거의 모든 기능을 자체적으로 제공한다.
• 모듈과 컴포넌트 기반으로 동작한다.
• 웬만한 기능의 라이브러리는 모두 포함시켜서 자체적으로 제공한다. (라우팅, HTTP, Form 등등)
• 기본적으로는 단일 페이지 애플리케이션 (SPA, Single Page Application) 개발을 위한 프레임워크이다. 다만, Server Side Rendering을 위한 기능을 구비하고 있다.

 

모든 자바스크립트 기능들이 ng-app="모듈명"을 시작으로 모듈 단위로 관리된다.

예를 들어 회사 메인 홈페이지에서 개발자 도구를 열어보면 다음과 같이 나오는데, 상단에 app-root라 적혀있는 것을 확인할 수 있다.

 

그리고 각 페이지는 폴더로 관리가 되는데, 폴더 구조가 대부분 아래와 같았다.

a.module.ts
a.page.html
a.page.scss
a.page.spec.ts
a.page.ts

ui/ux를 수정하는 작업은 주로 page.ts를 확인하면 된다.

 

 

 

Angular 장점 / 단점

프레임워크다.

프레임워크라는 이름에 걸맞게 개발에 필요한 모든 것이 거의 갖추어져 있다. 라우팅, HTTP 등 애플리케이션 개발에 필요한 대부분의 기능들은 내부적으로 포함되어 있다. 하지만 모든 것은 정해져 있고 일반적인 앵귤러만의 패턴이 있다는 점이 단점이다. 앵귤러 스타일이 다소 강요되는 편이다. 워낙에 기본적으로 제공되는 게 많다 보니 다른 선택의 여지가 없다는 점도 있긴 하다고 한다.

유지 관리가 용이하다.

TypeScript를 통해 코드 유지 관리성을 높인다. 또한 약간의 자유도를 희생하긴 하지만, 앵귤러 스타일에 맞추어 코딩해야 하기 때문에 누가 코딩하더라도 코드의 변이가 크지 않다. 

Angulr-cli

프레임워크답게 Angular-cli를 이용한 여러 가지 편리한 기능들이 있다.

• 프로젝트 생성을 도와준다. 명령어 하나로 프로젝트를 생성하고 알아서 모든 의존성 패키지를 함께 설치해준다. 모듈/컴포넌트/디렉티브/서비스 등을 생성하는 역할 또한 Angular cli로 할 수 있다.
• 라이트 한 서버를 제공한다. 별다른 설정에 대한 노력 없이 간단하게 서버를 실행하여 개발을 진행할 수 있다. 코드를 수정하면 즉시 변경사항이 반영되어 웹페이지에서 렌더링 된다. 
• 기본적으로 Webpack을 내장하고 있으며 알아서 빌드까지 수행한다. Typescript를 컴파일하고 자바스크립트를 압축하는 것까지 자동으로 해주며, (저와 같이) 웹팩에 대한 지식이 전혀 없어도 사용 가능하다.

모바일 앱 적용 가능

Web 개발에 사용된 내용을 Native Script, Ionic을 통해 Mobile App에 적용할 수 있다. Ionic은 비즈니스 로직을 거의 90% 재활용이 가능하다. 

 

 

SPA란?

SPA는 Single Page Application의 약자로 단일 페이지 애플리케이션이다.

즉, 말 그대로 하나의 페이지로 구성된 애플리케이션이다. 사용자가 요청한 각각의 페이지를 서버가 생성해서 전달해주는 것이 아니라, 클라이언트가 동적으로 페이지를 다시 작성하는 방식이다.

 

첫 페이지 요청시 단 한 번만 리소스(HTML, CSS, JavaScript)를 로딩하고, 그 이후로는 페이지 리로딩 없이 필요한 부분만 서버로부터 받아서 화면을 갱신한다. 필요한 부분만 갱신하기 때문에 네이티브 앱에 가까운 자연스러운 페이지 이동과 사용자 경험(UX)을 제공할 수 있다.

 

 

cf.  

SPA와 대비되는 의미로 페이지 별로 서버에서 받아오는 방식에 대해서는 MPA (Multi Page Application)가 있다.

 

SPA에서는 주로 클라이언트 쪽에서 화면을 구성하므로 Client Side Rendering (CSR)으로 불리기도 합니다. MPA의 경우는 주로 서버가 화면을 구성하기 때문에 Server Side Rendering (SSR)이라고 부릅니다.

 

 

 

참고 : 

https://paperblock.tistory.com/52