AngularJS - LastFm 애플리케이션: 음악 탐색 앱 제작

서론

안녕하세요, 야심찬 프로그래머 여러분! 오늘 우리는 웹 개발의 세계로 흥미로운 여정을 떠납니다. AngularJS와 LastFm API를 사용하여 음악 탐색 애플리케이션을 만들어보겠습니다. 만약 여러분이 코드를 작성한 적이 없다면 걱정하지 마세요 - 저는 수많은 학생들과 함께한 저의 교육 경험을 바탕으로 여러분을 한 걸음 한 걸음 안내해 드릴 것입니다. 시작해보겠습니다!

AngularJS - Lastfm Application

AngularJS는 무엇인가요?

코딩을 시작하기 전에 AngularJS가 무엇인지 이해해 보겠습니다. 집을 짓는 것을 상상해 봅시다. AngularJS는 그 집의 기초와 같은东西 - 여러분의 웹 애플리케이션에 구조와 지지를 제공합니다. 이는 강력한 JavaScript 프레임워크로, 동적인 단일 페이지 애플리케이션을 쉽게 만들어주는 도구입니다.

프로젝트 설정

단계 1: HTML 구조 생성

우선 우리 애플리케이션의 기본 구조를 만들어보겠습니다. 좋아하는 텍스트 편집기를 엽니다고 새 파일을 만들어 index.html이라고 이름을 지정합니다. 다음과 같은 내용을 넣습니다:

<!DOCTYPE html>
<html ng-app="lastfmApp">
<head>
<title>LastFm Music Discovery</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="MainController">
<h1>LastFm Music Discovery</h1>
<input type="text" ng-model="artistName" placeholder="Enter artist name">
<button ng-click="searchArtist()">Search</button>
<div ng-if="artist">
<h2>{{artist.name}}</h2>
<p>{{artist.bio.summary}}</p>
</div>
</body>
</html>

이를 해부해 보겠습니다:

ng-app="lastfmApp": 이는 AngularJS에게 이가 우리 애플리케이션의 루트 요소임을 알립니다.
ng-controller="MainController": 이는 이 부분의 로직을 처리해야 할 컨트롤러를 지정합니다.
ng-model="artistName": 이는 입력 필드를 컨트롤러의 artistName 변수에 바인딩합니다.
ng-click="searchArtist()": 이는 버튼이 클릭될 때 searchArtist() 함수를 호출하도록 합니다.
ng-if="artist": 이는 아티스트가 찾아졌을 때만 아티스트 정보를 표시합니다.

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

이제 AngularJS 애플리케이션을 만들어보겠습니다. 새 파일을 만들고 app.js라고 이름을 지정한 후 다음과 같은 코드를 추가합니다:

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

app.controller('MainController', function($scope, $http) {
$scope.searchArtist = function() {
var apiKey = 'YOUR_LASTFM_API_KEY';
var apiUrl = 'http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&artist=' + $scope.artistName + '&api_key=' + apiKey + '&format=json';

$http.get(apiUrl).then(function(response) {
$scope.artist = response.data.artist;
});
};
});

이를 해부해 보겠습니다:

우리는 lastfmApp이라는 AngularJS 모듈을 생성합니다.
MainController라는 컨트롤러를 정의합니다.
컨트롤러 내부에서 searchArtist 함수를 정의하고 LastFm API에 HTTP 요청을 보냅니다.
$scope를 사용하여 변수와 함수를 HTML에 노출합니다.
$http를 사용하여 API 요청을 보냅니다.

AngularJS 개념 이해

이제 기본 애플리케이션을 설정했으므로 AngularJS 개념을 더 깊이 이해해 보겠습니다.

모듈

AngularJS에서 모듈은 애플리케이션의 다른 부분을 담는 컨테이너입니다. 이는 코드를 조직하고 유지보수 가능하게 만들어줍니다. 우리의 경우 lastfmApp이라는 모듈을 생성했습니다:

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

컨트롤러

컨트롤러는 애플리케이션의 행동을 정의하는 곳입니다. 그것은 애플리케이션의 로직을 담고 있습니다. 우리의 예제에서는 MainController를 생성했습니다:

app.controller('MainController', function($scope, $http) {
// 컨트롤러 로직을 여기에 작성합니다
});

스코프

스코프는 모델을 가리키는 객체로, 컨트롤러와 뷰 사이의 연결 역할을 합니다. 컨트롤러에서 $scope를 사용하면 HTML에 데이터를 노출할 수 있습니다:

$scope.artist = response.data.artist;

디렉티브

디렉티브는 DOM 요소에 마컬을 달아 AngularJS가 그 DOM 요소에 특정 행동을 부여하도록 합니다. 우리의 HTML에서 여러 디렉티브를 사용했습니다:

ng-app
ng-controller
ng-model
ng-click
ng-if

애플리케이션 향상

이제 기본 개념을 이해했으므로 애플리케이션에 몇 가지 기능을 더 추가해 보겠습니다.

유사 아티스트 표시

우리의 HTML을 수정하여 유사 아티스트를 표시하도록 합시다:

<div ng-if="artist">
<h2>{{artist.name}}</h2>
<p>{{artist.bio.summary}}</p>
<h3>유사 아티스트</h3>
<ul>
<li ng-repeat="similar in artist.similar.artist">{{similar.name}}</li>
</ul>
</div>

여기서 우리는 ng-repeat 디렉티브를 사용하여 유사 아티스트를 반복하도록 합니다.

오류 처리 추가

컨트롤러에 몇 가지 오류 처리를 추가해 보겠습니다:

app.controller('MainController', function($scope, $http) {
$scope.searchArtist = function() {
var apiKey = 'YOUR_LASTFM_API_KEY';
var apiUrl = 'http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&artist=' + $scope.artistName + '&api_key=' + apiKey + '&format=json';

$http.get(apiUrl).then(function(response) {
$scope.artist = response.data.artist;
$scope.error = null;
}, function(error) {
$scope.error = "An error occurred. Please try again.";
$scope.artist = null;
});
};
});

그리고 이를 HTML에 추가합니다:

<p ng-if="error" style="color: red;">{{error}}</p>

결론

축하합니다! 여러분은 첫 AngularJS 애플리케이션을 만들었습니다. 우리는 많은 내용을 다루었고, 기본 구조를 설정하고 기능을 추가하고 오류 처리를 했습니다. 기억하시라, 코딩을 배우는 것은 여정이며, 만드는 각 애플리케이션은 새로운 것을 가르쳐줍니다.

여기서 주요 AngularJS 개념을 요약한 표를 제공합니다:

개념	설명
모듈	애플리케이션의 부분을 담는 컨테이너
컨트롤러	애플리케이션의 행동을 정의하는 곳
스코프	컨트롤러와 뷰 사이의 연결 역할
디렉티브	DOM 요소에 특정 행동을 부여하는 마컬

계속 연습하고, 계속 만들고, 가장 중요한 것은 코딩을 즐기세요. 언제쯤 복잡한 웹 애플리케이션을 쉽게 만들 수 있을 것입니다. 행복한 코딩을!

Credits: Image by storyset

이전 튜토리얼:

AngularJS - Leaflet 애플리케이션