[Angular] 기본 개념과 특징

🅰️ Angular 란?

Angular는 자바스크립트 프레임 워크로 사용 시 따라야 할 패키지와 규칙이 모였고 기능이 풍부하며 양방향적인 웹(Web) 사용자 인터페이스를 만들게 도와줍니다. Angular은 사용자 인터페이스를 구축하는 과정을 더 간단하고 쉽게 해줍니다. Angular 같은 프레임워크 없이 JavaScript를 쓰는 것보다요

또한 도구 및 기능의 모음이기도 합니다. 예를 들어 명령줄 인터페이스는 Angular 프로젝트 생성을 돕고 해당 프로젝트 기타 등등 프레임워크와 추가 도구 기능으로 플랫폼을 만들어 기본에서 복잡한 기업 수준의 웹 응용 프로그램까지 만들 수 있다.

왜 Angular 프레임워크를 쓰는가?

JavaScript만 쓰는 대신 특히 웹 응용 프로그램과 웹 사용자 인터페이스에 Angular 같은 솔루션이 필요 없을 수도 있다. 그러나 Angular와 같은 프레임워크는 앱이 복잡해질수록 더욱 빛납니다. 복잡한 제작 과정을 단순화 시키고 웹 사용자 인터페이스를 만들어준다.

Angular은 이 과정을 간소화해 줍니다. 사용할 때 유용한 특징과 규칙 개념을 많이 제공해줍니다. 하지만 가장 중요한 건 네가지 요소 때문일것이다.

명령 코드 대신 선언 코드를 쓴다.

• 명령 코드 대신 선언 코드를 쓸수 있다 -> 바닐라 JavaScript

바닐라 자바스크립트를 이용하면 브라우저에 실행될 모든 지시를 단계별로 작성해야 합니다. 예를 들면 DOM 요소를 확보해 어떤 조건이 맞는지 유효성을 검사해야 하고 어떤 조건이 부합되는지에 따라 DOM에서 수정할 수 있습니다. 일단 명시적으로 적고 단계별로 브라우저에 알려줘야 합니다. 앵귤러 같은 프레임워크는 변합니다. 거기서 대신 선언 코드를 씁니다. 대상 상태나 상태를 정의한다는 뜻이죠

마크업은 Angular로 잠금 해제된 특별 지시를 담고 바닐라 자바스크립트로는 안 됩니다. 브라우저는 이해 못 하겠지만 Angular로 잠금 해제돼 다양한 대상 상태를 정의할 수 있습니다. 그런 다음 논리를 써서 특정 상태를 발생에 따라 해당 상태가 활성화 되거나 해제 될 수 있게 할 수 있습니다.

1. Manage “activeTab” state property 설명: “activeTab”은 현재 활성화된 탭(사용자가 선택한 탭)을 나타내는 상태(state) 속성입니다. 이를 관리한다는 것은, JavaScript 프레임워크(예: React, Angular, Vue 등)에서 상태 관리를 통해 “어떤 탭이 활성화되었는지”를 추적하고 업데이트한다는 의미입니다.

2. Depending on “activeTab”, show different content 설명: “activeTab” 값에 따라 각기 다른 콘텐츠를 화면에 표시해야 합니다. 예를 들어, 사용자가 탭 1을 클릭하면 탭 1의 콘텐츠가 보이고, 탭 2를 클릭하면 탭 2의 콘텐츠가 보이도록 구성합니다.

3. Change “activeTab” upon click on tab element 설명: 사용자가 특정 탭을 클릭하면 “activeTab” 상태가 업데이트되도록 해야 합니다. 클릭 이벤트를 처리하여 사용자가 선택한 탭의 ID나 이름을 “activeTab” 상태로 저장하는 방식입니다.

앵귤러는 요소라는 개념을 포용하면서 분리해서 적용할수있다.

앵귤러 프레임워크는 전부는 아니지만 일부 객체 지향 프로그래밍 개념과 원리를 수용합니다. 객체 지향 프로그래밍을 알 필요도 없고 전문가가 될 필요가 없습니다.

Angular TypeScript

Angular 는 TypeScript를 사용합니다. JavaScript를 사용하면 에러 잡기가 어렵지만 TypeScript를 사용하게 되면 에러를 개발 프로세스 초기에 잡아낼 수 있습니다. 또한 코드 품질이 향상되고 코드에 오류가 줄어듭니다. 그래서 Angular에서 TypeScript를 다룬다고 보면 된다.