Nellie's Blog

[스파르타코딩클럽] 웹개발 종합반 2주차 정리 본문

회고록/항해99

[스파르타코딩클럽] 웹개발 종합반 2주차 정리

Nellie Kim 2022. 9. 20. 15:37
728x90

2주차에서는,  HTML파일을 받았다고 가정하고, Javascript로 다시 서버에 데이터를 요청하고 받는 방법을 배운다.

jQuery를 이용해 Javascript로 HTML을 쉽게 제어하고, Ajax를 이용해 다시 서버에 데이터를 요청하고 받아보기!

 

👉 jQuery 란?

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

    (쓰기 전에 "임포트"필수!  아래와 같이 head안에 한줄 넣어주면 끝!)

<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

 Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만,

1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서, jQuery라는 라이브러리가 등장하게 됨.

 

- jQuery와 Javascript 코드 비교

document.getElementById("element").style.display = "none"; // 복잡한 자바스크립트 코드 ㅜㅜ

$('#element').hide(); // 직관적인 JQuery코드 ^^

- jQuery사용법 : css와 마찬가지로 가르켜야 사용하능한데, css는 class를 지정해줬다면 , jQuery는 id값을 지정해준다!

 

 

👉 Ajax 란?

 - Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이며 JavaScript의 라이브러리중 하나. 

빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법이다.

브라우저가 가지고있는 XMLHttpRequest객체를 이용해서 전체 페이지를 새로고침하지 않고도 페이지의 일부만을 위한 데이터를 로드 해준다.

JavaScript를 사용한 비동기 통신 방식*으로 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다. (최근에는 JSON방식이 더 많다.)

즉, 쉽게 말하자면 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다.

더 쉽게 말하자면, 서버와 클라이언트(나)와의 통신이다.

Ajax도 jQuery를 임포트한 페이지에서만 동작 가능!!

 

(*비동기 통신 방식이란?  웹페이지를 리로드 하지 않고 데이터를 불러오는 방식. 웹페이지를 리로드 하는 경우 불필요한 리소스가 낭비되는데, 비동기 방식을 이용하면 필요한 데이터만 불러와 리소스 낭비를 줄이고 깜빡거림같은 버벅임 없이 웹페이지 속도를 향상시킨다.)

 

👉 자주쓰는 jQuery 배우기

1. input 박스의 값을 가져와보기 --->    $(#'....').val();

//⭐JQuery쓰고싶은 부분에 id값을 먹여준다. (id="url")
<div class="form-floating mb-3">
    <input id="url" type="email" class="form-control" placeholder="name@example.com">
    <label>영화URL</label>
</div>

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

2. div 숨기기/ 보이기  --->  $('#... ').hide();    /   $('#... ').show();

//⭐보이기,숨기기 액션 주고 싶은 곳에 id값 설정 (id="post-box")
<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>
    .....
    
// ⭐크롬 개발자도구 콘솔창에 쳐보기
$('#post-box').hide();  // id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.
$('#post-box').show();  // show()로 보이게 한다.

 

3. 태그 내 html 입력하기 (동적으로 html을 넣고 싶을 때 (예를 들어, 포스팅되면 → 카드 추가))

   --->  let temp_html = `...`;

          $('#...').append(temp_html);

//⭐동적으로 html넣고 싶은 곳에 id값 설정 (id="cards-box")
<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>

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


// ⭐버튼 말고, 카드를 넣어보기
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);

 

👉JQuery 적용하기(포스팅 박스 열기/닫기 기능추가)

- '영화 기록하기' 버튼을 누르면 포스팅 박스 열리고, '닫기'버튼을 누르면 포스팅 박스 닫히는 기능을 넣어보자.

//⭐ 포스팅 박스에 id값 주기 (id="post-box")
<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>
    .....

//⭐ 스크립트에 함수 만들어 넣기.
function open_box(){
	$('#post-box').show()
}
function close_box(){
	$('#post-box').hide()
}

//⭐ 만든 함수를 사용할 버튼 안에 onclick = "함수명()" 넣기
<div class="mytitle">
    <h1>내 생애 최고의 영화들</h1>
    <button onclick="open_box()">영화 기록하기</button>
</div>

<button type="button" class="btn btn-outline-dark" onclick="close_box()">닫기</button>

//⭐ 처음에 포스팅 박스가 닫혀있는게 좋으니까 css에 가서 display: none; 추가하기.
	.mypost {
            max-width: 500px;
            width: 95%;
            margin: 20px auto 0px auto;
            box-shadow: 0px 0px 3px 0px grey;
            padding: 20px;

            display: none;
        }

 

👉 Quiz_JQuery 연습하기

<script>
    function q3() { 
        let newName = $('#input-q3').val();
    	if (newName == '') {
    		alert('이름을 입력하세요');
    		return;
   		 }	
    let temp_html = `<li>${newName}</li>`;//⭐템플릿리터럴! ${변수}를 써서 값가져오기.앞에 let쓰는거 까먹지마!!!
    
    $('#names-q3').append(temp_html);
    }
    
    function q3_remove() {  // ⭐names-q3의 내부 태그를 모두 비운다.
    $('#names-q3').empty();
    }
</script>

 

👉 서버-클라이언트 통신 이해하기

1) 서버→클라이언트: "JSON"을 이해하기

- 서울시 OpenAPI에 접속해보기 : (openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99)

 

-크롬 익스텐션 JSONView를 설치하면 좀 더 예쁘게 크롬에서 JSON을 볼 수 있다.

https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko

- 서울시 Open API를 보면, 위와같이 JSON 형식으로 되어있으며 Key:Value로 이루어져 있다. 자료형 Dictionary와 유사.

 

