한국어

AngularJS 튜토리얼

AngularJS 애플리케이션

AngularJS - 장바구니 애플리케이션

안녕하세요, 열망하는 프로그래머 여러분! 오늘 우리는 AngularJS를 사용하여 쇼핑 장바구니 애플리케이션을 만들기 위한 흥미로운 여정을 시작할 것입니다. 여러분의 친절한 이웃 컴퓨터 과학 교사로서, 저는 여러분이 프로그래밍에 전혀 익숙하지 않아도 이 과정을 안내해 드리는 것을 기쁘게 생각합니다. 그러니 커피 한 잔 (또는 여러분의 좋아하는 음료)을 손에 쥐고, 이제 시작해 보겠습니다!

AngularJS - Cart Application

AngularJS는 무엇인가요?

장바구니 애플리케이션을 만들기 전에, 잠시 AngularJS가 무엇인지 이해해 보겠습니다. AngularJS는 강력한 JavaScript 프레임워크로, 동적 웹 애플리케이션을 만들어주는 도구를 제공합니다. 웹 개발자들에게는 다용도 도구 세트인 것처럼, 우리의 삶을 더 쉽게 만들고 코드를 더 정리된 형태로 유지하는 도구를 제공합니다.

프로젝트 설정

단계 1: HTML 구조 생성

우리의 쇼핑 장바구니 애플리케이션을 위한 기본 HTML 구조를 만들어 보겠습니다. HTML에 익숙하지 않으신 분도 걱정하지 마세요, 각 부분을 차례대로 설명해 드리겠습니다.

<!DOCTYPE html>
<html ng-app="cartApp">
<head>
<title>My Shopping Cart</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="CartController">
<h1>My Shopping Cart</h1>
<!-- 나중에 더 많은 내용을 추가할 예정입니다 -->
</body>
</html>

이 HTML 구조에서 우리는 몇 가지 중요한 일을 했습니다:

  1. AngularJS 라이브러리를 CDN 링크를 사용하여 포함했습니다.
  2. 우리의 자신의 JavaScript 파일 (app.js)을 링크했습니다.
  3. <html> 태그에 ng-app="cartApp"를 추가하여 AngularJS가 이 root 요소가 애플리케이션의 루트 요소임을 알 수 있도록 했습니다.
  4. <body> 태그에 ng-controller="CartController"를 추가하여 장바구니의 로직을 관리할 수 있도록 했습니다.

단계 2: AngularJS 애플리케이션 생성

이제 app.js 파일을 만들고 AngularJS 애플리케이션을 설정해 보겠습니다:

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

app.controller('CartController', function($scope) {
$scope.items = [];
$scope.total = 0;

$scope.addItem = function(item) {
$scope.items.push(item);
$scope.calculateTotal();
};

$scope.removeItem = function(index) {
$scope.items.splice(index, 1);
$scope.calculateTotal();
};

$scope.calculateTotal = function() {
$scope.total = $scope.items.reduce(function(sum, item) {
return sum + item.price;
}, 0);
};
});

이를 해부해 보겠습니다:

  1. AngularJS 모듈 'cartApp'을 생성합니다.
  2. 'CartController'라는 컨트롤러를 정의합니다.
  3. 컨트롤러 내부에서 아이템 배열과 총 가격 변수를 설정합니다.
  4. 아이템 추가, 아이템 제거, 총 가격 계산 함수를 생성합니다.

사용자 인터페이스 구축

단계 3: 아이템 목록 생성

HTML을 업데이트하여 장바구니에 있는 아이템을 표시하겠습니다:

<body ng-controller="CartController">
<h1>My Shopping Cart</h1>
<ul>
<li ng-repeat="item in items">
{{item.name}} - ${{item.price}}
<button ng-click="removeItem($index)">Remove</button>
</li>
</ul>
<p>Total: ${{total}}</p>
</body>

여기서 우리는 AngularJS 디렉티브를 사용하고 있습니다:

  • ng-repeat를 사용하여 아이템을 반복합니다.
  • {{}}를 사용하여 아이템 속성을 바인딩하여 표시합니다.
  • ng-click를 사용하여 버튼이 클릭될 때 removeItem 함수를 호출합니다.

단계 4: 새로운 아이템 추가

사용자가 새로운 아이템을 추가할 수 있는 폼을 추가해 보겠습니다:

<form ng-submit="addItem(newItem)">
<input type="text" ng-model="newItem.name" placeholder="Item name" required>
<input type="number" ng-model="newItem.price" placeholder="Price" required>
<button type="submit">Add to Cart</button>
</form>

이 폼은 다음을 사용합니다:

  • ng-submit를 사용하여 폼이 제출될 때 addItem 함수를 호출합니다.
  • ng-model을 사용하여 입력 값을 newItem 객체에 바인딩합니다.

애플리케이션 강화

단계 5: 아이템 수량 추가

애플리케이션을 아이템 수량을 처리할 수 있도록 수정해 보겠습니다:

app.controller('CartController', function($scope) {
// ... 이전 코드 ...

$scope.addItem = function(item) {
var existingItem = $scope.items.find(function(i) {
return i.name === item.name;
});

if (existingItem) {
existingItem.quantity += 1;
} else {
item.quantity = 1;
$scope.items.push(item);
}
$scope.calculateTotal();
$scope.newItem = {};
};

$scope.removeItem = function(index) {
var item = $scope.items[index];
item.quantity -= 1;
if (item.quantity === 0) {
$scope.items.splice(index, 1);
}
$scope.calculateTotal();
};

$scope.calculateTotal = function() {
$scope.total = $scope.items.reduce(function(sum, item) {
return sum + (item.price * item.quantity);
}, 0);
};
});

그리고 HTML을 업데이트합니다:

<li ng-repeat="item in items">
{{item.name}} - ${{item.price}} x {{item.quantity}}
<button ng-click="removeItem($index)">Remove</button>
</li>

결론

축하합니다! 여러분은 AngularJS를 사용하여 기능적인 쇼핑 장바구니 애플리케이션을 만들었습니다. 우리는 AngularJS 애플리케이션을 설정하고 컨트롤러를 만들고, 디렉티브를 사용하여 데이터 바인딩과 이벤트 처리를 하고, 아이템 수량을 관리하는 등의 고급 기능을 추가하는 방법을 다루었습니다.

기억하시기 바랍니다, 코딩을 배우는 것은 여정이며, 이것이 시작입니다. 계속 연습하고, 실험하고, 가장 중요한 것은 즐기세요!

여기서 우리가 사용한 주요 AngularJS 개념을 요약한 표를 제공합니다:

개념 설명 예제
모듈 애플리케이션의 다른 부분을 담는 컨테이너 angular.module('cartApp', [])
컨트롤러 애플리케이션의 특정 부분에 대한 비즈니스 로직을 포함 app.controller('CartController', function($scope) {...})
스코프 애플리케이션 모델을 참조하는 객체 $scope.items = []
디렉티브 HTML을 커스텀 속성과 요소로 확장 ng-repeat, ng-click, ng-submit
데이터 바인딩 모델과 뷰 간의 데이터 동기화 {{item.name}}

계속 코딩하고, 기억하세요: 모든 전문가는 초보자였습니다. 여러분은 잘하고 있습니다!

Credits: Image by storyset

이전 튜토리얼:
AngularJS - 드래그 애플리케이션
다음 튜토리얼:
AngularJS - 번역 애플리케이션