[스파르타 내일배움단] 개발일지 - 2주차

Jayden ·2022년 10월 6일

jQuery(제이쿼리)

jQuery(제이쿼리)는 HTML 클라이언트 사이드 조작을 단순화 하도록 설계

jQuery의 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, Ajax 개발을 쉽게 할 수 있도록 디자인
=> HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리!

1. 사용법

- jQuery CDN

https://www.w3schools.com/jquery/jquery_get_started.asp

<head>~</head> 태그 사이에 import해서 사용

2. input 박스

input 박스 값을 가져와보기

<div class="form-floating mb-3">
    <input id="url" type="email" class="form-control" placeholder="name@example.com">
    < label>영화URL</label>
</div>

// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 url인 곳을 가리키고, val()로 값을 가져온다.
$('#url').val();

// 입력할때는?
$('#url').val('이렇게 하면 입력이 가능하지만!');

3. div 보이기/숨기기

<div class="mypost" id="post-box">
    <div class="form-floating mb-3">
        <input id="url" type="email" class="form-control" placeholder="name@example.com">
        <label>영화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="floatingTextarea2"
                  style="height: 100px"></textarea>
        <label for="floatingTextarea2">코멘트</label>
    </div>
    <div class="mybtns">
        <button type="button" class="btn btn-dark">기록하기</button>
        <button type="button" class="btn btn-outline-dark">닫기</button>
    </div>
</div>

// 크롬 개발자도구 콘솔창에 쳐보기
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.
$('#post-box').hide();

// show()로 보이게 한다.
$('#post-box').show();

4. 태그 내 html 입력하기

<div class="mycards">
    <div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box">
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">영화 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">나의 한줄 평을 씁니다</p>
                </div>
            </div>
        </div>
    </div>
</div>

1) 버튼 넣기

let temp_html = `<button>나는 추가될 버튼이다!</button>`;
$('#cards-box').append(temp_html);

2) 카드 넣기

// 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
// 숫자 1번 키 왼쪽의 버튼을 누르면 backtick(`)이 입력됩니다.
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.
let title = '영화 제목이 들어갑니다';

let temp_html = `<div class="col">
				            <div class="card h-100">
				                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
				                     class="card-img-top" alt="...">
				                <div class="card-body">
				                    <h5 class="card-title">${title}</h5>
				                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
				                    <p>⭐⭐⭐</p>
				                    <p class="mycomment">나의 한줄 평을 씁니다</p>
				                </div>
				            </div>
				        </div>`;
$('#cards-box').append(temp_html);

Quiz

<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>jQuery 연습하고 가기!</title>

    <!-- JQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }
    </style>

    <script>
        function q1() {
            // 1. input-q1의 입력값을 가져온다.
            let value = $('#input-q1').val();
            // 2. 만약 입력값이 빈칸이면 if(입력값=='')
            if (value == '') {
                // 3. alert('입력하세요!') 띄우기
                alert('입력하세요!');
            } else {
                // 4. alert(입력값) 띄우기
                alert(value);
            }
        }

        function q2() {
            // 1. input-q2 값을 가져온다.
            let email = $('#input-q2').val();
            // 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 찾아보자!)
            if (email.includes('@')) {
                // 3. info@gmail.com -> gmail 만 추출해서
                // 4. alert(도메인 값);으로 띄우기
                let domainWithDot = email.split('@')[1];
                let onlyDomain = domainWithDot.split('.')[0];
                alert(onlyDomain);
            } else {
                // 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
                alert('이메일이 아닙니다.');
            }
        }

        function q3() {
            // 1. input-q3 값을 가져온다.
            let newName = $('#input-q3').val();
            if (newName == '') {
                alert('이름을 입력하세요');
                return;
            }
            // 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${가져온 값}</li>`)
            let temp_html = `<li>${newName}</li>`;
            // 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
            $('#names-q3').append(temp_html);
        }

        function q3_remove() {
            // 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
            $('#names-q3').empty();
        }

    </script>

</head>

