자바스크립트와 Ajax, jQuery.

예제 만들기와 함께 적용해보기.

사실, 유튜브로 공부하는 개념들은 오~이렇구나에 비해 비교적 그래서 어떻게 만드는 때에 적용하는거지? 라는 의문이 문득 생길때가 있는데, 100퍼센트는 아니라도 일정부분 해당 스파르타 코딩 클럽에서 조금씩 만들어 보는 것으로 써먹는 느낌이 든다. 오늘은 내가 이번에 강의에서 배운 부분인 Ajax와 jQuery를, 강의에서 만든 예제를 돌아보며 기록할 예정이다.

이번주에는.

1.자바스크립트의 jQuery를 사용하여 화면상에 의도된 메시지를 출력하는 방법.
2.서버API에 맞추어 정보를 요청해서 JSON형식의 데이터를 받아 화면에 적용시키는 방법.

을 배웠다.

먼저, jQuery는 자바스크립트에서 html의 요소를 조작하는 코드들을 미리 작성해준 라이브러리이다. 그래서, 자바스크립트에서 좀 길게 작성해야하는 코드들을 보다 직관적이고 덜 복잡하게 작성할 수 있는 장점이 있다. 다만, 별도의 기능이 아닌 단지 자바스크립트 코드를 미리 작성해 둔 것이기 때문에, 기본적인 자바스크립트 공부는 필수다.

제이쿼리를 보면,

$('').val()

인데, 이 구조에서 첫번째 $가 뭔가 궁금해 찾아보니, '나 이제 제이쿼리 쓸거임.' 라는 의미였다...뭔가 굉장히 중요한 내용이긴 하지만, 예상보다 담백했다. 여하튼, 이렇게 제이쿼리 사용을 선언 후, 저 괄호속의 내용은 CSS의 선택자라 생각하면된다. 형식도 똑같은데, html에서 대상의 태그, 클래스, 아이디 등 을 형식에 맞춰 적으면, 해당되는 요소가 지정된다. 그후 .원하는 활동함수를 적으면, 해당 작용이 대상에 일어난다.

그리고, 이런 제이쿼리가 들어가 있는 상태에서만 다음 형식의 ajax를 사용할 수 있는데, 이를 통해 서버에 데이터를 요청 할 수 있다. ajax의 형식은,

$.ajax({
  type: "GET"
  url: "",
  data: {}, 
  success: function(response){ 
    console.log(response) 
  }
})

위에 타입은 GET이 적혀 있지만, POST, DELETE, PUT 등으로 데이터에 대한 요청방식을 결정할 수 있다.
실제 연습에서 아직 "GET"만을 사용하였기에 일단 적어 두었다.
그리고 그 아래 url에는 데이터를 요청할 주소를 적으면 된다.
data부분에는 위의 형식이 GET이기에 비워두면 되지만 다른방식에서는 전송할 데이터에 대해 적으면 된다.
그 후에는 저 response에 불러온 데이터가 담기고 해당요소로 어떠한 행동을 취할지 작성하면 그 결과값이 리턴된다.
추가로, 저 success말고도, error가 일어났을때는 어떻게 출력될지, 다 끝내고는 어떻게 할지

error: function(), complete: function()

을 통하여 작성할 수 있다.

이렇게 위의 내용들을 함수에 더하여, 무언가를 누르면 어떠한 정보가 새로바뀌거나, 입력한 정보가 기록되거나, 이미 입력된 정보들을 지우는 등의 동작을 홈페이지에 적용할 수 있었다.
예제로 연습하는 사이트에서 영화 URL, 기록하기, 닫기 등이 들어있는 블록이 닫기를 누르면 없어지고, 영화기록하기 버튼을 누르면 나타나게 하기 위해 jQuery를 이용했다.

<button onclick="openbox()">영화 기록하기</button>

<div class="mypost" id="postbox">
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="URL" placeholder="[email protected]">
            <label for="URL">영화 URL</label>
        </div>
        <div class="input-group mb-3">
            <label class="input-group-text" for="inputGroupSelect01">별점</label>
            <select class="form-select" id="inputGroupSelect01">
                <option selected>몇점?</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="floatingTextarea"></textarea>
            <label for="floatingTextarea">코멘트</label>
        </div>
        <div class="buttons">
            <button type="button" class="btn btn-dark">기록하기</button>
            <button type="button" onclick="close_box()" class="btn btn-outline-dark">닫기</button>
        </div>
    </div>

