한국어

AngularJS 튜토리얼

AngularJS 애플리케이션

AngularJS - Todo 앱

안녕하세요, 열정적인 프로그래밍 학습자 여러분! 오늘 우리는 AngularJS의 세계로 흥미로운 여정을 떠납니다. 간단하지만 강력한 Todo 앱을 만들어 보겠습니다. 여러분의 친절한 이웃 컴퓨터 과학 교사로서, 저는 여러분이 코드를 한 줄도 적지 않았더라도 이 과정을 안내해 드리는 것을 기쁘게 생각합니다. 그러니 좋아하는 음료를 한 잔 챙겨서 편안하게 앉아 있자고요, 이제 시작해 보겠습니다!

AngularJS - ToDo Application

AngularJS는 무엇인가요?

코딩을 시작하기 전에 AngularJS가 무엇인지 이해해 보겠습니다. 집을 짓는 것을 상상해 보세요. HTML은 기초와 벽, CSS는 페인트와 장식, JavaScript는 전기와 배관입니다. AngularJS는 이 모든 요소들을 지능적이고 체계적으로 결합해 주는 초고效한 건설팀과 같습니다.

AngularJS는 HTML 문법을 확장하여 애플리케이션에 사용할 수 있는 강력한 JavaScript 프레임워크입니다. 특히 동적 단일 페이지 애플리케이션을 만드는 데 특히 훌륭합니다.

프로젝트 설정

먼저 프로젝트를 설정해 보겠습니다. 필요한 파일 세 가지가 있습니다:

  1. index.html (주요 HTML 파일)
  2. app.js (AngularJS 애플리케이션)
  3. style.css (스타일시트)

먼저 HTML 파일부터 작성해 보겠습니다:

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>My Todo App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="TodoController">
<h1>My Todo List</h1>
<!-- 나중에 더 추가할 부분 -->
</body>
</html>

이를 간단히 설명하자면:

  • ng-app="todoApp": 이는 AngularJS에게 이가 애플리케이션의 루트 요소임을 알립니다.
  • ng-controller="TodoController": 이는 이 부분에 사용할 컨트롤러를 지정합니다.
  • AngularJS를 CDN에서 포함시키고, app.js와 style.css 파일을 링크합니다.

AngularJS 애플리케이션 생성

이제 app.js에서 AngularJS 애플리케이션을 생성해 보겠습니다:

var app = angular.module('todoApp', []);

app.controller('TodoController', function($scope) {
$scope.todos = [
{text: 'AngularJS 배우기', done: false},
{text: '앱 만들기', done: false}
];

$scope.addTodo = function() {
$scope.todos.push({text: $scope.newTodo, done: false});
$scope.newTodo = '';
};
});

이 작업에서 일어나는 일은 다음과 같습니다:

  • 'todoApp'이라는 AngularJS 모듈을 생성합니다.
  • 'TodoController'라는 컨트롤러를 정의합니다.
  • 컨트롤러 내부에서 할 일 항목 배열을 생성하고 새로운 할 일 항목을 추가하는 함수를 정의합니다.
  • $scope는 HTML과 JavaScript 사이의 다리 역할을 하여 변수와 함수에 접근할 수 있게 합니다.

할 일 목록 표시

이제 HTML을 업데이트하여 할 일 목록을 표시해 보겠습니다:

<body ng-controller="TodoController">
<h1>My Todo List</h1>
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span ng-class="{'done': todo.done}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="newTodo" placeholder="새로운 할 일 추가">
<input type="submit" value="추가">
</form>
</body>

이를 간단히 설명하자면:

  • ng-repeat="todo in todos": 이는 todos 배열의 각 항목에 대해 새로운 <li>를 생성합니다.
  • ng-model="todo.done": 이는 체크박스를 todo.done 속성에 바인딩합니다.
  • ng-class="{'done': todo.done}": 이는 todo.done이 참이면 'done' 클래스를 적용합니다.
  • {{todo.text}}: 이는 할 일 항목의 텍스트를 표시합니다.
  • ng-submit="addTodo()": 이는 폼이 제출될 때 addTodo 함수를 호출합니다.
  • ng-model="newTodo": 이는 입력 필드를 newTodo 변수에 바인딩합니다.

앱 스타일링

마지막으로, style.css에 기본 스타일을 추가해 보겠습니다:

body {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
padding: 20px;
}

ul {
list-style-type: none;
padding: 0;
}

li {
margin-bottom: 10px;
}

.done {
text-decoration: line-through;
color: #888;
}

form {
margin-top: 20px;
}

input[type="text"] {
width: 70%;
padding: 5px;
}

input[type="submit"] {
padding: 5px 10px;
}

이 CSS는 우리의 앱을 깨끗하고 정리된 모습으로 만들어 줄 것입니다.

결론

축하합니다! 여러분은 첫 AngularJS 애플리케이션을 만들었습니다. 아래 표는 우리가 사용한 주요 AngularJS 개념을 요약합니다:

개념 설명
ng-app AngularJS 애플리케이션의 루트 요소를 정의합니다
ng-controller HTML 요소에 사용할 컨트롤러를 지정합니다
ng-repeat 배열의 각 항목에 대해 HTML 요소를 반복합니다
ng-model 입력, 선택 또는 텍스트 영역을 스코프의 속성에 바인딩합니다
ng-submit 폼이 제출될 때 실행할 함수를 지정합니다
ng-class 동적으로 CSS 클래스를 적용합니다

코드를 배우는 것은 새로운 언어를 배우는 것과 같습니다. 시간과 연습이 필요하지만, 인내심을 가지고 계속하면 곧 복잡한 애플리케이션을 만들 수 있을 것입니다. 계속 코딩하고, 배우고, 가장 중요한 것은 즐겁게 하세요!

Credits: Image by storyset

이전 튜토리얼:
AngularJS - 국제화
다음 튜토리얼:
AngularJS - 메모 애플리케이션