스파르타 코딩클럽 웹개발 종합반 - 2주차

2주차 과제물

 

2주차 수강후기 및 느낀점

이번주는 다른 준비했던 일들로 인해 웹종합반에 열심히 하지 않았는데요.
지금까지 배웠던 강의를 다시보며 복습해서 내 것으로 만들어야 겠다는 마음을 가지고 임해야 겠습니다.

[2주차 수업 목표]

1. Javascript 문법에 익숙해진다.
2. jQuery로 간단한 HTML을 조작할 수 있다.
3. Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다.

클라이언트에서 동작하는 js

Javascript를 이용하면 HTML을 조작할 수 있다고 하는데  let으로 변수를 선언하고, 조건대로 동작하는지 크롬 console로 먼저 찍어보면서 확인해 보았습니다.

let even = 4;
console.log(even % 2); // 2로 나눈 나머지가 0입니다.
let odd = 5;
console.log(odd % 2); // 2로 나눈 나머지가 1입니다.

 

jQuery라는 라이브러리를 활용하면서 코드도 간결해지고 브라우저 간 호환성 문제가 줄어들 수 있고
특별한 소프트웨어가 아닌 미리 작성된 Javascript 코드이므로 잘 활용한다면 좀 더 쉽게 만들 수 있을 것 같습니다.
https://www.w3schools.com/jquery/jquery_hide_show.asp 싸이트를 통해 필요한 기능 찾아서 써봐야 겠습니다.
아래 코드는 버튼을 클릭했을 때 포스팅 박스를 열고 닫는 기능을 구현했습니다.

  function openclose() {
            let status = $('#post-box').css('display');
            if (status == 'block') {
                $('#post-box').hide()
                $('#posting-box-btn').text('포스팅박스 열기')
                console.log(status)
            } else {
                $('#post-box').show()
                $('#posting-box-btn').text('포스팅박스 닫기')
            }
        }

 

Ajax는 jQuery의 한가지 부분이며 자바스크립트를 통해서 서버에 데이터를 요청해서 페이지의 일부만 출력하는 비동기식 출력방법이라고 합니다. 클라이언트에서 서버로 데이터를 요청하고 그에 대한 결과를 돌려받을 수 있습니다.
실습으로는 서울시 OpenAPI(실시간 미세먼지 상태),서울시 OpenAPI(실시간 따릉이 현황), 랜덤 고양이 사진 API를 이용해서 버튼을 클릭하면 실시간 데이터가 출력되도록 했습니다.

아래 코드를 통해 이번주 과제를 제출했는데요. 실시간 환율을 출력하도록 1주차 과제에 Ajax를 이용해 실시간 환율 API를 적용해보았어요. 버튼을 클릭이 아닌 화면이 로딩될 때 보여지도록 했습니다.

  function q1() {
            $.ajax({
                type: "GET",
                url: "https://api.manana.kr/exchange/rate.json",
                data: {},
                success: function (response) {
                    let now_rate = response[1]['rate'];
                    $("#now_rate").text(now_rate);
                }
            })
        }
        
  $(document).ready(function () {
            q1();
            // alert('다 로딩됐다!')
        });

html 화면에 표시되도록 달러 환율을 id로 지정해서 span 부분을 변경합니다.

<p class="rate">달러-환율 : <span id="now_rate">1250.15</span> </p>