해당부분이 html에서 위에 말한 블록들(영화 기록하기버튼, 닫기)을 구성하는 부분이다. my post라는 클래스를 가진 div태그에는, 특정하여 셀렉트하기위해 "postbox"라는 id를 부여했다. 그리고 영화 기록하기와 닫기 버튼 부분에 각각 온클릭 상황에 의도한 함수를 실행하도록 onclick=""으로 연결했다. 그리고, 함수 입력을 위해 위의 헤드부분 스크립트로 올라가서,

function openbox() {
            $('#postbox').show()
        }
function close_box() {
            $('#postbox').hide()
        }               

이렇게 위의 영화기록하기 버튼에 연결한 openbox() 함수에 jQuery를 사용하여 $('#postbox')로 아이디를 통해 선택한 뒤, .show()로 보이게 되도록 설정하고, 닫기 버튼에 연결한 close_box() 함수에도 동일하게 아이디로 선택 후 .hide()를 통해 안보이게 되도록 설정했다. 그리고 그 결과,

(영화기록하기가 점선으로 보이는것은 호버링 상태에서는 보더가 대쉬형식으로 변하도록 설정해줬기 때문이다.)

요렇게 목표했던대로 버튼에 따라 열리고 닫히는 것이 가능해졌다!

요런 흐름으로 jQuery가 다루어진다. 라는것을 알고난 뒤 들은 수업에서는 바로 ajax를 통해 JSON형식의 데이터를 받아와 사이트에 적용해 보는 것.

ajax를 통해 만든 예제인 서울시 따릉이 현황표. 코드의 구성을 단편적으로 보면,

<div class="question-box">
    <h2>2. 서울시 OpenAPI(실시간 따릉기 현황)를 이용하기</h2>
    <p>모든 위치의 따릉이 현황을 보여주세요</p>
    <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
    <button onclick="q1()">업데이트</button>
    <table>
        <thead>
        <tr>
            <td>거치대 위치</td>
            <td>거치대 수</td>
            <td>현재 거치된 따릉이 수</td>
        </tr>
        </thead>
        <tbody id="names-q1">
        </tbody>
    </table>
</div>

이것이 바디부분의 구성요소이다. 처음에 요소가 보이지 않다가, 버튼을 누르면 업데이트 되며 보이게 하기 위해 표의 형식은 만들어뒀지만, 그 내용이 들어갈 부분은 태그에 아이디만 부여해두고 자식요소를 비워두었다.
그리고 데이터를 요청하는 ajax부분을 보면,

 function q1() {
            $('#names-q1').empty();
            $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/seoulbike",
            data: {},
            success: function (response) {
                let rows = response['getStationList']['row']
                for (let i = 0; i < rows.length; i++) {
                    let name = rows[i]['stationName']
                    let rack = rows[i]['rackTotCnt']
                    let bike = rows[i]['parkingBikeTotCnt']
                    let temp_html =``
                    if (bike < 5) {
                        temp_html = `<tr class="urgent">
                                    <td>${name}</td>
                                    <td>${rack}</td>
                                    <td>${bike}</td>
                                 </tr>`
                    } else {
                        temp_html = `<tr>
                                    <td>${name}</td>
                                    <td>${rack}</td>
                                    <td>${bike}</td>
                                 </tr>`
                    }
                $('#names-q1').append(temp_html)
                }
            }
        })
        }

인데, 앞서 적어보았던 ajax 형식에 맞추어 작성되어져 있고, 겟 방식으로 스파르타 코딩 클럽에서 마련해둔 서울시 따릉이 정보링크를 url에 입력하여 정보를 받아왔다. 아래에 success function 내에서 가져온 정보중 필요한 부분을 rows로 정의하고, for문을 통해 i가 정보의 수만큼 숫자를 더해가며 반복되게 만들어둔 후, 각각의 필요한 정보들을 앞서 rows로 정의 한 것 처럼 정의해뒀다.

그리고 이러한 정보가 들어갈 temp_html을 정의한뒤 비워두고, 아래에서 if문을 통해 상황에 따라 어떠한 내용이 들어갈지 정해두었다. 예제에서는 5보다 바이크수가 클 경우, urgent라는 클래스를 부여하여 이걸 css에서 셀렉트해 붉은색으로 설정, 즉 바이크가 5대 미만일 경우 붉은 색으로 표시되도록 만든것이다.

이후 jQuery를 통해 지정한 html부분에 함수에 조건에 따라 앞서 정의한 temp_html이 추가되도록 .append(temp_html)을 적어서 버튼을 누를때 정보가 더해지게 만들고, 이 모든 요소들을 q1()함수에 포함시킨 후, 위 버튼의 온클릭 상황에 연결했다. 하지만, 이렇게만 설정하면 버튼을 누를때마다 계속 temp_html 뒤에 따라붙을테니 맨앞에 .empty()를 이용해서 이전 정보가 사라지고, 새로운 요소가 나타나도록 만들었다.