사전 스터디(웹개발 종합반 2주차)

[수업 목표]
1. Javascript 문법에 익숙해진다.
2. jQuery로 간단한 HTML을 조작할 수 있다.
3. Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다.

✍️새로 학습한 내용

1. JQuery

👉 HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. (라이브러리!)

👉 웹 페이지를 작성할 경우 JavaScript를 활용하여 동적인 부분을 처리하는데 이때, 1) 코드가 복잡해진다. 2)브라우저(크롬,사파리,IE 등) 간 호환성 문제등이 생길 수 있으며, JQuery는 이러한 문제점을 해결하기 위해 등장한 (라이브러리)이다.

JavaScript와 JQuery 비교

아래 비교한 코드와 같이 자바스크립트로 HTML 요소를 조작하기 위해서는 코드가 복잡해지는 반면, 미리 만들어 놓은 JQuery 함수를 사용하여 보다 쉽게 요소를 조작할 수 있다.

JS : document.getElementById("element").style.display = "none";

JQuery : $('#element').hide();

JQuery 라이브러리 임포트

1. 링크 접속 : https://www.w3schools.com/jquery/jquery_get_started.asp

jQuery Get Started

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

2. CDN을 복사하여 HTML 문서에 head 태그 안에 넣어주기

JQuery 사용하기

$('#요소ID값').사용할함수(); ->ID선택자를 사용한 경우
$('선택자').사용할함수(); -> 여러가지 선택자를 활용할 수도 있다.

JQuery 함수

함수	설명	예시
val()	지정한 요소 값 가져오기 (Form 요소 - input,textarea)	$('#url').val()
val('내용')	지정한 요소에 값 넣기 (Form 요소 - input,textarea)	$('#url').val('aaa@gmail.com')
append('내용')	선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가한다.(HTML 형태)	let temp_html = `<li>영화보기</li>` $('#my-list').append(temp_html)
empty()	지정한 요소 비우기	$('#my-list').empty()
attr(속성,값)	지정한 요소 속성 값 변경	$('#my-img').attr('src','./img/my.png')
text('내용')	지정한 요소에 text 넣기 (Form요소가 아닌 태그 내 text)	$('#my-text').text('꿀맛!')
show()	지정한 요소 보이기	$('#post-box').show()
hide()	지정한 요소 숨기기	$('#post-box').hide()

이외에 더 많은 함수가 있으며, 위에 JQuery 링크에 접속하여 확인해볼 수 있다.

2. Ajax(서버-클라이언트 통신)

👉 Asynchronous JavaScript and XML의 약자이며, 빠르게 동작하는 동적 웹 페이지를 만들기 위한 하나의 개발기법.
👉웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있습니다.
👉백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있습니다.
👉 JSON / XML / HTML / 텍스트 파일 등 다양한 형태의 데이터를 주고받을 수 있습니다.
👉 클라이언트와 서버 간 통신을 통해서 데이터를 요청하고 응답받기 위해 사용
👉 대표적인 요청 방식으로 GET, POST방식이 있음
👉 Ajax를 사용하기 위해서는 JQuery를 반드시 임포트 해야합니다.
→임포트 하지 않을 시 [Uncaught TypeError: $.ajax is not a function] 에러 발생!

요청 방식

GET → 통상적으로! 데이터 조회(Read)를 요청할 때
예) 영화 목록 조회

POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
예) 회원가입, 회원탈퇴, 비밀번호 수정

Ajax 기본 골격

$.ajax({
    type: "GET", // 요청방식(GET,POST,... 등)
    url: "여기에URL을입력", //요청할 서버 URL
    data: {}, // POST방식 사용 시 넘겨줄 값 {키:값,키:값,....}
    success: function(response){  // 정상처리 시 불리는 함수(response로 응답 시 넘어온 값을 받는다)
        console.log(response) //넘어온 값 개발자도구 콘솔에 찍기
    }
})

JSON 형식 데이터 Form

해당 데이터는 서울시 미세먼지 오픈 API로 요청 시 받을 수 있는 JSON형태의 데이터 일부이다.
JSON형태로 주고 받는 데이터 형태를 보면, 키-값 형태의 딕셔너리와 여러 데이터를 하나로 묶은 리스트 형태가 조합되어 있는 것을 확인해 볼 수 있다.
이와같이 응답 시 받은 데이터를 확인해본 후 원하는 값들을 얻어서 사용할 수 있다.

한계

Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없습니다.
Ajax로는 바이너리 데이터를 보내거나 받을 수 없습니다.
Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수는 없습니다.
클라이언트의 PC로 Ajax 요청을 보낼 수는 없습니다.