2) 클라이언트→서버: GET 요청 이해하기

- API는 은행 창구와 같은 것!

같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼, 클라이언트가 요청 할 때에도, "타입"이라는 것이 존재하는데 그게 GET/ POST.

 

- 우리는 평상시에도 늘상 GET방식을 하고 있다!

-https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967 위 주소는 크게 두 부분으로 쪼개진다.

바로 "?"가 쪼개지는 지점. "?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호] 

* 서버 주소(은행창구): https://movie.naver.com/movie/bi/mi/basic.nhn

* 영화 정보(가져와야하는것): code=161967 (code라는 이름으로 영화번호를 주자!는 것은 프론트엔드개발자와 백엔드개발자가 미리 정해둔 약속)

 

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

* POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때

  예) 회원가입, 회원탈퇴, 비밀번호 수정  (POST는 4주차에 배움)

 

👉 Ajax 시작하기

- 미세먼지 open API : http://spartacodingclub.shop/sparta_api/seoulair

- Ajax 기본 골격 :

//⭐ajax 기본골격 
$.ajax({
    type: "GET",
    url: "여기에URL을입력",
    data: {},
    success: function(response){
    console.log(response)
    }
})

//⭐코드해설
$.ajax({
    type: "GET", // GET 방식으로 요청한다.
    url: "http://spartacodingclub.shop/sparta_api/seoulair",
    data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
    success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 이리저리 요리하면 끝!
    }
})

- GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져감---> url : "http://naver.com?param=value"

  POST 요청은, data : {} 에 넣어서 데이터를 가져감  ---> data: { param: 'value', param2: 'value2' }

 

- 모든 구의 미세먼지 값을 찍어보기 (개발자도구 - console창에)

$.ajax({
    type: "GET",
    url: "http://spartacodingclub.shop/sparta_api/seoulair",
    data: {},
    success: function (response) {
        let mise_list = response["RealtimeCityAir"]["row"];
        for (let i = 0; i < mise_list.length; i++) {  //반복문이용
            let mise = mise_list[i];
            let gu_name = mise["MSRSTE_NM"];
            let gu_mise = mise["IDEX_MVL"];
            console.log(gu_name, gu_mise);
        }
    }
});

 

👉Ajax 함께 연습하기

<!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;
        }
        .bad {
            color: red;
            font-weight: bold;
        }
    </style>
    <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) { //⭐미세먼지가 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>
</head>
<body>
    <h1>jQuery+Ajax의 조합을 연습하자!</h1>
    <hr />
    <div class="question-box">
    <h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
    <p>모든 구의 미세먼지를 표기해주세요</p>
    <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
    <button onclick="q1()">업데이트</button>
    <ul id="names-q1">
    </ul>
    </div>
</body>
</html>

 

👉Quiz_Ajax 연습하기

- 랜덤 르탄이 API를 이용하여 이미지 / 텍스트 바꾸기

- 힌트  :  이미지 바꾸기 : $("#아이디값").attr("src", 이미지URL);

              텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");

<script>
        function q1() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rtan",
                data: {},
                //⭐여기선 for문, append, 백틱도 필요없어! 제일 간단!
                success: function (response) { 
                        let url = response['url']
                        let msg = response['msg']

                        $('#img-rtan').attr('src',url) //⭐이렇게 바꿔 껴주기만 하면 돼!
                        $('#text-rtan').text(msg)
                    }
            })
        }
</script>

.....


<body> //⭐body는 아예 건들지 않아도 됨!
<h1>JQuery+Ajax의 조합을 연습하자!</h1>

<div class="question-box">
    <button onclick="q1()">르탄이 나와</button>
    <div>
        <img id="img-rtan" width="300" src="http://spartacodingclub.shop/static/images/rtans/SpartaIcon11.png"/>
        <h1 id="text-rtan">나는 ㅇㅇㅇ하는 르탄이!</h1>
    </div>
</div>
</body>

 

 

👉2주차 숙제 

- homework.html 에 작성한 팬명록에 날씨정보 추가하기

- 힌트  :  날씨정보는 로딩 하자마자 바로 실행해야 하니까,  $(document).ready(function())안에 ajax작성!!

              $(document).ready(function()){$.ajax.....}  이런식으로...!!!

              기온정보를 <span> 으로 묶어주고  id지정해주기

              텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");

              

 <script>
        $(document).ready(function(){ //⭐로딩후 바로실행해야하니까 이 코드 안에 ajax코드를 넣기!
            $.ajax({
                    type: "GET",
                    url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
                    data: {},
                    success: function (response) {
                            let temp = response['temp'] //⭐response에서 temp정보를 가져와 temp변수에 넣고

                            $('#mytemp').text(temp)//⭐id=mytemp인곳의 text를 가져온 정보로 바꾼다!!
                        }
            })
        });
</script>

....


<body>
    <div class="mytitle">
        <h1>뉴진스(New Jeans) 팬명록</h1>
        <p>현재기온 : <span id="mytemp"> 00.00 </span>도</p>  //⭐기온00.00를 span으로 묶어주고 id지정해주기
    </div>
    ....
</body>

 

 

 

[출처] : [스파르타코딩클럽] 웹개발 종합반

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

프로젝트 서버에 올리기 정리  (0) 2022.11.04
[스파르타코딩클럽] 웹개발 종합반 5주차 정리  (2) 2022.09.23
[스파르타코딩클럽] 웹개발 종합반 4주차 정리  (4) 2022.09.22
[스파르타코딩클럽] 웹개발 종합반 3주차 정리  (4) 2022.09.21
[스파르타코딩클럽] 웹개발 종합반 1주차 정리  (5) 2022.09.19
'회고록/항해99' Related Articles more