[Angular] Angular란?

개요

이번에 Angular를 이용한 프로젝트를 맡게 될 수도 있어서, 처음부터 공부하려고 하는데 역시 공부하는데에는 블로그 정리가 나한테 제일 맞는 것 같아서 이제부터 계속해서 정리해보려고 한다.

 

 

1. Angular란?

 

Angular는 Google에서 개발하고 유지보수하는 프런트엔드 프레임워크로, 웹 어플리케이션을 개발하는 데 사용된다.

 

과거에 앵귤러js 라는게 있었는데 2021년 12월 31일에 서비스가 종료되었다고 한다. 암튼 이 앵귤러 js와 다르게 TypeScript로 작성된 프레임워크로 정적 타이핑을 제공하기 때문에 안정성 면에서 좋다.

 

또한, 단일 페이지 애플리케이션(SPA) 개발을 위한 강력한 구조를 제공하고, 데이터 바인딩, 컴포넌트 기반 아키텍처, 모듈 시스템 등의 기능을 포함하고 있다.

 

자세한 특징은 아래에 또 정리하겠다.

 

2. Angular 특징

1) TypeScript 기반

TypeScript는 정적 타입 검사 기능을 제공해 코드의 가독성과 유지보수성을 높이고, 최신 JavaScript 기능을 사용할 수 있도록 지원한다.

2) 컴포넌트 기반 아키텍처

애플리케이션을 독립적인 컴포넌트 단위로 나누어 개발할 수 있도록 설계되어있다. 각 컴포넌트는 HTML, CSS, TypeScript 코드로 구성되고, 이를 조합해 U를 구축할 수 있다.

3) 양방향 데이터 바인딩

모델과 뷰 간의 데이터 동기화를 자동으로 관리할 수 있는 양방향 데이터 바인딩 기능을 제공한다. 이를 통해 개발자는 데이터 변경 사항을 직접 반영할 필요 없이, 모델이 변경되면 UI가 자동으로 업데이트된다.

4) DI (Dependency Injection)

의존성 주입 시스템을 내장하고 있어, 모듈 간의 결합도를 낮추고 테스트와 유지보수를 용이하게 한다.

코드의 재사용성이 증가하고, 확장성이 뛰어난 애플리케이션을 개발할 수 있다.

5) 모듈 시스템

기능을 모듈 단위로 분리해 관리할 수 있도록 설계되었다. 이것을 통해 대규모 애플리케이션에서도 코드 관리가 용이하고, 성능 최적화에도 유리하다.

6) 라우팅 시스템

내장된 라우팅 시스템을 제공해, SPA 애플리케이션에서 URL을 기반으로 화면 전환을 쉽게 구현할 수 있다. 또한 가드 기능을 통해 특정 페이지 접근을 제한하는 보안 설정도 가능하다.

7) SSR(서버 사이드 렌더링)지원

Angular Universal을 활용해 서버 사이드 렌더링(SSR)을 지원한다. 이를 통해 SEO 성능을 향상시키고, 초기 로딩 속도를 개선할 수 있다.

 

3. 단점

1) 초기 로딩속도

SPA이기 때문에 첫 페이지를 요청할 때 리소스가 로딩되어야 해서 다소 느린 편이다.

2) 높은 학습곡선

다양한 개념(모듈, 컴포넌트, 서비스, DI, RxJS 등)이 포함되어 있어 배워야 할 것이 많다.

 

 

그래도 아직까지 프론트엔드 개발 프레임워크 Top5 안에 들만큼 많은 개발자들이 사용하기 때문에 익혀놓는다면 언젠가는 큰 도움이 될 것 같다.

그리고 대규모 애플리케이션을 개발하거나, 강력한 구조화 및 유지보수를 필요로 한다면 Angular가 좋은 선택일 수 있다!