AngularJS란 무엇입니까? Archi구조, 특징 및 장점

작성자 : 제임스 하트만 제임스 하트만
Hours 업데이트

⚡ 스마트 요약

이 글에서는 AngularJS의 소개, 아키텍처 및 기능을 초보자를 위해 설명합니다. 모델-뷰-무엇(MVW) 디자인, 양방향 데이터 바인딩, 디렉티브, 실행 가능한 애플리케이션 우선 설계, 그리고 모든 팀이 알아야 할 2021년 12월 장기 지원 종료에 대한 내용까지 다룹니다.

  • 🧩 정의: AngularJS는 오픈 소스입니다. Java스크립트 프레임워크 Google 단일 페이지 애플리케이션 구축용.
  • 🏗️ Archi강의: 이 프레임워크는 애플리케이션을 모델, 뷰, 컨트롤러 계층으로 나누는데, 개발팀 내부에서는 이를 모델-뷰-뭐시기(Model-View-Whatever)라고 부릅니다.
  • 🔗 데이터 바인딩: 양방향 바인딩은 수동 DOM 업데이트 코드 없이 모델과 뷰를 동기화 상태로 유지합니다.
  • 🏷️ 지시어 : ng-app, ng-model, ng-bind와 같은 사용자 지정 마커는 일반 HTML에 애플리케이션 동작을 추가합니다.
  • ⚙️ 첫 번째 신청: 스크립트 태그 하나와 `ng-app` 및 `ng-controller`만 있으면 몇 분 만에 작동하는 환영 페이지를 만들 수 있습니다.
  • ⚠️ 삶의 끝: Google 2021년 12월 31일부로 장기 지원이 종료되었으므로 더 이상 보안 패치가 제공되지 않습니다.
  • 🔄 이주: 새로운 프로젝트는 최신 Angular를 대상으로 해야 하며, 기존 AngularJS 애플리케이션은 계획적인 업그레이드 경로가 필요합니다.
자세히 보기

AngularJS란 무엇인가요?

AngularJS란 무엇입니까?

AngularJS와 는 오픈 소스 모델-뷰-컨트롤러(MVC) 프레임워크로, 로 작성되었습니다. JavaScriptAngularJS는 2010년대 가장 인기 있는 웹 프레임워크 중 하나였으며, 개발에 사용되었습니다.ping 주로 단일 페이지 애플리케이션(SPA)에 사용됩니다. 이 프레임워크는 개발자 그룹에 의해 개발되었습니다. Google 자체.

전폭적인 지지 덕분에 Google 다양한 커뮤니티 포럼의 아이디어를 반영하여 프레임워크는 활발하게 사용되는 동안 지속적으로 최신 상태로 유지되었습니다. 또한 당시의 주요 개발 트렌드를 통합했기 때문에 오늘날에도 많은 실제 코드가 이 프레임워크를 기반으로 실행되고 있습니다.

⚠️ 중요: AngularJS는 지원이 종료되었습니다. Google AngularJS 1.x 버전을 2018년 7월 1일에 3년 장기 지원(LTS) 기간에 포함시켰고, 코로나19로 인해 6개월 연장했습니다. 해당 지원은 2018년 7월 1일에 종료되었습니다. 31 12월 2021버전 1.8.3이 최종 릴리스입니다. Google 더 이상 버그 수정이나 보안 패치가 제공되지 않습니다. 기존 시스템을 유지 관리하려면 AngularJS를 배우고 최신 기술을 선택하세요. 모난 새로운 것에 대해서.

용어에 관한 한 가지 사항을 미리 정리해 두는 것이 좋습니다. AngularJS는 MVC 프레임워크로 널리 알려져 있으며, 이는 유용한 출발점입니다. 하지만 AngularJS 개발팀 자체는 다른 명칭을 선호합니다. MVW(모델-뷰-기타 등등)런타임 동작이 기존 MVC 패턴보다 Model-View-ViewModel 패턴에 더 가깝기 때문입니다. AngularJS 문서 이를 동적 웹 애플리케이션을 위한 구조적 프레임워크라고 부릅니다. 이제 그 점을 명확히 했으니, 각 구성 요소가 어떻게 결합되는지 살펴보겠습니다.

AngularJS와 Archi강의

AngularJS는 MVC 아키텍처를 따릅니다. MVC 프레임워크의 다이어그램은 아래와 같습니다.

AngularJS와 Archi강의

AngularJS와 Archi강의 다이어그램