<body>
    <h1>jQuery + Javascript의 조합을 연습하자!</h1>

    <div class="question-box">
        <h2>1. 빈칸 체크 함수 만들기</h2>
        <h5>1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기</h5>
        <h5>[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기</h5>
        <input id="input-q1" type="text" /> <button onclick="q1()">클릭</button>
    </div>
    <hr />
    <div class="question-box">
        <h2>2. 이메일 판별 함수 만들기</h2>
        <h5>2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기</h5>
        <h5>2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기</h5>
        <h5>[완성본]2-3. 이메일 도메인만 얼럿 띄우기</h5>
        <input id="input-q2" type="text" /> <button onclick="q2()">클릭</button>
    </div>
    <hr />
    <div class="question-box">
        <h2>3. HTML 붙이기/지우기 연습</h2>
        <h5>3-1. 이름을 입력하면 아래 나오게 하기</h5>
        <h5>[완성본]3-2. 다지우기 버튼을 만들기</h5>
        <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>
</body>

</html>

Ajax (Asynchrous JavaScript and XML)

자바스크립트를 이용하여 비동기식으로 XML을 이용하여 서버와 통신하는 방식

최근에는 XML 보다 JSON을 더 많이 사용

클라이언트에서 서버에 데이터를 요청 후 응답 받아서 웹페이지의 일부분만 갱신하기 위해 사용
(CSR : Client Side Rendering 방식으로 렌더링)

비동기식으로 서버와 통신하는 동안 다른 작업 가능

요즘은 ES2015 표준으로 Fetch API가 등장하면서 비동기(Promise)적으로 AJAX를 구현

이미지 출처 : http://www.tcpschool.com/ajax/ajax_intro_works

Ajax의 동작방식

요청 : 브라우저는 서버에 정보를 요청(브라우저는 Ajax요청을 담당하는 XMLHttpRequest라는 객체를 구현
(서버는 응답으로 데이터를 전달(XML, JSON)
응답 : 브라우저는 콘텐츠를 처리하여 페이지에 추가

jQuery를 이용한 Ajax

jQuery를 이용하여 Ajax를 사용하게 되면 많은 이점이 있음

자바스크립트에서는 XMLhttpRequest를 직접 사용하기 때문에 구현시 복잡

jQuery를 이용하면 간단하게 서버와 데이터를 주고 받을 수 있음

출처 : https://devyj.tistory.com/1

Ajax의 기본 골격

$.ajax({
  type: "GET", // 호출 방식 GET 방식과 POST 방식이 존재
  url: "http://spartacodingclub.shop/sparta_api/seoulair", // 요청할 url
  data: {}, // 요청시에 함께 전송할 데이터 (GET 요청시 사용하지 않음)
  
		/*  GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져감
		http://naver.com?param=value&param2=value2 

		POST 요청은, data : {} 에 넣어서 데이터를 가져감
		data: { param: 'value', param2: 'value2' },
		*/  
  
  success: function(response){ //서버에서 준결과를 response에 담음
    // 서버에서 전달받은 response를 활용한 나머지 코드 작성
  console.log(response)
  }
})

Quiz

서울시 따릉이 OPEN API를 호출해서 따릉이 대수가 5대 미만을 곳을 빨간색으로 표시

<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>jQuery 연습하고 가기!</title>
    <!-- jQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }

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

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

        .urgent {				
            color: red;
            font-weight: bold;
        }
    </style>

    <script>
        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 rack_name = rows[i]['stationName'];
                        let rack_cnt = rows[i]['rackTotCnt'];
                        let bike_cnt = rows[i]['parkingBikeTotCnt'];
                        let temp_html = '';
                        if (bike_cnt < 5) {
                            temp_html = `<tr class="urgent">  
                                <td>${rack_name}</td>
                                <td>${rack_cnt}</td>
                                <td>${bike_cnt}</td>
                              </tr>`
                            // 따릉이 대수 5개 이하인 곳을 빨강으로 표시
                        } else {							
                            temp_html = `<tr>
                                <td>${rack_name}</td>
                                <td>${rack_cnt}</td>
                                <td>${bike_cnt}</td>
                              </tr>`
                        	// 나머지는 그대로 표시
                        }
                        $('#names-q1').append(temp_html);
                    }
                }
            })
        }
    </script>

</head>

<body>
    <h1>jQuery+Ajax의 조합을 연습하자!</h1>

    <hr />

    <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>
</body>

</html>