API와 Ajax 기초

팀 소개 웹페이지를 만들면서 가장 어려운 부분은 아무래도 클라이언트와 서버 간의 통신이었다.

이 때 나오는 개념인 api는 application programming interface의 줄임말로,

두 소프트웨어 구성요소가 서로 통신할 수 있게 만든다. 예를 들어, 기상청 자료와 휴대폰 날씨 앱의 상호작용.

api는 get과 post로 구성되고, post부분은 또한 데이터베이스와 연결되어서 추가적인 학습이 필요하다.

 

이번 미니 프로젝트에서 방명록 버튼을 누르면 방명록이 접혀졌다 펴지는

동적인 웹 페이지를 만드는 과정에서 ajax에 대해 더 자세히 배웠다.

그리고 이에 필요한 웹 프레임워크인 flask도 활용했다.

 

다음은 ajax의 기본 골격이다.

 

<script>
    $.ajax({
        type: "GET",
        url: "여기에URL을입력",
        data: {},
        success: function(response){
            console.log(response)
        }
    })
</script>

get 요청 시 데이터 중괄호 안은 비워준다.

서버에서 준 결과를 response라는 변수에 담고,

다음 중괄호 안에 나머지 코드를 작성해주면 된다.

 

코드 예시 출처: 스파르타 코딩클럽

<script>
    function q1() {
        // 여기에 코드를 입력하세요
        $('#names-q1').empty();
        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/seoulair",
            data: {},
            success: function (response) {
                let rows = response["RealtimeCityAir"]["row"];
                for (let i = 0; i < rows.length; i++) {
                    let gu_name = rows[i]['MSRSTE_NM'];
                    let gu_mise = rows[i]['IDEX_MVL'];

                    let temp_html = ''

                    if (gu_mise > 70) {
                        temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                    } else {
                        temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                    }

                    $('#names-q1').append(temp_html);
                }
            }
        })
    }
</script>

 

 

추가 자료

API 소개 영상

https://www.youtube.com/watch?v=ckSdPNKM2pY&list=WL&index=2 

https://www.youtube.com/watch?v=4DxHX95Lq2U&list=WL&index=3 

API 예시

https://github.com/ChickenPaella/Sloot/wiki/API-%EB%AA%85%EC%84%B8%EC%84%9C

GitHub - ChickenPaella/Sloot