세 계층 각각은 명확한 역할을 가지고 있습니다.

  • 컨트롤러는 비즈니스 로직이 포함된 레이어를 나타냅니다. 사용자 이벤트는 컨트롤러 내부에 저장된 기능을 트리거합니다. 사용자 이벤트는 컨트롤러의 일부입니다.
  • 뷰는 최종 사용자에게 제공되는 프레젠테이션 레이어를 나타내는 데 사용됩니다.
  • 모델은 데이터를 표현하는 데 사용됩니다. 모델의 데이터는 기본 선언만 있는 것처럼 간단할 수 있습니다. 예를 들어, 학생 애플리케이션을 유지 관리하는 경우 데이터 모델은 학생 ID와 이름만 있을 수 있습니다. 또는 구조화된 데이터 모델을 사용하여 복잡할 수도 있습니다. 자동차 소유 애플리케이션을 유지 관리하는 경우 엔진 용량, 좌석 수 등의 측면에서 차량 자체를 정의하는 구조를 가질 수 있습니다.

실제로 컨트롤러가 뷰에 데이터를 수동으로 푸시하는 경우는 드뭅니다. AngularJS는 모델을 감시하고 뷰를 자동으로 새로 고쳐주며, 이러한 자동 동기화는 다음에 설명할 기능 세트를 통해 구현됩니다.

AngularJS의 특징

AngularJS는 다음과 같은 주요 기능을 갖추고 있어 시장에서 가장 강력한 프레임워크 중 하나로 손꼽힙니다.

  1. MVC – 프레임워크는 다음과 같은 유명한 개념을 기반으로 구축되었습니다. MVC(모델-뷰-컨트롤러). 이는 현대의 모든 웹 애플리케이션에 사용되는 디자인 패턴입니다. 이 패턴은 비즈니스 논리 계층, 데이터 계층 및 프레젠테이션 계층을 별도의 섹션으로 분할하는 것을 기반으로 합니다. 각 섹션을 더 쉽게 관리할 수 있도록 섹션을 여러 섹션으로 나누었습니다.
  2. 데이터 모델 바인딩 - HTML 컨트롤에 데이터를 바인딩하기 위해 특별한 코드를 작성할 필요가 없습니다. AngularJS를 사용하면 몇 가지 코드 조각만 추가하면 이 작업을 수행할 수 있습니다.
  3. 적은 코드 작성 – DOM 조작을 많이 할 때 JavaScript 과거에는 어떤 애플리케이션을 설계하든 코드를 작성해야 했습니다. 하지만 AngularJS를 사용하면 DOM 조작에 필요한 코드의 양이 놀라울 정도로 줄어듭니다.
  4. 단위 지원 준비 완료 – 디자이너들은 Google AngularJS를 개발했을 뿐만 아니라 AngularJS 애플리케이션의 단위 테스트를 설계하는 데 도움이 되는 "Karma"라는 테스트 프레임워크도 개발했습니다.
  5. 지시어 – 마커(예: ...) ng-app, ng-model 및 ng-repeat 일반 HTML 요소에 동작을 추가합니다.

이러한 기능은 직접 실행해 보면 가장 쉽게 이해할 수 있으므로, 다음 섹션에서는 처음부터 작동하는 페이지를 만들어 보겠습니다.

놓치지 마세요 :

AngularJS 설정 및 첫 번째 애플리케이션 구축 방법

데이터 바인딩에 대해 읽는 것과 실제로 작동하는 모습을 보는 것은 완전히 다른 경험입니다. AngularJS는 패키지 관리자, 번들러, 컴파일러가 필요 없으므로 첫 번째 애플리케이션은 하드 디스크에서 바로 실행되는 단일 HTML 파일로 구성됩니다.

1단계) AngularJS 라이브러리를 추가합니다.

하나의 스크립트 태그로 CDN에서 라이브러리를 로드하세요. AngularJS의 최종 릴리스 버전이 1.8.3이므로 페이지를 해당 버전으로 고정하고 여러 버전으로 분산시키지 마세요.

2단계) 애플리케이션 루트에 ng-app을 표시합니다.

`ng-app` 지시어는 AngularJS 컴파일러에게 페이지의 어느 부분을 담당하는지 알려줍니다. `<html>` 태그에 이 지시어를 넣으면 전체 문서를 프레임워크에 넘겨주게 되며, 지정하는 값은 생성할 모듈의 이름을 나타냅니다.

3단계) ​​ng-model과 표현식을 사용하여 데이터를 바인딩합니다.

