한국어

AngularJS 튜토리얼

AngularJS 애플리케이션

AngularJS - 메모 pad 애플리케이션: 첫 번째 웹 애플리케이션 만들기

안녕하세요, 야심 찬 프로그래머 여러분! AngularJS를 사용하여 첫 번째 웹 애플리케이션을 만드는 흥미로운 여정을 안내해드리게 되어 기쁩니다. 10년 이상 프로그래밍을 가르쳐온 경험을 바탕으로, 이 튜토리얼이 끝나면 여러분은 기능적인 메모 pad 애플리케이션과 AngularJS 기본 개념을 잘 이해하게 될 것입니다. 그럼 시작해보겠습니다!

AngularJS - Notepad Application

AngularJS는 무엇인가요?

코딩을 시작하기 전에 AngularJS가 무엇인지 이해해보겠습니다. 집을 짓는 것을 상상해보세요. AngularJS는 집 짓는 과정을 더 쉽고 체계적으로 만들어주는 프레임워크와도 같습니다. AngularJS는 JavaScript 프레임워크로, 덜은 노력으로 동적인 웹 애플리케이션을 만들 수 있도록 도와줍니다.

개발 환경 설정

먼저, 우리의 작업 공간을 설정해야 합니다. 걱정하지 마세요! 실제 작업대를 설정하는 것보다 간단합니다!

  1. 좋아하는 텍스트 에디터를 엽니다 (초보자에게는 Visual Studio Code를 추천합니다).
  2. "AngularJS-Notepad"라는 새로운 폴더를 만듭니다.
  3. 이 폴더 내에 세 가지 파일을 만듭니다:
  • index.html
  • app.js
  • style.css

HTML 구조 만들기

우리의 index.html 파일로 시작해보겠습니다. 이 파일은 우리의 집 설계도와 같습니다.

<!DOCTYPE html>
<html ng-app="notepadApp">
<head>
<title>AngularJS 메모 pad</title>
<link rel="stylesheet" href="style.css">
<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="NotepadController">
<h1>내 메모 pad</h1>
<textarea ng-model="noteContent"></textarea>
<p>문자 수: {{noteContent.length}}</p>
</body>
</html>

이를 해부해보면 다음과 같습니다:

  • ng-app="notepadApp": 이는 AngularJS에게 이가 우리 애플리케이션의 루트임을 알립니다.
  • ng-controller="NotepadController": 이는 해당 페이지 부분을 관리해야 할 컨트롤러를 지정합니다.
  • ng-model="noteContent": 이는 텍스트 영역을 noteContent라는 변수와 바인딩합니다.
  • {{noteContent.length}}: 이는 메모의 길이를 표시하는 표현식입니다.

애플리케이션 스타일링

이제 우리의 메모 pad를 예쁘게 꾸미기 위해 기본 스타일을 추가해보겠습니다. style.css 파일에 다음을 추가합니다:

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

textarea {
width: 100%;
height: 200px;
margin-bottom: 10px;
}

h1 {
color: #333;
}

이 CSS는 우리의 콘텐츠를 중앙에 정렬하고, 좋은 폰트를 설정하며, 텍스트 영역과 제목을 스타일링합니다.

AngularJS 애플리케이션 만들기

이제 흥미로운 부분 - AngularJS를 사용하여 우리의 메모 pad를 활성화시키겠습니다! app.js 파일에서:

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

app.controller('NotepadController', function($scope) {
$scope.noteContent = '';
});

이를 해부해보면 다음과 같습니다:

  1. AngularJS 모듈 'notepadApp'을 생성합니다.
  2. 'NotepadController'라는 컨트롤러를 정의합니다.
  3. 컨트롤러 내에서 noteContent를 빈 문자열로 초기화합니다.

더 많은 기능 추가

이제 기본 메모 pad가 완성되었으므로, 몇 가지 더 유용한 기능을 추가해보겠습니다!

1. 저장 및 불러오기 기능

메모를 저장하고 불러오는 버튼을 추가해보겠습니다. HTML을 업데이트합니다:

<body ng-controller="NotepadController">
<h1>내 메모 pad</h1>
<textarea ng-model="noteContent"></textarea>
<p>문자 수: {{noteContent.length}}</p>
<button ng-click="saveNote()">메모 저장</button>
<button ng-click="loadNote()">메모 불러오기</button>
</body>

그리고 app.js를 업데이트합니다:

app.controller('NotepadController', function($scope) {
$scope.noteContent = '';

$scope.saveNote = function() {
localStorage.setItem('savedNote', $scope.noteContent);
alert('메모 저장!');
};

$scope.loadNote = function() {
$scope.noteContent = localStorage.getItem('savedNote') || '';
alert('메모 불러오기!');
};
});

여기서 우리는 localStorage를 사용하여 메모를 저장하고 불러옵니다. 브라우저가 나중에 기억해 두기 위해 정보를 적는 작은 노트북이라고 생각하면 됩니다.

2. 단어 수 계산 기능

이제 단어 수 계산 기능을 추가해보겠습니다. HTML을 업데이트합니다:

<p>문자 수: {{noteContent.length}} | 단어 수: {{wordCount()}}</p>

그리고 컨트롤러에 다음 함수를 추가합니다:

$scope.wordCount = function() {
return $scope.noteContent.split(/\s+/).filter(function(n) { return n != '' }).length;
};

이 함수는 메모 콘텐츠를 공백으로 분리하고 비어있지 않은 요소의 수를 계산하여 단어 수를 제공합니다.

모든 것을 통합

여기서 주요 AngularJS 디렉티브와 표현식을 요약한 표를 제공합니다:

디렉티브/표현식 목적
ng-app AngularJS 애플리케이션의 루트 요소를 정의합니다
ng-controller 해당 HTML 요소에 사용할 컨트롤러를 지정합니다
ng-model HTML 컨트롤의 값을 애플리케이션 데이터와 바인딩합니다
ng-click 요소가 클릭될 때 AngularJS 표현식을 평가합니다
{{expression}} 표현식의 값을 출력합니다

축하합니다! 여러분은 첫 번째 AngularJS 애플리케이션을 완성했습니다. 우리는 AngularJS 애플리케이션을 설정하고, 컨트롤러를 사용하고, 모델을 다루며, 데이터를 로컬로 저장하는 기본 방법을 다루었습니다.

기억해 두세요, 코딩을 배우는 것은 새로운 언어를 배우는 것과 같습니다. 연습, 인내, 지속이 필요합니다. 즉시 이해가 안되는 경우 실망하지 마세요 - 이것이 학습 과정의 일부입니다. 메모 pad 애플리케이션에 새로운 기능을 추가해보고, 계속 실험해보세요. 그리고 가장 중요한 것은, 즐거운 시간을 보내세요!

제가 가르치는 연간 동안 수많은 학생들이 완전한 초보자에서 능숙한 개발자로 변모해 보았습니다. 여러분도 지금 그 흥미로운 여정에 접어들었습니다. 계속 코딩하고, 배우고, 언젠가는 복잡한 웹 애플리케이션을 쉽게 만들 수 있을 것입니다!

Credits: Image by storyset

이전 튜토리얼:
AngularJS - ToDo 애플리케이션
다음 튜토리얼:
AngularJS - 부트스트랩 애플리케이션