AngularJS - 환경 설정

안녕하세요, 미래의 웹 개발자 여러분! AngularJS의 세상으로 여러분을 안내하게 되어 매우 기쁩니다. 컴퓨터 과학을 10년 넘게 가르쳐온 저로서는, 개발 환경을 설정하는 것은 요리 전에 주방을 준비하는 것과 같다고 말씀드릴 수 있습니다. 매력적인 부분은 아니지만, 성공하기 위해서는 절대적으로 필요합니다. 그麼, 손을 들고 시작해보겠습니다!

AngularJS - Environment Setup

AngularJS는 무엇인가요?

설정에 들어가기 전에, 잠시 AngularJS가 무엇인지 이해해보겠습니다. 집을 짓는 것을 생각해보세요. HTML은 기초와 벽이 될 것이고, CSS는 페인트와 장식이 될 것이며, JavaScript는 전기와 배관이 될 것입니다. 그렇다면 AngularJS는? 전문 인테리어 디자이너와 건축가 팀을 두고 모든 것이 원활하게 작동하도록 보장하는 것과 같습니다.

AngularJS는 HTML의 기능을 확장하여 동적 단일 페이지 웹 애플리케이션을 쉽게 만들 수 있게 해주는 강력한 JavaScript 프레임워크입니다. HTML에 초능력을 부여하는 것과 같습니다!

왜 개발 환경이 필요한가요?

"지금 바로 코딩을 시작해도 되지 않나요?"라고 궁금해하실 수 있습니다. 그렇게 할 수는 있지만, 도구나 기기가 없는 주방에서 5코스 요리를 시도하는 것과 같을 것입니다. 적절한 개발 환경은 여러분이 AngularJS 애플리케이션을 효율적으로 작성하고 테스트하고 실행할 수 있도록 모든 도구를 제공합니다.

AngularJS 환경 설정

이제 본격적으로 대해보겠습니다. 다음은 해야 할 일입니다:

1. Node.js 설치

Node.js는 우리의 개발 환경의 엔진입니다. JavaScript 런타임으로, 컴퓨터에서 브라우저 외부에서 JavaScript를 실행할 수 있게 해줍니다.

공식 Node.js 웹사이트(https://nodejs.org/)로 이동합니다.
대부분의 사용자에게 추천되는 버전을 다운로드합니다.
설치 프로그램을 실행하고 안내에 따릅니다.

Node.js가 올바르게 설치되었는지 확인하려면, 명령 프롬프트나 터미널을 열고 다음을 입력합니다:

node --version

Node.js가 올바르게 설치되었다면 버전 번호를 볼 수 있어야 합니다.

2. npm (Node Package Manager) 설치

좋은 소식! npm은 일반적으로 Node.js와 함께 제공됩니다. npm은 거대한 도서관처럼, 프로젝트에서 사용할 수 있는 사전 작성된 코드 패키지를 빌려드립니다.

npm이 설치되었는지 확인하려면 다음을 입력합니다:

npm --version

3. AngularJS 설치

이제 마법이 일어나는 순간입니다. npm을 사용하여 AngularJS를 설치합니다. 명령 프롬프트나 터미널에서 다음을 입력합니다:

npm install angular

이 명령어는 npm이 AngularJS 패키지를 가져와 컴퓨터에 설치하도록 합니다.

4. 간단한 AngularJS 프로젝트 설정

모든 것이 잘 작동하는지 확인하기 위해 기본 프로젝트를 만들어보겠습니다. 먼저, 프로젝트를 위한 새로운 폴더를 만듭니다. 파일 탐색기나 명령 라인을 사용하여 다음을 수행할 수 있습니다:

mkdir my-angular-project
cd my-angular-project

이제 이 폴더에 두 개의 파일을 만들겠습니다:

index.html
app.js

index.html 파일은 다음과 같이 보여야 합니다:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>My First AngularJS App</title>
<script src="node_modules/angular/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainController">
<h1>{{ greeting }}</h1>
</div>
</body>
</html>

그리고 app.js 파일은 다음과 같이 보여야 합니다:

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

app.controller('MainController', function($scope) {
$scope.greeting = 'Hello, AngularJS!';
});

이를 간단히 설명하자면:

index.html에서 우리는 기본적인 HTML 구조를 만듭니다.
ng-app="myApp" 어트리뷰트는 AngularJS가 이 요소를 애플리케이션의 루트 요소로 지정합니다.
AngularJS 라이브러리와 app.js 파일을 <script> 태그를 사용하여 포함합니다.
<div ng-controller="MainController">는 HTML을 app.js 파일의 컨트롤러와 연결합니다.
{{ greeting }}은 AngularJS 표현식으로, 컨트롤러에서 정의한 greeting 값을 표시합니다.

app.js 파일에서:

우리는 myApp이라는 AngularJS 모듈을 만듭니다.
MainController라는 컨트롤러를 모듈에 등록합니다.
컨트롤러 내부에서 $scope 객체에 greeting 속성을 설정합니다. AngularJS는 이를 사용하여 컨트롤러와 뷰(HTML) 간에 데이터를 전달합니다.

5. 애플리케이션 실행

애플리케이션을 실행해보기 위해 웹 서버가 필요합니다. 개발 목적으로 live-server 패키지를 사용할 수 있습니다. npm을 사용하여 전역으로 설치합니다:

npm install -g live-server

그런 다음, 프로젝트 디렉토리에서 다음을 실행합니다:

live-server

이 명령어는 로컬 웹 서버를 시작하고 기본 브라우저를 열어 애플리케이션을 표시합니다. 페이지에 "Hello, AngularJS!"가 표시되어야 합니다.

결론

축하합니다! 여러분은 AngularJS 개발 환경을 설정하고 첫 AngularJS 애플리케이션을 만들었습니다. 많은 단계처럼 보일 수 있지만, 연습을 하면 점점 쉬워집니다. 기억하시라, 모든 전문가는 초보자였습니다. 환경 설정은 AngularJS 마스터가 되는 여정의 첫 걸음입니다.

다음 강의에서는 AngularJS 개념을 더 깊이 탐구하고 더 복잡한 애플리케이션을 만들기 시작할 것입니다. 그 전까지, 새로운 설정을 실험해보세요. 인사말을 바꿔보거나 HTML에 더 많은 요소를 추가해보세요. 배우는 가장 좋은 방법은 행동하는 것입니다!

행복하게 코딩하세요, 다음 강의에서 다시 만납시다!

Credits: Image by storyset