1. Google Chart 만들어보기
Google Chart CND 끌어와서 차트 만들어보기.
💻 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- vue3 라이브러리 로딩 : CDN -->
<script src="https://unpkg.com/vue@3"></script>
<!-- Google Chart -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.prod.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!-- 동적으로 움직이게 -->
<script>
let datas = [
['삼겹살', 3], ['사시미', 6], ['마라탕', 10], ['피자', 5], ['치킨', 3]
];
google.charts.load('current', {packages:['corechart']});
google.charts.setOnLoadCallback(drawFunc); // 콜백 함수
function drawFunc() {
let data = google.visualization.arrayToDataTable([
['종류', '갯수'], ...datas
// [['삼겹살', 3], ['사시미', 6]...]
]);
let options = {title: '뇽뇽뇽', is3D:true} // 3D차트 활성화
let chart = new google.visualization.PieChart(document.querySelector('#chart_div'));
chart.draw(data, options); // 차트를 그려줌
}
</script>
</head>
<body>
<h2>Google Chart(원 그래프) 그리기</h2>
메뉴 선택<br>
<div id="chart_div" style="height: 500px;"></div>
<div id="app">
<!-- 차트 그리기 -->
<li v-for="(value, index) in dataArray" :key="index" style="list-style: none;">
{{value[0]}} : {{value[1]}}
<button @click="addOneFunc(index)">1 증가</button>
<button @click="subOneFunc(index)">1 감소</button>
</li>
</div>
<script>
const {createApp} = Vue;
createApp ({
data() {
return {
dataArray: datas
}
},
methods: {
addOneFunc(index) {
this.dataArray[index][1]++;
this.updateChart()
},
subOneFunc(index) {
if(this.dataArray[index][1] > 0) // this.dataArray[index]의 [1]행 값이 0보다 클 때만 수행
this.dataArray[index][1]--;
updateChart()
},
updateChart() {
drawFunc();
}
},
}).mount('#app');
</script>
</body>
</html>
🌊 코드의 흐름
- HTML 구조를 정의하고 필요한 스크립트(Vue.js, Google Charts)를 로드한다.
- Google Charts를 초기화하고 drawFunc()을 콜백으로 설정한다.
- drawFunc()에서 차트 데이터를 설정하고 차트를 그린다.
- Vue 앱을 생성하고 초기 데이터와 메서드를 정의한다.
- 사용자 인터페이스에서 각 항목에 대한 증가/감소 버튼을 제공한다.
- 버튼 클릭 시 해당 데이터를 업데이트하고 차트를 다시 그린다.
🌈 결과
처음에 63번째 코드에서 this를 쓰지 않고 updateChart()만 썼었는데 차트 목록에 업데이트되지 않는 현상을 겪었었다.
후에 this를 추가해서 this.updateChart()로 수정하니 업데이트가 수월히 된 것을 확인할 수 있었다.
왜 this를 추가해야만 업데이트가 되는지 궁금해서 알아봤다.
💡 this.updateChart()의 중요성
- this.updateChart()를 사용해야 하는 이유는 Vue 컴포넌트의 컨텍스트와 관련이 있다.
- Vue 컴포넌트 내에서 this는 현재 Vue 인스턴스를 가리킨다.
- updateChart 메소드는 Vue 인스턴스의 메소드로 정의되어 있다.
- 메소드 내에서 this를 사용하지 않으면, JavaScript는 전역 스코프(window 객체)에서
updateChart 함수를 찾으려 한다. 하지만 이 함수는 전역 스코프에 정의되어 있지 않다. - this.updateChart()를 사용함으로써 현재 Vue 인스턴스의 updateChart 메소드를 올바르게
참조하고 실행할 수 있다.
📌 보충 설명
- Vue 컴포넌트 메소드 내에서 this는 자동으로 해당 컴포넌트 인스턴스에 바인딩된다.
- updateChart()만 호출하면 JavaScript는 이를 일반 함수 호출로 취급하여 전역 스코프에서 함수를 찾으려 한다.
- this.updateChart()를 사용하면 Vue 인스턴스의 컨텍스트 내에서 메소드를 호출하게 되어, 올바른 스코프에서 함수를 실행할 수 있다.
따라서 this.updateChart()를 사용함으로써 Vue 컴포넌트의 메소드를 정확히 참조하고 실행할 수 있어, 차트 업데이트가 의도한 대로 작동하게 된다.
시각화: 원형 차트 | Charts | Google for Developers
3D 및 도넛 변화를 포함한 원형 차트를 만들고 시각화를 적용하는 방법을 알아봅니다.
developers.google.com
- 출처 : developers.google.com
2. AJAX로 JSON 자료 읽기
임의의 JSON 자료를 AJAX을 사용하여 읽어보기.
💻 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- vue3 라이브러리 로딩 : CDN -->
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<h2>AJAX 👉🏻 JSON Change</h2>
<div id="app">
<button @click="fetchData">AJAX로 JSON 자료 읽기</button><br><br>
<button @click="clearData">JSON 자료 지우기</button>
<div v-for="(post, index) in posts" :key="index">
<h3>{{post.title}}</h3>
<br>{{post.id}}</br>
<br>{{post.body}}</br>
</div>
</div>
<script>
const { createApp } = Vue;
createApp ({
data() {
return {
posts:[] // 담기
}
},
methods: {
fetchData() { // AJAX
fetch('https://jsonplaceholder.typicode.com/posts') // 이 사이트에서 AJAX
.then(response => { // Promise
if(!response.ok) {
throw new Error('AJAX ERROR'); // response가 ok가 아니면 에러메세지 던지기
}
return response.json(); // ok이면 json타입의 문자열로 바꿔 리턴
})
.then(json => {
this.posts = json.slice(0, 10); // 가져온 데이터를 10개까지만 자르기
})
.catch(error => {
console.log('읽기 오류 : ', error);
})
},
clearData() {
this.posts = []; // 비우기
}
},
}).mount('#app');
</script>
</body>
</html>
🌊 코드 구조 및 흐름
- HTML 구조를 정의하고 Vue.js 라이브러리를 CDN을 통해 로드한다.
- 'app' id를 가진 div 내에 Vue 애플리케이션의 템플릿을 정의한다.
- Vue 애플리케이션을 생성하고 초기화한다.
💡 Vue 애플리케이션 상세
1️⃣ data() 함수
- posts 배열을 빈 배열로 초기화한다. 이 배열은 AJAX 요청으로 받아온 데이터를 저장할 곳이다.
2️⃣ methods 객체 : fetchData() 메소드
-
- https://jsonplaceholder.typicode.com/posts에서 데이터를 가져오는 AJAX 요청을 수행한다.
- fetch API를 사용하여 GET 요청을 보낸다.
- 응답이 성공적이지 않으면 에러를 throw한다.
- 성공적인 응답은 JSON으로 파싱 된다.
- 파싱 된 데이터의 첫 10개 항목만 posts 배열에 저장한다.
- 에러 발생 시 콘솔에 로그를 출력한다.
3️⃣ methods 객체 : clearData() 메소드
- posts 배열을 비운다.
💡 템플릿 구조
- AJAX로 JSON 자료 읽기 버튼
fetchData() 메소드를 호출한다. - JSON 자료 지우기 버튼
clearData() 메소드를 호출한다. - v-for 디렉티브를 사용하여 posts 배열의 각 항목을 반복적으로 표시한다.
- 각 post의 title, id, body를 화면에 표시한다.
📌 주요 포인트
1️⃣ AJAX 요청
- fetch API를 사용하여 비동기적으로 데이터를 가져온다.
- Promise 체인을 사용하여 비동기 작업을 처리한다.
2️⃣ 에러 처리
- response.ok를 확인하여 HTTP 오류를 감지한다.
- catch 블록을 사용하여 네트워크 오류나 기타 예외를 처리한다.
3️⃣ 데이터 바인딩
- Vue의 반응성 시스템을 활용하여 posts 배열의 변경사항이 자동으로 화면에 반영된다.
4️⃣ 조건부 렌더링
- posts 배열의 내용에 따라 동적으로 UI가 업데이트된다.
🌈 결과
이 코드는 Vue.js를 사용하여 AJAX 요청을 수행하고, 받아온 데이터를 화면에 표시하는 간단한 예제이다.
사용자는 버튼을 클릭하여 데이터를 가져오거나 지울 수 있으며, Vue의 반응성 시스템 덕분에 데이터 변경 시
UI가 자동으로 업데이트된다.
3. OpenWeatherMap
OpenWeatherMap은 전 세계의 날씨 데이터를 제공하는 온라인 서비스이다.
다양한 기상 매개변수에 대한 현재 날씨 데이터, 예보, 과거 데이터 등을 API를 통해 제공한다.
💡 주요 특징
- 다양한 API
현재 날씨, 단기 및 장기 예보, 기후 데이터 등 다양한 API를 제공한다. - 글로벌 커버리지
전 세계 200,000개 이상의 도시에 대한 날씨 정보를 제공한다. - 다양한 매개변수
온도, 습도, 기압, 풍속, 강수량 등 다양한 기상 매개변수를 제공한다. - 유연한 사용
무료 및 유료 플랜을 제공하여 다양한 규모의 프로젝트에 적용 가능하다.
| API 엔드포인트 | 설명 |
| /weather | 특정 위치의 현재 날씨 데이터 |
| /forecast | 5일 / 3시간 간격의 예보 데이터 |
| /onecall | 현재 날씨, 분 단위 예보, 시간별 예보, 일일 예보를 한 번의 API 호출로 제공 |
💻 예시 API 호출
https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY
💻 OpenWeatherMap을 통해 현재 날씨 정보 가져와보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- vue3 라이브러리 로딩 : CDN -->
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
<button @click="fetchWeather">우리 동네 날씨 정보 얻기</button>
<div v-if="weather">
<h2>🌈현재 날씨 정보</h2>
<p>⏰예보 시간 : {{weather.time}}</p>
<p>🌡️온도 : {{weather.temperature}}℃</p>
<p>🍃풍속 : {{weather.windspeed}}km/h</p>
<p>🌪️풍향 : {{weather.winddirection}}°</p>
</div>
</div>
<script>
const { createApp } = Vue;
createApp ({
data() {
return {
weather:null
}
},
methods: {
fetchWeather() {
fetch('https://api.open-meteo.com/v1/forecast?latitude=37.6364&longitude=126.9188¤t_weather=true')
.then(response => response.json())
.then(data => {
this.weather = data.current_weather; // 위의 위치에 대한 날씨 정보 가져오기
})
.catch(error => {
console.log('날씨 자료 읽기 오류 : ', error)
})
}
},
}).mount('#app')
</script>
</body>
</html>
🌊 코드의 흐름
- Vue 애플리케이션 설정
Vue3을 CDN으로 로드하고 createApp을 사용하여 Vue 애플리케이션을 생성한다. - 데이터 초기화
data 함수에서 weather 속성을 null로 초기화한다. - 메소드 정의
fetchWeather 메소드를 정의하여 날씨 데이터를 가져온다. - API 호출
fetch 함수를 사용하여 Open-Meteo API에 GET 요청을 보낸다.
그리고 API 엔드포인트에 위도와 경도를 파라미터로 포함시켜 특정 위치의 날씨 정보를 요청한다. - 응답 처리
response.json()을 사용하여 응답을 JSON 형식으로 파싱 한다.
파싱 된 데이터에서 current_weather 정보를 추출하여 this.weather에 할당한다. - 오류 처리
catch 블록에서 API 호출 중 발생할 수 있는 오류를 처리한다. - 템플릿 렌더링
v-if 디렉티브를 사용하여 weather 데이터가 있을 때만 날씨 정보를 표시한다.
날씨 정보는 시간, 온도, 풍속, 풍향을 포함한다. - 사용자 상호작용
우리 동네 날씨 정보 얻기 버튼을 클릭하면 fetchWeather 메소드가 호출된다.
🌈 결과
'에이콘아카데미 회고 > 5회차) 자바기반 풀스택 개발자 양성과정' 카테고리의 다른 글
| Node) 75번째 회고 (0) | 2024.08.08 |
|---|---|
| Vue) 73번째 회고 (0) | 2024.08.06 |
| Vue) 72번째 회고 (0) | 2024.08.05 |
| React) 71번째 회고 (0) | 2024.08.01 |
| React) 70번째 회고 (5) | 2024.07.31 |
