한국어

AngularJS 튜토리얼

AngularJS 애플리케이션

AngularJS - 차트 애플리케이션

안녕하세요, 야심 찬 프로그래머 여러분! 오늘 우리는 AngularJS와 차트 애플리케이션의 세계로 흥미로운 여정을 떠납니다. 여러분의 친절한 이웃 컴퓨터 과학 교사로서 저는 이 모험을 안내해 드리는 것을 기쁘게 생각합니다. 프로그래밍에 새로운 분이라고 걱정하지 마세요 - 우리는 기본부터 시작해 점진적으로 학습해 나갈 것입니다. 그러니 커피 한 잔 (또는 여러분의 좋아하는 음료)을 손에 들고, 이제 시작해 보겠습니다!

AngularJS - Chart Application

AngularJS는 무엇인가요?

차트를 만들기 전에 AngularJS가 무엇인지 이해해 보겠습니다. 여러분이 집을 짓는다고 상상해 보세요. AngularJS는 집을 효율적으로 구조화하는 프레임워크와 같습니다. AngularJS는 자바스크립트 기반의 오픈 소스 프론트엔드 웹 애플리케이션 프레임워크로, 동적 단일 페이지 애플리케이션을 만들기 더 쉽게 만들어줍니다.

AngularJS의 주요 기능

기능 설명
양방향 데이터 바인딩 모델과 뷰 간의 데이터를 자동으로 동기화합니다
의존성 주입 컴포넌트를 재사용 가능하고 유지보수 가능하며 테스트 가능하게 만듭니다
디렉티브 HTML을 커스텀 속성과 요소로 확장할 수 있게 합니다
템플릿 특별한 마크업을 포함한 HTML을 템플릿으로 사용합니다
MVC 아키텍처 모델-뷰-컨트롤러 패턴을 따르여 더 나은 조직화를 제공합니다

차트 애플리케이션 설정

이제 AngularJS에 대한 기본 이해를 가지고 있으므로, 차트 애플리케이션을 설정해 보겠습니다. 우리는 Chart.js 라이브러리와 AngularJS를 사용하여 아름답고 반응형 차트를 만들 것입니다.

단계 1: 필요한 파일 포함

먼저 AngularJS와 Chart.js를 HTML 파일에 포함시켜야 합니다. HTML의 <head> 섹션에 다음 줄을 추가하세요:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>

단계 2: AngularJS 모듈 생성

이제 AngularJS 모듈을 생성해 보겠습니다. JavaScript 파일에 다음을 추가하세요:

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

이 줄은 'chartApp'이라는 이름의 AngularJS 모듈을 생성합니다. 우리의 차트 제작 여정을 위한 새로운 레시피 책을 만드는 것과 같습니다!

첫 번째 차트 생성

시각적인 마법을 보고 싶으신가요? 우리는 첫 번째 차트 - 프로그래밍 언어의 인기도를 보여주는 간단한 막대 차트를 만들어 보겠습니다.

단계 1: HTML 설정

HTML 파일에 다음을 추가하세요:

<div ng-app="chartApp" ng-controller="ChartController">
<canvas id="myChart" width="400" height="200"></canvas>
</div>

이 코드는 차트가 그려질 캔버스 요소를 생성합니다. ng-app과 ng-controller 디렉티브는 HTML을 AngularJS 애플리케이션과 컨트롤러와 연결합니다.

단계 2: 컨트롤러 생성

JavaScript 파일에 다음을 추가하세요:

app.controller('ChartController', function($scope) {
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['JavaScript', 'Python', 'Java', 'C++', 'Ruby'],
datasets: [{
label: '프로그래밍 언어의 인기도',
data: [12, 19, 3, 5, 2],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
});

이 코드를 자세히 설명해 보겠습니다:

  1. 'ChartController'라는 컨트롤러를 생성합니다.
  2. 캔버스 요소의 컨텍스트를 가져옵니다.
  3. 새로운 Chart 객체를 생성하고 바 차트로 지정합니다.
  4. 차트에 사용할 데이터를 제공합니다.
  5. 차트의 옵션을 설정합니다. 예를 들어, y축이 0에서 시작하도록 설정합니다.

차트 동적으로 만들기

정적인 차트는 멋질 수 있지만, 동적인 차트는 더 멋집니다! 우리는 차트를 AngularJS 스코프의 데이터를 사용하여 업데이트하도록 변경해 보겠습니다.

단계 1: 컨트롤러 업데이트

컨트롤러를 다음과 같이 수정하세요:

app.controller('ChartController', function($scope) {
$scope.languages = ['JavaScript', 'Python', 'Java', 'C++', 'Ruby'];
$scope.popularity = [12, 19, 3, 5, 2];

$scope.updateChart = function() {
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: $scope.languages,
datasets: [{
label: '프로그래밍 언어의 인기도',
data: $scope.popularity,
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
};

$scope.updateChart();
});

여기서 우리는 데이터를 $scope 변수로 이동시키고 updateChart 함수를 생성했습니다.

단계 2: 사용자 입력 추가

사용자가 차트 데이터를 업데이트할 수 있는 입력 필드를 추가해 보겠습니다:

<div ng-app="chartApp" ng-controller="ChartController">
<canvas id="myChart" width="400" height="200"></canvas>
<div ng-repeat="language in languages">
{{language}}: <input type="number" ng-model="popularity[$index]" ng-change="updateChart()">
</div>
</div>

이제 입력 필드의 숫자를 변경할 때마다 차트가 자동으로 업데이트됩니다!

결론

축하합니다! 여러분은 AngularJS와 Chart.js를 사용하여 첫 번째 동적 차트 애플리케이션을 만들었습니다. 오늘 우리는 AngularJS의 기본 개념에서 시작하여 상호작용적인 차트를 만드는 것까지 많은 내용을 다루었습니다.

기억하시라, 프로그래밍에 능숙해지는 것은 요리를 배우는 것과 같습니다 - 연습, 실험, 그리고 실수에서 배우는 의지가 필요합니다. 그러니 코드를 자유롭게 놀아보고, 다른 차트 유형을 시도하거나 새로운 기능을 추가해 보세요.

저의 교사 생활 동안, 학생들이 완전한 초보자에서 놀라운 애플리케이션을 만드는 것을 보았습니다. 인내심과 호기심을 가지고 있으면, 복잡하고 아름다운 데이터 시각화를 만드는 데 시간이 걸리지 않을 것입니다.

계속 코딩하고, 배우고, 가장 중요한 것은 즐겁게 하세요! 다음에 다시 뵙겠습니다. 행복하게 차트를 만들어 보세요!

Credits: Image by storyset

이전 튜토리얼:
AngularJS - 번역 애플리케이션
다음 튜토리얼:
AngularJS - 지도 애플리케이션