본문 바로가기
Development/Web

JavaScript와 JQuery, 그리고 Ajax

최원영 2022. 2. 13. 18:35

들어가며

2주차 강의에서는 jQuery와 Ajax에 대해서 다루는데, 여기부터 내가 이 교육 과정을 신청하게 된 이유가 드러난다. 나는 jQuery나 Ajax 요청을 배우지 않고, HTML, CSS, Javascript만 간단히 공부하고 바로 React로 넘어왔기 때문에 jQuery나 Ajax에 대해서는 지식이 부족하다. React로 개발할 때에는 axios를 사용하여 API를 요청하였는데, 기본적으로 Ajax에 대해서는 알고 있어야 할 것만 같은 찜찜함이 늘 가시지 않았다(jQuery나 Ajax도 혼자서 공부하기에 어렵지 않은 부분이지만, 혼자서 스파게티식 교육을 하기 보다는 커리큘럼이 있는 교육을 받고 싶었다).

jQuery + Javascript 연습

Q1. 빈칸 체크 함수 만들기

❓ 문제

버튼을 눌렀을 때 빈 칸인 경우 '입력하세요!'를 알림창에 띄우고, 값이 입력된 상태이면 입력받은 값을 알림창에 띄워보자.

<div class="question-box">
    <input id="input-q1" type="text" />
    <button onclick="q1()">클릭</button>
</div>

✔ 풀이

function q1() {
    const text = $("#input-q1").val();
    if (text === "") {
        alert("입력하세요!");
    } else {
        alert(text);
    }
}

Q2. 이메일 판별 함수 만들기

❓ 문제

입력받은 값이 이메일이 아닌 경우(@가 없는 경우) '이메일이 아닙니다'를 알림창에 띄우고, 이메일 형태가 맞으면 이메일의 도멘인만 알림창에 띄워보자.

<div class="question-box">
    <input id="input-q2" type="text" />
    <button onclick="q2()">클릭</button>
</div>

✔ 풀이

function q2() {
    const email = $("#input-q2").val();
    if (email.includes("@")) {
        alert(email);
    } else {
        alert("이메일이 아닙니다.");
    }
}

Q3. HTML 추가/삭제 연습

❓ 문제

'이름 붙이기' 버튼을 클릭하면 입력받은 값을 목록에 추가하고, '전부 지우기' 버튼을 누르면 목록의 모든 이름을 전부 지워보자. 이때, 입력받은 값이 없으면 '이름을 입력하세요'를 알림창에 띄워야 한다.

<div class="question-box">
    <input id="input-q3" type="text" placeholder="여기에 이름을 입력" />
    <button onclick="q3()">이름 붙이기</button>
    <button onclick="q3_remove()">전부 지우기</button>
    <ul id="names-q3">
        <li>세종대왕</li>
        <li>임꺽정</li>
    </ul>
</div>

✔ 풀이

function q3() {
    const input = $("#input-q3");
    const name = input.val();
    const names = $("#names-q3");

    if (name === "") {
        alert("이름을 입력하세요.");
    } else {
        names.append(`<li>${name}</li>`);
        input.val("");
    }
}

function q3_remove() {
    const names = $("#names-q3");
    names.children().map(i => {
        names.children()[0].remove();
    });
}

위에 풀이 중에서 q3_remove()를 보면 정답이 아니라는 것을 알 수 있다. 이게 바로 jQuery를 거치지 않고 React로 넘어온 나의 한계인 것 같다고 느꼈다. 위의 코드도 잘 작동은 하기 때문에 오답이라고는 할 수 없는데, 강의 영상에 나온 정답은 아래 코드와 같이 간결하다.

function q3_remove() {
    $('#names-q3').empty();
}

Ajax

서버로부터 요청보내는 방식으로는 GET, POST, PUT, DELETE가 있는데, Ajax는 이러한 방식으로 API를 요청할 수 있도록 도와주는 라이브러리이다.

  • GET : 데이터 요청
  • POST : 데이터 추가
  • PUT : 데이터 수정
  • DELETE : 데이터 삭제

Ajax는 jQuery를 임포트한 페이지에서만 동작하며, 아래 코드와 같이 API를 요청할 수 있다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    const eventHandler = () => {
        $.ajax({
            type: "GET",
            url: '...',
            data: {},
            success: (res) => {
                console.log(res);
            }
        });
    };
</script>
  • type : API 요청 방식(GET, POST, PUT, DELETE)
  • url : API 서버의 URL
  • data : POST, PUT, DELETE 요청 시 서버로 넘겨줄 데이터(Object)
  • success : 요청 성공 시 실행할 콜백함수

jQuery + Ajax 연습

Q1. 서울시 실시간 미세먼지 상태 OpenAPI 이용

❓ 문제

서울시 모든 구의 미세먼지 현황을 보여주는 웹 페이지를 구현해보자. 단, 업데이트 버튼을 누를 때마다 모든 정보가 새로 표기되어야 하며, 미세먼지 수치(IDEX_MVL)이 70 이상인 경우 글자색을 빨강색으로 나타내어야 한다.

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        const api = "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99";
        const reload = () => {};
    </script>
</head>
<body>
    <div class="question-box">
        <button onclick="reload()">업데이트</button>
        <ul id="names-q1"></ul>
    </div>
</body>

