AngularJS - 날씨 애플리케이션

안녕하세요, 미래의 코딩 슈퍼스타 여러분! 오늘 우리는 AngularJS를 사용하여 날씨 애플리케이션을 만들어 보는 흥미로운 여정을 시작할 것입니다. 코드를 한 줄도 작성한 적이 없다면도 걱정하지 마세요 - 저는 여러분의 친절한 안내자가 되어 이 모험을 함께할 것입니다. 수년간 수많은 학생들을 가르쳐온 경험을 바탕으로 말이죠. 그럼 손을 잡고 시작해보겠습니다!

AngularJS - Weather Application

AngularJS는 무엇인가요?

우리가 날씨 애플리케이션을 만들기 전에 AngularJS에 대해 이야기해 보겠습니다. 집을 짓는 것을 상상해 보세요. AngularJS는 그 집의 프레임과도 같습니다 - 웹 애플리케이션에 구조와 지지를 제공합니다. 강력한 JavaScript 프레임워크로, 동적이고 단일 페이지 애플리케이션을 쉽게 만들 수 있도록 도와줍니다.

프로젝트 설정

단계 1: AngularJS 포함

먼저, 프로젝트에 AngularJS를 포함시켜야 합니다. 이를 위해 HTML 파일에 스크립트 태그를 추가합니다:

<!DOCTYPE html>
<html ng-app="weatherApp">
<head>
<title>My Weather App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- 우리 앱이 여기에 들어갈 자리 -->
<script src="app.js"></script>
</body>
</html>

<html> 태그 안에 있는 ng-app="weatherApp"을 보셨나요? 이는 AngularJS에게 "이곳이 우리 앱이 존재하는 곳이야!"라고 말하는 것입니다.

단계 2: 앱 생성

이제 app.js 파일을 만들어 보겠습니다:

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

이 줄은 "안녕하세요, AngularJS! 'weatherApp'이라는 새로운 앱을 만들어 주세요."라고 말하는 것과 같습니다. 간단하지 않나요?

날씨 애플리케이션 빌드

단계 3: 컨트롤러 생성

AngularJS에서 컨트롤러는 앱의 동작을 정의하는 곳입니다. 컨트롤러를 하나 만들어 보겠습니다:

app.controller('WeatherController', function($scope, $http) {
$scope.weather = {};

$scope.getWeather = function() {
var apiKey = 'YOUR_API_KEY';
var city = $scope.city;
var url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

$http.get(url)
.then(function(response) {
$scope.weather = response.data;
});
};
});

이것을 좀 더 자세히 설명하자면:

'WeatherController'이라는 컨트롤러를 생성하고 있습니다.
$scope는 컨트롤러와 뷰 사이에서 데이터를 전달하는 방법입니다.
$http는 AngularJS에서 HTTP 요청을하는 방법입니다.
getWeather 함수는 호출될 때 날씨 데이터를 가져옵니다.

단계 4: 뷰 생성

이제 HTML을 업데이트하여 컨트롤러를 사용하도록 합시다:

<body ng-controller="WeatherController">
<h1>Weather App</h1>
<input type="text" ng-model="city" placeholder="Enter city name">
<button ng-click="getWeather()">Get Weather</button>

<div ng-if="weather.main">
<h2>Weather in {{weather.name}}</h2>
<p>Temperature: {{weather.main.temp}}°C</p>
<p>Description: {{weather.weather[0].description}}</p>
</div>
</body>

이 작업의 내용은 다음과 같습니다:

ng-controller="WeatherController"는 뷰와 컨트롤러를 연결합니다.
ng-model="city"는 입력을 $scope.city 변수와 연결합니다.
ng-click="getWeather()"는 버튼을 클릭할 때 getWeather 함수를 호출합니다.
ng-if="weather.main"는 날씨 데이터를 가져왔을 때만 날씨 정보를 표시합니다.
{{}}는 $scope의 데이터를 뷰에 표시하는 방법입니다.

아름답게 만들기

단계 5: 스타일 추가

우리 앱을 예쁘게 보이게 스타일을 추가해 보겠습니다:

<style>
body {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
padding: 20px;
}
input, button {
font-size: 16px;
padding: 5px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>

모든 것을 통합하기

이제 완전한 index.html 파일을 보여드리겠습니다:

<!DOCTYPE html>
<html ng-app="weatherApp">
<head>
<title>My Weather App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<style>
/* Step 5의 CSS를 여기에 추가 */
</style>
</head>
<body ng-controller="WeatherController">
<h1>Weather App</h1>
<input type="text" ng-model="city" placeholder="Enter city name">
<button ng-click="getWeather()">Get Weather</button>

<div ng-if="weather.main">
<h2>Weather in {{weather.name}}</h2>
<p>Temperature: {{weather.main.temp}}°C</p>
<p>Description: {{weather.weather[0].description}}</p>
</div>
<script src="app.js"></script>
</body>
</html>

그리고 완전한 app.js 파일:

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

app.controller('WeatherController', function($scope, $http) {
$scope.weather = {};

$scope.getWeather = function() {
var apiKey = 'YOUR_API_KEY';
var city = $scope.city;
var url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

$http.get(url)
.then(function(response) {
$scope.weather = response.data;
});
};
});

결론

이제 우리는 AngularJS를 사용하여 간단하지만 기능적인 날씨 애플리케이션을 만들었습니다. 코드를 배우는 것은 새로운 언어를 배우는 것과 같아요 - 연습과 인내가 필요합니다. 바로 이해가 되지 않는다면 실망하지 마세요. 계속 실험하고, 코드를 작성하고, 가장 중요한 것은 즐겁게 만들어 나가세요!

이제 우리가 사용한 주요 AngularJS 개념을 요약한 표를 보여드리겠습니다:

개념	설명
ng-app	AngularJS 애플리케이션의 루트 요소를 정의합니다
ng-controller	애플리케이션의 특정 섹션에 컨트롤러를 정의합니다
ng-model	입력을 스코프 변수와 연결합니다
ng-click	클릭 이벤트를 정의합니다
ng-if	조건부로 요소를 렌더링합니다
{{}}	스코프 데이터를 뷰에 표시합니다
$scope	컨트롤러와 뷰 사이에서 데이터를 전달합니다
$http	HTTP 요청을 합니다

즐거운 코딩을하세요! 모든 전문가는 한때 초보자였습니다. 꾸준히 하면 언젠가 놀라운 애플리케이션을 만들 수 있을 것입니다. 그럼 코딩 세계를 정복해 보세요!

Credits: Image by storyset

이전 튜토리얼:

AngularJS - 애플리케이션 공유

다음 튜토리얼:

AngularJS - 타이머 애플리케이션