클라이언트 풀링 방식 / 서버 푸시 방식

클라이언트 풀링(client pooling) 방식?
→ 사용자가 직접 원하는 정보를 서버에게 요청하여 얻는 방식을 의미합니다.

서버 푸시(server push) 방식?
→ 사용자가 요청하지 않아도 서버가 알아서 자동으로 특정 정보를 제공하는 것을 의미합니다.
→ 스마트 폰에서 각종 앱이 보내는 푸시 알림이 서버 푸시 방식의 대표적인 예입니다.

💻과제

팬명록 로딩 시 날씨 API를 활용하여 현재 기온 표시하기

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
    <title>스파르타코딩클럽 | 2주차 과제</title>
    <style>
        * {
            font-family: 'Gowun Dodum', sans-serif;
        }
        .mytitle {
            height: 250px;
            width: 100%;
            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://cdn.newsculture.press/news/photo/202209/511072_621954_2920.jpg");
            background-position: center;
            background-size: cover;
            color: white;

            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        .mypost{
            max-width:500px;
            width:95%;
            margin:20px auto 0px auto;
            box-shadow: 0px 0px 3px 0px gray;
            padding:20px;
        }

        .mypost > button {
            margin-top: 10px;
        }
        .mycard{
            max-width:500px;
            width:95%;
            margin:20px auto 0px auto;
        }

        .card {
            margin-bottom: 10px;
        }
    </style>
    <script>
        $(document).ready(function () {
            $.ajax({
                type:"GET",
                url:"http://spartacodingclub.shop/sparta_api/weather/pyongtak",
                data:{},
                success: function(response){
                    let temp = response['temp']
                    $('#temp').text(temp);
                }
            })
        });
    </script>
</head>

<body>
    <div class="mytitle">
        <h1>이영지 팬명록</h1>
        <p>현재기온 : <span id="temp">00.0</span>도</p>
    </div>
    <div class="mypost">
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
            <label for="floatingInput">닉네임</label>
        </div>
        <div class="form-floating">
            <textarea class="form-control" style="height:100px" placeholder="Leave a comment here"
                      id="floatingTextarea"></textarea>
            <label for="floatingTextarea">응원댓글</label>
        </div>
        <button type="button" class="btn btn-dark">응원남기기</button>
    </div>
    <div class="mycard">
        <div class="card">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>SMTM11 우승 축하한다</p>
                    <footer class="blockquote-footer">jypark</footer>
                </blockquote>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>MZ세대 롤모델</p>
                    <footer class="blockquote-footer">X세대</footer>
                </blockquote>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>장하다 우리 딸!</p>
                    <footer class="blockquote-footer">더 쿼이엇</footer>
                </blockquote>
            </div>
        </div>
    </div>
</body>

</html>

🖊 회고

2주차 강의에서는 웹 사이트를 동적으로 조작하는 방법으로 JQuery를 배웠다. JQuery에 대해서는 알고 있었지만 공부해본 적이 없고, JQuery 문서도 처음으로 한번 이것저것 둘러본 계기가 되었다. 사실상 자바스크립트도 잘 모르기에 2주차 강의를 들으면서 실습해보고 익숙해지는 좋은 시간이라 생각된다.

AJax에 대해서는 기존에 다루어 본 적이 있어서 낯설지만은 않았다. 그래서 이번 기회에 간단하게라도 어떤식으로 되어있고, 속성들은 어떤 값들로 채워지는지를 중점으로 학습했던 것 같다.

마지막으로 항상 내 서버쪽으로 요청하도록 사용을 했었는데 이번에 오픈 API로 활용해보고 넘어오는 JSON형태의 데이터도 확인해보고 실제로 웹 페이지에 JQuery와 함께 적용해보면서 서버-클라이언트 간 통신하는 부분에 대해서 이해하고 감을 잡는데 유용한 시간이 되었다.

저작자표시 비영리 변경금지

'항해99' 카테고리의 다른 글

사전 스터디(웹개발 종합반 5주차) (0)	2022.12.10
사전 스터디(웹개발 종합반 4주차) (0)	2022.12.09
사전 스터디(웹개발 종합반 3주차) (0)	2022.12.08
사전 스터디(웹개발 종합반 1주차) (0)	2022.12.06

✍️새로 학습한 내용

1. JQuery

2. Ajax(서버-클라이언트 통신)

💻과제

🖊 회고

'항해99' 카테고리의 다른 글

티스토리툴바