항해 99 - 웹개발 종합반 - WIL - 2

1. 배운 내용

 

1) Javascript 문법에 익숙해진다.

2) jQuery로 간단한 HTML을 조작할 수 있다.

3) Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다.

 

배운 것을 가볍게 정리하자면

JQuery: Javascript의 라이브러리, 즉 함수 모음

특정한 기능을 일일히 Javascript 코드로 짜면 매우 비효율적일 것이다. 그래서 전문가들이 필요한 기능을 구현해놓고 그것을 모아놓은 것이 JQuery이다.

JQuery를 특정 페이지에서 쓰기 위해선 해당 페이지에 JQuery를 import 해야한다.

 

Ajax: (지금까지 배운 것을 기준으로 하자면) Javascript로 클라이언트와 서버가 통신할 수 있도록 해주는 라이브러리

Ajax역시 jQuery를 임포트한 페이지에서만 동작 가능하다.

은행창구와도 같은 API를 통해 데이터를 신청하는 데 그 방식엔 GET과 POST 방식이 있다.

POST는 아직 배우지 않아 기록하지 않기로 한다.

 

[GET 방식으로 데이터를 전달하는 방법]

 

?: 여기서부터 전달할 데이터가 작성된다는 의미

& : 전달할 데이터가 더 있다는 뜻

 

예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

 

위 주소는 google.com의 search 창구에 다음 정보를 전달함

q=아이폰 (검색어) sourceid=chrome (브라우저 정보) ie=UTF-8 (인코딩 정보)

 

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

 

이러한 개념들을 바탕으로 오픈API를 활용하여 랜덤 고양이 사진을 보여주는 페이지, 서울 시 따릉이 주차 현황 등을 구현해보았다.

이 과정에서 흔히 쓰이는 코드 패턴들을 배워볼 수 있었다. 가령 아래와 같이 Ajax 콜로 호출한 데이터 중 필요한 것만 추출, 기존 페이지에 추가, 보기좋게 출력하는 패턴이 있다.

 

 $.ajax({
                type: "GET",
                url: "오픈 API가 들어갈 부분, 서울 시 따릉이 API",
                data: {},
                success: function (response) {

                    let rows = response['getStationList']['row']
                    for (let i = 0; i < rows.length; i++) {

                        let station = rows[i]['stationName']
                        let rack = rows[i]['rackTotCnt']
                        let parking = rows[i]['parkingBikeTotCnt']

                        let temp_html = ``
                        if (parking < 5) {
                            temp_html =
                            `<tr class="low">
            <td>${station}</td>
            <td>${rack}</td>
            <td>${parking}</td>`
                        } else {
                            temp_html =
                                `<tr>
            <td>${station}</td>
            <td>${rack}</td>
            <td>${parking}</td>`
                        }
                        $('#names-q1').append(temp_html)
                    }

위와 같이 JQuery에서 ``(Backtick)이라는 것을 쓰게되면 기본적으로는 따옴표처럼 문자열을 표시해주지만, ``안에 들어가 있는 것에 ${넣어줄 값 or 변수명}으로 값을 그때 그때 넣어줄 틀을 만들어 줄 수도 있다.

 

이렇게 배운 것들을 토대로 아래와 같은 페이지를 만들었다.

환율 API까지 Ajax와 JQuery를 이용하여 추가, 로딩과 동시에 환율이 표시된다.

 

2. 수강 후기

1주차에는 Javascript를 아주 가볍게만 다루었었고 2주차는 본격적으로 다루었다. 꽤 어려운 부분들이 많았으나 차근차근 해결해나가는 맛이 있었고, 프론트엔드의 실질적인 부분을 배워서 뿌듯했다 :)

 

정말 겉으로만 알던 프론트엔드를 좀 더 알게되었다. 항상 프론트엔드가 서버와 교류할 땐 무엇을 하는 건지 몰라 막막했는데

JQuery와 Ajax를 알고 나니 이젠 HTML코드도 좀 더 읽기 수월할 것 같다.

비록 GET이라던가 Ajax 등 배운 것에 대해 100% 이해한 것은 아니지만 앞으로 코딩을 해나가며 차근차근 알아가보고자 한다.

 

다음 주차 내용이 기대된다!