`ng-model` 디렉티브는 입력 요소를 스코프의 속성에 바인딩하고, 이중 중괄호 표현식은 페이지의 다른 위치에 동일한 속성을 출력합니다. 바인딩은 양방향이기 때문에,ping 상자 안의 내용은 별도의 이벤트 핸들러 없이 즉시 제목을 업데이트합니다.

4단계) 로직을 위한 컨트롤러를 추가합니다.

컨트롤러는 단순한 것입니다. Java`$scope` 객체를 받아 초기값을 설정하는 스크립트 함수입니다. 이 함수를 모듈에 등록하면 `ng-controller` 디렉티브에서 사용할 수 있습니다.

<!DOCTYPE html>
<html ng-app="helloApp">
<head>
  <meta charset="UTF-8">
  <title>AngularJS Hello World</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
</head>
<body>

  <div ng-controller="GreetController">
    <input type="text" ng-model="name" placeholder="Enter your name">
    <h3>Hello {{ name }}!</h3>
  </div>

  <script>
    // Step 1: create the module named in ng-app
    angular.module("helloApp", [])
      // Step 2: register a controller on that module
      .controller("GreetController", function ($scope) {
        $scope.name = "World";
      });
  </script>
</body>
</html>

5단계) 페이지를 실행하고 결과를 확인합니다.

파일을 index.html로 저장하고 아무 브라우저에서 열어보세요. 처음에는 제목이 "Hello World!"로 표시되고, 키를 누를 때마다 제목이 새로 고쳐집니다. 웹 서버나 빌드 과정은 전혀 필요하지 않습니다.

아무것도 표시되지 않으면 브라우저 콘솔을 열고 CDN 스크립트가 로드되었는지, 그리고 ng-app 내부의 모듈 이름이 angular.module에 전달된 이름과 정확히 일치하는지 확인하십시오. 이름이 일치하지 않으면 오류 메시지 없이 실패합니다. 이 작은 페이지만으로도 다음에 설명할 장점들을 확인할 수 있습니다.

AngularJS의 장점

AngularJS의 장점은 다음과 같습니다.

  • 오픈 소스 프레임워크이므로 오류나 문제가 발생할 가능성이 매우 낮을 것으로 예상됩니다.
  • 양방향 바인딩 – AngularJS는 데이터와 프레젠테이션 레이어를 동기화 상태로 유지합니다. 추가적인 코드를 작성할 필요가 없습니다. JavaHTML 코드와 데이터 레이어의 데이터를 동기화 상태로 유지하는 스크립트 코드입니다. AngularJS는 이 작업을 자동으로 수행해 줍니다. 모델의 어느 부분에 어떤 컨트롤이 바인딩될지만 지정하면 됩니다.
  • 라우팅 – AngularJS는 라우팅, 즉 한 뷰에서 다른 뷰로의 이동을 처리할 수 있습니다. 이는 단일 페이지 애플리케이션(SPA)의 핵심적인 기본 요소입니다. SPA를 사용하면 사용자의 상호 작용에 따라 웹 애플리케이션의 다양한 기능으로 이동하면서도 항상 같은 페이지에 머무를 수 있습니다.
  • AngularJS는 테스트를 지원합니다. 단위 테스트예산 및 통합 테스팅.
  • AngularJS는 디렉티브라고 하는 자체 요소를 제공하여 HTML을 확장합니다. 간단히 말해, 디렉티브는 DOM 요소(속성, 요소 이름, 주석 또는 CSS 클래스 등)에 대한 마커로서, AngularJS HTML 컴파일러에게 해당 DOM 요소에 지정된 동작을 적용하도록 지시합니다. 이러한 디렉티브를 통해 기존 HTML 요소의 기능을 확장하여 웹 애플리케이션에 더 많은 기능을 제공할 수 있습니다.

AngularJS의 장점

AngularJS의 장점

균형 잡힌 시각 또한 매우 중요하므로, 다음으로는 장단점을 살펴보겠습니다.

AngularJS의 단점 및 한계

