AngularJS - 컨트롤러: 초보자 가이드

안녕하세요, 웹 개발자 지망생 여러분! 오늘 우리는 AngularJS 컨트롤러의 흥미로운 세상으로 뛰어들어 보겠습니다. 프로그래밍에 처음이라도 걱정하지 마세요 - 이 여정에서 여러분의 친절한 안내자로서 모든 것을 단계별로 설명해 드릴 것입니다. 그럼 커피 한 잔을 들고, 시작해 보겠습니다!

AngularJS - Controllers

AngularJS 컨트롤러는 무엇인가요?

코드로 들어가기 전에, AngularJS에서 컨트롤러가 무엇인지 이해해 보겠습니다. 컨트롤러를 애플리케이션의 뇌라고 생각해 보세요. 그들은 웹 페이지의 데이터와 행동을 관리하는 역할을 합니다. 교통 관제자가 차량의 흐름을 관리하는 것처럼, AngularJS 컨트롤러는 애플리케이션 내의 데이터 흐름을 관리합니다.

컨트롤러의 역할

AngularJS의 컨트롤러는 다음과 같은 중요한 목적을 가집니다:

$scope 객체의 데이터를 초기화합니다.
$scope 객체에 행동을 추가합니다.
뷰(사용자가 본다)와 모델(데이터) 사이의 다리 역할을 합니다.

이제 AngularJS에서 컨트롤러를 만들고 사용하는 방법을 보겠습니다.

첫 AngularJS 컨트롤러

간단한 예제로 발을 담그보겠습니다.

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>내 첫 AngularJS 컨트롤러</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyFirstController">
<h2>{{ greeting }}</h2>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('MyFirstController', function($scope) {
$scope.greeting = "Hello, AngularJS!";
});
</script>
</body>
</html>

이를 해부해 보겠습니다:

ng-app="myApp"를 사용하여 AngularJS 애플리케이션을 정의합니다.
ng-controller를 사용하여 MyFirstController 컨트롤러를 생성합니다.
JavaScript에서 컨트롤러를 정의하고 $scope에 greeting 속성을 설정합니다.
HTML에서 {{ greeting }}을 사용하여 greeting의 값을 표시합니다.

이 코드를 실행하면 "Hello, AngularJS!"가 페이지에 표시됩니다. 흥미롭지 않나요?

컨트롤러에 행동 추가하기

컨트롤러는 데이터를 표시하는 것뿐만 아니라 애플리케이션에 행동을 추가할 수도 있습니다. 더 상호작용적인 예제를 만들어 보겠습니다:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>인터랙티브 AngularJS 컨트롤러</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="CounterController">
<h2>Count: {{ count }}</h2>
<button ng-click="increment()">증가</button>
<button ng-click="decrement()">감소</button>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('CounterController', function($scope) {
$scope.count = 0;

$scope.increment = function() {
$scope.count++;
};

$scope.decrement = function() {
$scope.count--;
};
});
</script>
</body>
</html>

이 예제에서:

CounterController를 생성하고 count 변수를 0으로 초기화합니다.
increment()과 decrement() 함수를 정의합니다.
ng-click를 사용하여 이 함수들을 버튼 클릭에 연결합니다.

이제 "증가" 버튼을 클릭하면 카운트가 증가하고, "감소" 버튼을 클릭하면 카운트가 감소합니다. 웹 페이지에 작은 계산기를 가지고 있는 것 같지 않나요!

폼과의 작업

컨트롤러는 폼과의 작업에서 특히 유용합니다. 사용자를 환영하는 간단한 폼을 만들어 보겠습니다:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS 폼 컨트롤러</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="GreetingController">
<form ng-submit="greet()">
<input type="text" ng-model="name" placeholder="이름을 입력하세요">
<button type="submit">나를 환영해!</button>
</form>
<h2>{{ greeting }}</h2>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('GreetingController', function($scope) {
$scope.name = '';
$scope.greeting = '';

$scope.greet = function() {
if ($scope.name) {
$scope.greeting = 'Hello, ' + $scope.name + '!';
} else {
$scope.greeting = '이름을 입력하세요.';
}
};
});
</script>
</body>
</html>

이 예제에서:

ng-model="name"를 사용하여 입력 필드를 $scope의 name 속성에 연결합니다.
폼이 제출될 때 greet() 함수가 호출됩니다.
이름이 입력되면 개인 맞춤형 환영 문구를 만들고, 그렇지 않으면 이름을 입력하도록 요청합니다.

이 예제는 컨트롤러가 사용자 입력을 처리하고 뷰를 갱신하는 방법을 보여줍니다.

컨트롤러 메서드

우리가 사용한 주요 메서드를 요약해 보겠습니다:

메서드	설명
`$scope.variableName`	뷰에서 접근할 수 있는 변수를 정의합니다
`$scope.functionName = function() {...}`	뷰에서 호출할 수 있는 함수를 정의합니다
`ng-click="functionName()"`	요소가 클릭될 때 함수를 호출합니다
`ng-model="variableName"`	입력 필드를 컨트롤러의 변수에 바인딩합니다
`ng-submit="functionName()"`	폼이 제출될 때 함수를 호출합니다

결론

축하합니다! 여러분은 AngularJS 컨트롤러의 세상으로 첫 걸음을 내딛었습니다. 컨트롤러를 만들고, 행동을 추가하며, 폼을 작동하는 기본을 다루었습니다. 기억하시라, 연습이 완성을 이루는 열쇠입니다. 그러니 두려워 말고 이 개념들을 실험해 보세요.

제 경험에 따르면, 실제로 만들어 보는 것이 가장 좋은 학습 방법입니다. 그래서 여러분에게 재미있는 도전을 제안합니다: 컨트롤러에 대해 배운 것을 사용하여 간단한 할 일 목록 애플리케이션을 만들어 보세요. 먼저 아이템을 추가하고, 그 다음 완료 표시를 추가하거나 아이템을 삭제하는 기능을 구현해 보세요.

AngularJS 여정을 계속하면서, 컨트롤러가 빙산의 일각에 불과하다는 것을 발견할 것입니다. 서비스에서 디렉티브에 이르기까지 더 많은 것을 탐험할 수 있습니다. 하지만 지금은 충분히 잘 했어요 - AngularJS 전문가로 성장하고 있습니다!

행복하게 코딩하세요, 그리고 기억하세요: 프로그래밍의 세계에서 모든 오류는 새로운 것을 배우는 기회입니다!

Credits: Image by storyset