이전 실습들을 활용해서 "서울시 실시간 온도" 를 기존 작업 된 웹페이지에 넣어보자.
1. 기존 작업한 웹 페이지에 fetch에 OpenAPI 링크 설정, 요소를 추가한 span 추가
기초 HTML 뼈대는 다음과 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>스파르타 피디아</title>
<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 --><link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet" />
<style>
/* style.css로 모듈화 시킴 */
</style>
<script>
$(document).ready(function() {
fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {
console.log(data)
})
})
</script>
</head>
<body>
<div class="mytitle">
<h1>내 생애 최고의 영화들</h1>
<div>현재 서울의 날씨 : <span id="temp">20</span>도</div>
<button onclick="hey()">영화 기록하기</button>
</div>
<div class="mypost">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com" />
<label for="floatingInput">URL</label>
</div>
<!-- 별점 갯수 https://getbootstrap.com/docs/5.0/forms/input-group/ --><div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Review Score</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>Select Your Score</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="5">⭐⭐⭐⭐⭐</option>
</select>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
style="height: 100px"></textarea>
<label for="floatingTextarea2">Comment</label>
</div>
<div class="mybtns">
<button type="button" class="btn btn-dark">Write</button>
<button type="button" class="btn btn-outline-dark">Close</button>
</div>
</div>
<div class="mycards">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다</h5>
<p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 한줄 평을 씁니다</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다</h5>
<p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 한줄 평을 씁니다</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다</h5>
<p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 한줄 평을 씁니다</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다</h5>
<p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 한줄 평을 씁니다</p>
</div>
</div>
</div>
<!-- col --></div>
<!-- card --></div>
</body>
</html>
JavaScript
복사
"현재 서울의 날씨 : 20도"로 하드코딩된 부분에 실시간 데이터가 적용되도록 하는 것이 목표이다.
우선 링크의 이상이 없고
서울의 온도인
temp를 "20"도 라 표현된 부분에 반영되게 변경하면 될 것 같다.
2. Fetch 기본 골격 코드와 OpenAPI 코드를 통해 데이터를 받아오자.
Fetch 기본 골격
fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {
console.log(data)
})
JavaScript
복사
OpenAPI URL :
OpenAPI의 데이터가 들어오는지부터 확인한다.
console.log 주석들을 통해 정상적으로 데이터가 들어오는지 확인한다.
이전과 다르게 데이터 리스트 구조가 Air>row 처럼 상위, 하위 구조가 없고
데이터 자체에서 Dictionary 형식으로 temp key값이 위치하고 있다. temp 변수를 선언.
$(document).ready(function () {
fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {
console.log(data)
let temp = data['temp']
// 데이터 들어오는지 확인console.log(temp)
})
})
JavaScript
복사
temp라는 변수에 바로 원하는 값만 추출되는 것을 확인 할 수 있다.
3. 데이터가 들어오는 것을 확인했으면 HTML에 기록되도록 해보자
append 를 통해 HTML의 span중 temp란 id를 가진 텍스트를 교체하면 된다.
하드코딩된 부분은 empty()로 비워주고 데이터로 받아온 temp값이 대체해서 들어가도록 한다.
$(document).ready(function () {
fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {
console.log(data)
let temp = data['temp']
// 데이터 들어오는지 확인console.log(temp)
$('#temp').empty()
$('#temp').append(temp)
})
})
JavaScript
복사
해당 코드의 결과 페이지는 새로고침 할 때마다 다음처럼 나타난다.
그 이유는
$(document).ready(function ()
JavaScript
복사
을 사용 했기 때문에 웹 페이지가 로딩 될 때 해당 함수(여기선 fetch)를 수행하게 된다.
4. 조건문을 통해 스타일 제어
조금 더 복습하기위해서
조건문을 통해 텍스트 색상을 변경하고자 했다.
온도가 20도 초과인 경우엔 빨간색
온도가 20도 미만인 경우엔 파란색
글씨로 나타난다.
<style>
/* style.css로 모듈화 시킴 */
.red{
color: red;
}
.blue{
color: blue;
}
</style>
JavaScript
복사
<script>
$(document).ready(function () {
fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {
console.log(data)
let temp = data['temp']
// 데이터 들어오는지 확인console.log(temp)
$('#temp').empty()
if (temp > 20){
$('#temp').append("<span class='red'>"+temp+"</span>")
} else{
$('#temp').append("<span class='blue'>"+temp+"</span>")
}
})
})
</script>
JavaScript
복사
이 부분은 원래 class가 있는 span을 추가하는 것 말고
기존의 temp span에 클래스 속성을 red or blue로 변경되는 것을 생각했었는데 해결하지 못했다.
검색이 어렵다. 조건문에 따라 #temp span에 속성을 변경하는 방법이 있는지 찾아봐야겠다.
•
추가
검색을 통해서 확인한것 속성을 바꾸려면 .attr(‘속성’,’값’)을 쓸 수 있다.
분명히 이전에 배웠던 것인데 찾아보니 생각났다.
선택한 요소의 속성을 생성,수정 하는 동작
한번 사용해보자
$('#temp').text(temp)
if (temp > 20){
$('#temp').attr('class','red')
} else{
$('#temp').attr('class','blue')
}
JavaScript
복사
정상적으로 동일하게 작동된다.
불필요한 span이 중복되서 추가되는 등 코드가 복잡해지는 것을 줄일 수 있었다.
참조한 내용은 아래에서 확인 할 수 있었다.
