한국어

AngularJS 튜토리얼

AngularJS 애플리케이션

AngularJS - 개요

안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 AngularJS의 세계로 흥미로운 여정을 떠납니다. 프로그래밍에 새로운 사람이라고 걱정하지 마세요 - 저는 당신의 친절한 안내자가 될 것이며, 단계별로 함께 나아갈 것입니다. 이 튜토리얼의 끝에 다다를 때, 당신은 AngularJS에 대해 확고한 이해를 가질 것입니다. 그럼 시작해보겠습니다!

AngularJS - Overview

일반 기능

AngularJS는 웹 개발의 스위스 아rmy 나이프와도 같습니다. 이 강력한 JavaScript 프레임워크는 우리가 쉽게 동적 웹 애플리케이션을 구축할 수 있도록 도와줍니다. 당신이 집을 짓는 것을 상상해보세요 - AngularJS는 아름답고 기능적인 구조를 만들기 위한 모든 도구와 설계도를 제공합니다.

다음은 AngularJS를 돋보이게 만드는 일반적인 기능입니다:

  1. 모델-뷰-컨트롤러(MVC) 아키텍처: 이 것은 잘 정리된 도구 상자 같습니다. 애플리케이션의 데이터(모델), 사용자 인터페이스(뷰), 비즈니스 로직(컨트롤러)를 분리하는 데 도움이 됩니다.

  2. 양방향 데이터 바인딩: 이 것은 마법의 거울 같습니다. 한쪽에서 무언가를 변경하면 다른 쪽에서 자동으로 업데이트됩니다!

  3. 의존성 주입: 이 것은 필요할 때마다 정확하게 필요한 것을 가져다주는 개인 비서와 같습니다.

  4. 디렉티브: 이 것은 AngularJS에게 어떻게 행동해야 할지 지시하는 특별한 지시입니다. 이미 지능적인 개에게 새로운 기술을 가르치는 것과도 같습니다!

다음 예제를 통해 이러한 기능을 몇 가지 살펴보겠습니다:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>My First AngularJS App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>Hello, {{name}}!</h1>
<input type="text" ng-model="name">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
$scope.name = 'World';
});
</script>
</body>
</html>

이 예제에서 우리는 MVC 아키텍처(ng-app, ng-controller), 양방향 데이터 바인딩(ng-model), 그리고 간단한 디렉티브(ng-controller)를 사용하고 있습니다. 입력 필드에 글을 쓰면 인사가 실시간으로 업데이트됩니다. 마법이죠?

핵심 기능

이제 발길을 더 깊숙이 들어가서 AngularJS의 핵심 기능을 탐구해보겠습니다:

  1. 스코프: 이 것은 애플리케이션을 이어주는 점이며, 모델 데이터가 존재하는 곳입니다.

  2. 컨트롤러: 이 것은 애플리케이션의 뇌와도 같습니다. 여기서 행동을 정의합니다.

  3. 表达式: 이 것은 HTML에 직접 삽입할 수 있는 작은 코드 조각입니다.

  4. フィル터: 이 것은 데이터를 원하는 대로 형식화할 수 있는 데이터 변환기입니다.

다음 예제에서 이러한 기능을 살펴보겠습니다:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS Core Features</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>Hello, {{name | uppercase}}!</h1>
<p>Your favorite fruit is: {{fruit}}</p>
<button ng-click="changeFruit()">Change Fruit</button>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
$scope.name = 'World';
$scope.fruit = 'Apple';
$scope.changeFruit = function() {
$scope.fruit = 'Banana';
};
});
</script>
</body>
</html>

이 예제에서 우리는 스코프($scope), 컨트롤러(MyController), 표현식({{name}}), 그리고 필터(| uppercase)를 사용하고 있습니다. 버튼을 클릭하면 데이터가 변경됩니다.

개념

AngularJS의 몇 가지 중요한 개념을 분해해보겠습니다:

  1. 모듈: 이 것은 애플리케이션의 다른 부분을 담는 컨테이너입니다. 코드를 조직하는 데 도움이 됩니다.

  2. 서비스: 이 것은 애플리케이션全体에서 재사용할 수 있는 코드 조각입니다.

  3. 디렉티브: 이 것은 앞서 언급했지만, 너무 중요하여 다시 강조할 만합니다. HTML의 기능을 확장합니다.

  4. 템플릿: 이 것은 특별한 AngularJS 마크업을 포함한 HTML 파일입니다.

다음 예제에서 이러한 개념을 보여드리겠습니다:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS Concepts</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>{{greeting}}</h1>
<button ng-click="sayHello()">Say Hello</button>
</div>