✔ 풀이

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        const api = "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99";

        const reload = () => {
            $.ajax({
                type: "GET",
                url: api,
                data: {},
                success: (res) => {
                    const {RealtimeCityAir: {row}} = res;
                    const ul = $('#names-q1');
                    ul.empty();

                    row.forEach(data => {
                        const {MSRSTE_NM, IDEX_MVL} = data;

                        let liClass = '';
                        if (parseInt(IDEX_MVL) >= 70) {
                            liClass = 'class="red-color"';
                        }

                        ul.append(`<li ${liClass}>${MSRSTE_NM} : ${IDEX_MVL}</li>`);
                    });
                }
            });
        };
    </script>
    <style>
        .red-color {
            color: red;
        }
    </style>
</head>
<body>
    <div class="question-box">
        <button onclick="reload()">업데이트</button>
        <ul id="names-q1"></ul>
    </div>
</body>

Q2. 서울시 실시간 따릉이 현황 API 이용

❓ 문제

서울시 모든 위치의 따릉이 현황을 보여주는 웹 페이지를 구현해보자. 단, 업데이트 버튼을 누를 때마다 모든 정보가 새로 표기되어야 하며, 현재 거치된 따릉이 수(parkingBikeTotCnt)가 5개 이하인 경우 글자색을 빨강색으로 나타내어야 한다.

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        const api = "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99";
        const reload = () => {};
    </script>
    <style>

        table {
            border: 1px solid;
            border-collapse: collapse;
        }

        td,
        th {
            padding: 10px;
            border: 1px solid;
        }
    </style>
</head>
<body>
    <div>
        <button onclick="reload()">업데이트</button>
        <table>
            <thead>
                <tr>
                    <td>거치대 위치</td>
                    <td>거치대 수</td>
                    <td>현재 거치된 따릉이 수</td>
                </tr>
            </thead>
            <tbody id="names-q1">
            </tbody>
        </table>
    </div>
</body>

✔ 풀이

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        const api = 'http://spartacodingclub.shop/sparta_api/seoulbike';
        const reload = () => {
            $.ajax({
                type: "GET",
                url: api,
                data: {},
                success: (res) => {
                    const tblBody = $('#names-q1');
                    tblBody.empty();
                    const {getStationList: {row}} = res;
                    row.forEach(data => {
                        const {stationName, rackTotCnt, parkingBikeTotCnt} = data;

                        let trClass = '';
                        if (parseInt(parkingBikeTotCnt) <= 5) {
                            trClass = 'class="red-color"';
                        }

                        tblBody.append(`<tr ${trClass}>
                                            <td>${stationName}</td>
                                            <td>${rackTotCnt}</td>
                                            <td>${parkingBikeTotCnt}</td>
                                        </tr>`);
                    });
                }
            });
        }
    </script>
    <style>

        table {
            border: 1px solid;
            border-collapse: collapse;
        }

        td,
        th {
            padding: 10px;
            border: 1px solid;
        }

        .red-color {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <button onclick="reload()">업데이트</button>
        <table>
            <thead>
                <tr>
                    <td>거치대 위치</td>
                    <td>거치대 수</td>
                    <td>현재 거치된 따릉이 수</td>
                </tr>
            </thead>
            <tbody id="names-q1">
            </tbody>
        </table>
    </div>
</body>

Q3. 랜덤 고양이 사진 API 이용

랜덤 고양이 사진을 보여주는 웹 페이지를 구현해보자. 단, 랜덤 고양이 사진은 웹 브라우저가 되자마자 보여져야 하며, 업데이트 버튼을 누를 때마다 이미지가 바뀌어야 한다.

❓ 문제

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        const api = 'https://api.thecatapi.com/v1/images/search';
        const reload = () => {};
    </script>
</head>
<body>
    <div class="question-box">
        <button onclick="reload()">업데이트</button>
        <div>
            <img id="img-cat"/>
        </div>
    </div>
</body>

✔ 풀이

<head>
    <script>
        const api = 'https://api.thecatapi.com/v1/images/search';
        const reload = () => {
            $.ajax({
                type: 'GET',
                url: api,
                data: {},
                success: (res) => {
                    const {url} = res[0];
                    $('#img-cat').attr("src", url);
                }
            });
        };

        $(document).ready(() => {
            reload();
        });
    </script>
</head>
<body>
    <div class="question-box">
        <button onclick="reload()">업데이트</button>
        <div>
            <img id="img-cat"/>
        </div>
    </div>
</body>

$(선택자).attr('속성', 값)으로 태그의 속성값을 변경할 수 있고, $(document).ready()에 콜백함수를 인자를 넘겨주어 웹 페이지가 로딩이 완료된 후 어떠한 작업을 수행할 수 있다.

마치며

2주차 내용을 정리하면서 마치 웹 개발의 첫 번째 발걸음을 '제대로' 내딛은 느낌이 들었다. DOM이나 API 요청 등의 개념은 알고 있던 상태라 내용은 전혀 어렵게 느껴지지 않았으나, 블로그나 유튜브를 통해 얄팍한 지식으로 알고 있던 jQuery와 Ajax를 직접 사용해보면서 그 개념이 완전히 정립되었기 때문이다. 3주차부터는 가장 자신있는 파이썬 기초개념과 크롤링에 대한 내용을 다루기 때문에 즐기면서 강의를 수강할 수 있을 것 같다.

'Development > Web' 카테고리의 다른 글

Container 개념과 Docker 기초 내용  (0) 2022.02.18
Flask 기초 내용, 그리고 API 와 HTTP 요청  (2) 2022.02.18
Bundle 개념과 WebPack 사용 방법  (0) 2022.02.17
HTML + CSS 자주 등장하는 질문 정리  (0) 2022.02.11
React 개발 환경 구축 및 GitHub Pages 배포 방법  (0) 2021.10.01

티스토리툴바