1단계: JSON 파일 생성
프로젝트 디렉토리 내에 weather.json 파일을 생성하고, 아래와 같이 내용을 작성합니다.
{
"도시": "서울",
"온도": 25
}
2단계: HTML 파일 작성
index.html 파일을 아래와 같이 작성합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>날씨 정보</title>
</head>
<body>
<h1>날씨 정보 확인</h1>
<button onclick="getWeatherInfo()">날씨 확인하기</button>
<div id="weather-info"></div>
<script src="script.js"></script>
</body>
</html>3단계: JavaScript 파일 작성
script.js 파일을 아래와 같이 작성합니다. ※JSON.parse()로도 문자열을 JSON 형식으로 변환할 수 있다.
function getWeatherInfo() {
fetch('weather.json')
.then(response => response.json())
.then(data => {
const city = data['도시'];
const temperature = data['온도'];
document.getElementById('weather-info').innerHTML = `${city}의 현재 온도는 ${temperature}도 입니다.`;
});
}함수 선언: getWeatherInfo라는 이름의 함수가 선언됩니다. 이 함수는 웹 페이지에서 버튼 클릭 등의 이벤트로 호출될 수 있습니다.
JSON 파일 가져오기: fetch('weather.json')은 weather.json이라는 파일을 서버로부터 가져옵니다. 이 파일은 JSON 형식으로 날씨 정보를 저장하고 있어야 합니다.
응답 처리: .then(response => response.json()) 부분에서는 서버로부터 받은 응답을 JSON 형식으로 변환합니다. 즉, 문자열로 받은 JSON 데이터를 JavaScript 객체로 만들어줍니다.
response.json(): fetch로 가져온 정보는 HTTP 응답 객체로, 이를 JavaScript 객체로 변환하기 위해 response.json()을 호출합니다. 처음에는 이미 JSON 파일로 가져온 것처럼 보이지만, 이 과정은 필수적입니다. JSON 파일은 단순히 텍스트로, 이를 자바스크립트에서 활용하기 위해선 객체 형태로 변환해야 합니다.
데이터 활용: .then(data => { ... }) 부분에서는 변환된 JSON 객체를 사용하여 도시 이름과 온도 정보를 가져옵니다. data['도시']와 data['온도']를 통해 필요한 정보를 추출하고, 이를 변수 city와 temperature에 저장합니다.
화면에 표시: document.getElementById('weather-info').innerHTML을 통해 HTML 문서의 특정 요소 (id가 'weather-info'인 요소) 내부에 날씨 정보를 삽입합니다. 해당 요소 안에는 ${city}의 현재 온도는 ${temperature}도 입니다.라는 문자열이 들어가며, 여기서 ${city}와 ${temperature}는 앞서 추출한 도시 이름과 온도 값으로 치환됩니다.
4단계: 로컬 서버 실행
이 단계에서는 로컬 웹 서버가 필요합니다. Visual Studio Code에서 "Live Server" 확장을 설치하거나 Python의 간단한 HTTP 서버를 사용할 수 있습니다.
5단계: 웹 브라우저에서 확인
로컬 서버에서 index.html 파일을 실행하고 "날씨 확인하기" 버튼을 클릭하면, weather.json 파일에서 데이터를 불러와 화면에 표시합니다.
정리
이 예제를 통해 외부 JSON 파일을 읽고 화면에 표시하는 기본적인 방법을 살펴보았습니다. JSON 파일의 구조를 변경하면 다양한 데이터 형태를 표현할 수 있으므로, 여러분만의 프로젝트에 적용해보시길 바랍니다.
'JavaScript' 카테고리의 다른 글
| JavaScript 코딩 규칙 + 알아둬야 할 센스 (0) | 2023.08.24 |
|---|---|
| JavaScript Debugging 오류 찾고 수정하기 (0) | 2023.08.24 |
| JavaScript JSON (0) | 2023.08.23 |
| JavaScript Modules ES6 모듈 (0) | 2023.08.23 |
| JavaScript 클래스(Class) + Getter와 Setter 함수 만들기 (0) | 2023.08.23 |