<script>
var app = angular.module('myApp', []);

app.service('GreetingService', function() {
this.getGreeting = function() {
return "Hello, AngularJS!";
};
});

app.controller('MyController', function($scope, GreetingService) {
$scope.sayHello = function() {
$scope.greeting = GreetingService.getGreeting();
};
});
</script>
</body>
</html>

이 예제는 모듈(myApp), 서비스(GreetingService), 의존성 주입을 사용한 컨트롤러, 그리고 AngularJS 마크업을 포함한 템플릿을 보여줍니다.

AngularJS의 장점

AngularJS는 다음과 같은 많은 장점을 가지고 있습니다:

  1. 학습이 쉽다: 직관적인 구조로 초보자에게 친화적입니다.

  2. 재사용 가능한 컴포넌트: 한 번 작성하면 여러 번 사용할 수 있습니다!

  3. 테스트가 간편하다: AngularJS는 테스트를 염두에 두고 설계되었습니다.

  4. 커뮤니티 지원: 활발한 커뮤니티 덕분에 도움이 항상 손쉽게 찾을 수 있습니다.

AngularJS의 단점

하지만 모든 도구가 그렇듯, AngularJS도 도전 과제가 있습니다:

  1. 성능 문제: 복잡한 애플리케이션은 가끔 느리게 실행될 수 있습니다.

  2. 학습 곡선: 시작은 쉽지만, 완벽하게 습得하는 데는 시간이 필요합니다.

  3. 버전 간의 변화: 버전 간의 중요한 변화는 도전적일 수 있습니다.

AngularJS 디렉티브

디렉티브는 AngularJS의 비밀 재료입니다. 디렉티브를 사용하면 재사용 가능한 컴포넌트를 만들고 HTML의 기능을 확장할 수 있습니다. 다음은 몇 가지 일반적인 디렉티브의 표입니다:

디렉티브 설명
ng-app AngularJS 애플리케이션을 초기화합니다
ng-controller 애플리케이션에 컨트롤러를 지정합니다
ng-model 입력을 속성에 바인딩합니다
ng-repeat 컬렉션의 각 항목에 대해 요소를 반복합니다
ng-click 클릭 행동을 지정합니다
ng-show 요소를 표시하거나 숨김합니다
ng-hide 요소를 숨기거나 표시합니다
ng-if DOM에서 요소를 제거하거나 생성합니다
ng-class 동적으로 하나 이상의 CSS 클래스를 바인딩합니다
ng-style 동적 스타일을 적용합니다

다음 예제에서 이러한 디렉티브를 몇 가지 살펴보겠습니다:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS Directives</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<style>
.red { color: red; }
.bold { font-weight: bold; }
</style>
</head>
<body>
<div ng-controller="MyController">
<h1 ng-class="{red: isRed, bold: isBold}">Hello, AngularJS!</h1>
<button ng-click="toggleRed()">Toggle Red</button>
<button ng-click="toggleBold()">Toggle Bold</button>

<h2>My Fruits:</h2>
<ul>
<li ng-repeat="fruit in fruits">{{fruit}}</li>
</ul>

<input type="text" ng-model="newFruit">
<button ng-click="addFruit()">Add Fruit</button>

<p ng-show="fruits.length > 3">You have a lot of fruits!</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
$scope.isRed = false;
$scope.isBold = false;
$scope.fruits = ['Apple', 'Banana', 'Orange'];

$scope.toggleRed = function() {
$scope.isRed = !$scope.isRed;
};

$scope.toggleBold = function() {
$scope.isBold = !$scope.isBold;
};

$scope.addFruit = function() {
if($scope.newFruit) {
$scope.fruits.push($scope.newFruit);
$scope.newFruit = '';
}
};
});
</script>
</body>
</html>

이 예제는 여러 디렉티브: ng-class, ng-click, ng-repeat, ng-model, 그리고 ng-show을 보여주고 있습니다. 이 디렉티브를 사용하여 몇 줄 코드로 동적이고 상호작용적인 웹 애플리케이션을 만들 수 있습니다.

그럼으로서 AngularJS의 독특한 여정을 마치고 있습니다. AngularJS를 배우는 가장 좋은 방법은 직접 만들어보는 것입니다. 이 예제를 실험하고 자신만의 것을 만들어보세요. 행복한 코딩, 미래의 AngularJS 마스터 여러분!

Credits: Image by storyset

이전 튜토리얼:
AngularJS - 홈
다음 튜토리얼:
AngularJS - 환경 설정