모든 프레임워크는 어떤 면에서는 타협을 통해 얻는 것이 있으며, AngularJS도 예외는 아닙니다. 다음은 AngularJS 애플리케이션을 유지 관리하는 팀에서 가장 자주 보고되는 제약 사항입니다.

  • 자체적인 보안 계층이 없음 AngularJS는 인증이나 권한 부여 기능을 제공하지 않으므로, 두 가지 모두 서버에서 처리해야 합니다.
  • 총 의존성 Java스크립트 방문자가 기능을 비활성화하는 경우 Java스크립트가 실행되면 페이지는 기본 마크업만 표시되고 렌더링되지 않습니다.
  • 소화 사이클 성능 – 변경 사항은 감시 값을 반복적으로 비교하여 감지되므로, 수천 개의 바인딩이 있는 페이지는 속도가 느리게 느껴질 수 있습니다.
  • 가파른 학습 곡선 범위, 지침, 공장, 서비스 및 제공업체가 중복되는 경우가 많으며, 동일한 결과를 달성하는 데 여러 가지 방법이 존재할 수 있습니다.
  • 검색 엔진 가시성 – 뷰는 브라우저에서 구성되므로 크롤러가 페이지를 안정적으로 색인화하려면 사전 렌더링과 같은 추가 작업이 필요합니다.
  • 더 이상의 업데이트는 없습니다. 2021년 12월 31일 이후로는 공식 패치가 존재하지 않으므로, 새로 발견된 취약점은 상용 벤더가 수정 패치를 제공하지 않는 한 해결되지 않은 상태로 남아 있습니다.

마지막 지점 때문에 대부분의 팀은 후속 프레임워크를 사용하게 되는데, 이름은 같지만 완전히 다른 제품입니다.

AngularJS와 Angular의 차이점은 무엇일까요?

AngularJS와 Angular는 이름이 매우 비슷해서 자주 혼동되지만, 서로 다른 언어, 아키텍처 및 릴리스 버전을 사용하는 별개의 프레임워크입니다. AngularJS는 이 페이지에서 설명하는 1.x 시리즈만을 지칭합니다. Angular는 2016년에 완전히 재작성되어 현재까지 활발하게 개발되고 있는 버전 2와 그 이후의 모든 버전을 의미합니다. Code 의도적인 이주 작업 없이는 그 사이를 이동하지 않습니다.

비교의 기초 AngularJS (1.x) 앵귤러(2 이상)
Language JavaScript TypeScript
빌딩 블록 컨트롤러 및 범위 구성 요소 및 클래스
아키텍처 MVC / MVW 구성 요소 기반
모바일 지원 모바일 기기용으로 설계되지 않았습니다. 모바일 지원 기능 내장
의존성 주입 문자열 기반이며, 여러 가지 구문이 있습니다. 계층적, 유형 기반
명령줄 도구 제공되지 않음 앵귤러 CLI
지원 상태 2021년 12월 31일 종료 적극적으로 유지 관리됨

실질적인 결과는 AngularJS 컨트롤러를 Angular 프로젝트에 단순히 추가할 수 없다는 것입니다. 마이그레이션은 각 컨트롤러를 컴포넌트로 다시 작성해야 하므로 업그레이드가 아닌 실제 엔지니어링 작업으로 계획해야 합니다. 요컨대, AngularJS는 유지보수 기술로, Angular는 새로운 개발을 위한 플랫폼으로 생각해야 합니다.

자주 묻는 질문

Google 그 이상의 지원은 제공하지 않습니다. 상업용 확장 지원은 다음과 같은 판매업체에서 판매합니다. 히어로데브스이 서비스는 즉시 마이그레이션할 수 없는 조직을 위해 보안 패치를 제공합니다. 나머지 조직은 자체적으로 보안 패치를 마련해야 합니다.

네, 반복적인 부분에 대해서는요. 예를 들어, 보조 인력들이요. GitHub 부조종사 컨트롤러를 컴포넌트로, $scope를 클래스 속성으로 빠르게 변환합니다. Archi구조 결정, 라우팅 및 상태 설계에는 여전히 사람의 검토가 필요합니다.

단위 테스트는 일반적으로 다음에서 실행됩니다. 업 과 재스민 속 어설션을 위한 것입니다. 둘 다 AngularJS와 함께 개발되었으며, ngMock 모듈은 컨트롤러를 독립적으로 테스트할 수 있도록 가짜 서비스를 제공합니다.

일반적으로는 그렇습니다. AngularJS가 학습 데이터에 많이 포함되어 있기 때문입니다. 흔히 발생하는 문제는 버전 불일치입니다. 모델이 최신 Angular 구문을 사용하는 경우가 많습니다. 프롬프트에 1.x 버전을 명시적으로 지정하고 생성된 모든 코드 조각을 확인하십시오.

AngularJS 1.8.3은 해당 회사에서 발표한 최신 릴리스입니다. Google1.2 또는 1.6 버전을 참조하는 튜토리얼은 모두 구버전이므로, 새로운 작업은 1.8.3 버전을 기준으로 진행하고 공식 문서를 참조하세요. 버전 지원 상태 페이지를 확인하시기 바랍니다.

이 게시물을 요약하면 다음과 같습니다.