이번에 수행할 과제는 1주차때 만들었던 페이지에 환율 API를 넣어 원-달러 환율을 표기하는 것이다. 이때 페이지가 나타날 때 자동으로 환율이 업데이트 되도록 해야 한다.
Ajax와 jQuery를 이용해 표기하면 되는 거라 크게 어려운 문제는 아니었다.
문제를 풀이한 과정은 다음과 같다.
1. 먼저 Ajax 틀을 가져온 다음 url을 붙여넣어준다.
function q1() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rate",
data: {},
success: function (response) {
}
})
}
2. 페이지가 나타날 때 자동으로 업데이트 되어야 함으로 그때 맞는 jQuery를 입력한다.
$(document).ready(function () {
q1();
});
⁂참고자료
https://bellsilver7.tistory.com/entry/Javascript-jQuery-페이지-로드-후-이벤트-실행하는-방법들의-차이점
Javascript & jQuery 페이지 로드 후 이벤트 실행하는 방법들의 차이점
안녕하세요. 은은한 개발자입니다. // 1번 $(document).ready(function(){}); // 2번 $(function(){}); // 3번 window.onload = function(){}; Javascript 와 jQuery 를 사용하다보면 페이지가 로딩 되었을 때 이..
bellsilver7.tistory.com
[jQuery] $(document).ready()란? - DOM 순서
[jQuery] document.ready() - DOM 순서 우리가 jquery를 쓸때 제일 처음에 써주는 $(document).ready(function(){}); 이것은 $(function(){}); 이렇게 줄여서 사용할 수 있습니다. 이 그림을 먼저 보시죠 위에서..
docu94.tistory.com
3. 1과 2를 합친 다음 API에서 환율을 가져와 웹페이지에 표기하도록 한다.
<script>
$(document).ready(function () {
q1();
});
function q1() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rate",
data: {},
success: function (response) {
let money = response['rate'];
console.log(money);
$(`#dollar`).html('달러-원 환율:');
$(`#dollar`).append(money);
}
})
}
</script>
let money로 환율API에서 rate를 가져온다. 그 후 id가 dollar로 되어있는 태그에 '달러-원 환율:'과 그 뒤에 환율을 붙여넣어 완성시킨다.
나는 처음에 이 둘을 붙여서 넣으려고 다양한 방법을 시도해보았다.
// 실패한 코드들...
$(`#dollar`).html('달러-원 환율:' ${money});
$(`#dollar`).html('달러-원 환율:', ${money});
$(`#dollar`).html('달러-원 환율: ${money}');이것들 외에도 다양하게 시도해보았지만 되지 않았고 결국 따로 주어 입력시켰다.
결과는 이렇게 나왔다.
깔끔하게 잘 나왔다. 그리고 코드를 몇 개 고쳐보았다.
먼저 아래 주문자이름 등 회색부분의 크기가 각각 달랐던 것을 고르게 맞추었다. 그리고 수량과 주소가 왼쪽으로 치우쳐져 있던 것은 inline-block을 주고 위치를 중앙에 맞추었다. 또한 글꼴도 넣어보았지만 그렇게 티가 나지 않아 아쉽다. 그래도 전보다 깔끔한 느낌을 주는 것 같아 만족스럽다.
