[항해99] TIL 웹개발 종합반 2주차 D-41

[수업 목표]

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

느낀점

전에 이 API를 활용하는데 있어 막힘이 있어서 조금 궁금하면서 신기했던 파트였다.

 

강의를 따라 진행하다보니 이렇게 간단하게 완성할 수 있었구나 생각도 들고

내가 그동안 너무 어렵게만 생각했던것같다.

 

수학과 비슷하다 원리이해에 막 집중해서 이건 왜 이런거지를 계속 생각하다보면

결국 집합단원에서 앞으로 나아갈 수 없다.

 

적절하게 이건 그냥 그런가보다 하고 넘어가다보면 언젠가 다시 봤을때 이게 그거구나 싶은 순간이

분명 온다. 그걸 깨달았고 그래서 수확이 크다고 느꼈다.

 

쉽게 생각하고 빠르게 응용하자

01. 2주차 오늘 배울 것

• 자바스크립트와 jquery, ajax를 배울것이다.

    <script>
        let count = 1;
        function hey() {
            if (count % 2 == 0) {
                alert('짝짝짝👏');
            } else {
                alert('홀홀홀🎅');
            }
						count += 1;
        }
    </script>

• 버튼을 누를때마다 홀짝이 나와야 한다면 count라는 변수를 만든다.
• 이제 함수내에서 함수가 실행될때마다 count가 증가하게 하고 그 변수를 기준으로 alert출력이 다르게 하면 된다.
• 버튼의 색깔, 박스감추기 등등을 쉽게 해주는 것이 jquery라는 라이브러리이다.

02. JQuery 시작하기

Javascript로 길고 복잡하게 써야 하는 것을

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

jQuery로 보다 직관적으로 쓸 수 있어요.

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

• jquery에서는 css에서의 class처럼 특정 html요소를 지칭해야하고 이때 id값을 통해 지칭하게 됩니다.

03. JQuery 다뤄보기

• input 박스의 값을 가져와보기
  • input의 url을 가져오려면 지칭할 수 있어야한다.
  • id를 통해 가져온다.

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

• div 숨기기
  • 숨기기도 마찬가지로 jquery를 사용하면 쉽다.

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

• 태그 내 html 입력하기
  • 우선 붙여넣을 html태그를 선택하고(여기서는 부트스트랩에서 가져온 카드를 사용)
  • let temp_html이라는 변수를 만들어 백틱기호로 변수안에 넣어준다.
  • 그 다음 $('#cards-box').append(temp_html); 를 해주면 된다.
• 전에 자바스크립트로 할때는 많은 함수들을 사용해서 id값 얻어오고 event추가 하고 그랬던게 jquery로 쉽게 되니까 기술을 빨리 많이 배우고 잘 쓰는게 중요하구나 라는 생각이 든다.

04. JQuery 적용하기(포스팅 박스)

• 지금까지 배웠던 기능들을 실제로 코드에 적용해본다.
• 우선 head태그 내에 script를 만들고 그 안에 함수를 두개 만들어준다.
• 이름은 각각 open_box() 와 close_box() 그리고 함수의 동작내용은
• jquery를 이용하여 $(’#post-box’).show() 같은식으로 만들어준다.
• 이제 mytitle의 영화기록하기 버튼에는 onclick으로 위에서만든 함수에서 show()동작을 하는 함수를 닫기 버튼에는 hide()기능을 하는 함수를 넣어준다.
• <button onclick="close_box()">

05. Quiz_JQuery 연습하기

• q1
  • jquery로 html요소를 가져와 그 val값을 우리가 만든 변수에 넣은 후
  • 조건문을 사용해 alert창을 띄워준다.
  • 이때 빈칸의 조건은 if(변수 === “”) 이다.
• q2
  • 마찬가지로 값을가져와 변수에 넣고
  • includes를 이용해 @가 있다면 변수값을 split으로 나누고 메서드체이닝을 이용해 한번 더 나눈후 alert로 띄워준다.
  • @가 없다면 그냥 alert를 띄워준다.
• q3
  • 값을가져와 변수에 넣고
  • 새롭게 백틱기호를 이용해 미리 html에 넣을 li태그요소를 만들어준다음(이때 li태그의 내용은 우리가 만든 위의 jquery로 만든 변수이다.)
  • 그 값을 jquery로 다른 요소에 append를 이용해 넣어준다.
  • 다 지울때는 jquery의 empty()를 이용한다.

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

• 우선 json을 좀 더 잘 보기 위해 구글 확장프로그램으로 jsonview를 설치해준다.
• 단 강의에서 추천해준것은 json + - 기능이 안나와서 추가로 하나를 더 설치했다.
• JSON은 key:value 로 이루어져 있다.

• 위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있습니다.

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

같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라
가져와야 하는 것 / 처리해주는 것이 다른 것처럼,

클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다.

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

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

이 중에서 오늘은 GET 방식에 대해 배워보겠습니다. (POST는 4주차에 배웁니다)

• API 는 아주 중요하다고 생각한다.
• 예를 들어 https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967 라는 주소가 있으면
• 이 주소는 두 부분으로 쪼갤 수가 있는데 ‘?’ 이 기준이다.
• ? 를 기준으로 앞이 서버주소, 뒷부분이 영화 번호이다.

• 서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
• 영화 정보: code=161967

• GET 방식으로 데이터를 전달하는 방법은
  • ? : 여기서부터 전달할 데이터가 있다.
  • &: 전달할 데이터가 더 있다.
  • 예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
  • 위 주소는 google.com의 search 창구에 다음 정보를 전달한다.

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

**여기서 잠깐, 그럼 code라는 이름으로 영화번호를 주자!는 것은
누가 정하는 것일까요?**

→ 네, 바로 프론트엔드 개발자와 백엔드 개발자가 미리 정해둔 **약속**입니다.

프론트엔드: *"code라는 이름으로 영화번호를 주면 될까요?"*
백엔드: *"네 그렇게 하시죠. 그럼 code로 영화번호가 들어온다고 생각하고 코딩하고 있을게요"*

07. Ajax 시작하기

우선 ajax는 jquery를 임포트한 페이지에서만 동작한다!

• 주어진 OpenAPI를 이용하여 ajax를 연습해보자

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

• 차례로 설명하면 제일 위에서는 ajax를 사용한다고 쓴다.
• 그 다음 타입은 GET방식이라 명칭해주고
• url에는 요청할 url을 적어준다.
• data에는 요청하면서 함께 줄 데이터를 적는데 GET요청시에는 비워둔다.
  • post 요청은 data:{}에 넣어서 데이터를 가져온다.
• success에는 성공하면 response값에 서버의 결과값을 담아 사용할 함수를 적어주어 실행시킨다.

중요한점! 결과가 어떻게 response에 들어가는지 심오하게 알려하지 말자 물론 알면 좋겠지만 개발을 배우며 모든걸 그렇게 다 알려하다가는 시간이 너무 오래걸린다. 특정부분은 우선 받아들이자!

$.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);
    }
  }
});

• 이런식으로 코드를 짜주면 모든 구의 미세먼지 값만 가져올 수 있다.
• 이렇게 코드를 짜는 것은 json 데이터를 보며 지금까지 배운 자바스크립트 문법을 적절히 결합할 필요가 있다.
• 리얼타임시티에어에서 로우 까지 간 배열을 미세리스트 변수에 넣고 그 배열을 반복문을 돌린다.
• 이때 그 row들에서 mise라는 변수의 각각 원하는 키값들을 변수에 넣어주어 콘솔로그로 출력해준다.

08. Ajax 함께 연습하기

• 서울시 미세먼지 데이터를 가져온다.
• 이때 여기서 제일 중요하게 기억할점은 ajax문 내의 success의 function내에서 변수를 설정하고 반복문을 설정하고 데이터들을 정립한다는 점이다.
• 또한 html의 요소에 접근하여 데이터를 추가하는 것도 다 ajax문 내에서 하는일이다.
• style에 bad라는 클래스를 미리 만들어 color를 red로 하고 조건문을 설정해 그 조건에 부합하는 데이터들은 백틱을 이용하여 html요소로 표현해줄때 클래스를 넣어주면 그 데이터들만 빨간색으로 표현하게 할 수도 있다.
• 여러모로 지금까지 배운것들을 응용만해도 많은 것을 할 수 있다.

09. Quiz_Ajax 연습하기(1)

• 위에서 했던 ajax연습의 복붙이다.
• 익숙해지기 위해서 이번에는 서울시 따릉이 데이터로 했다.
• 다른점은 삽입하는 html태그가 tr태그라는 점이다.

10. Quiz_Ajax 연습하기(2)

• ajax를 활용하여 api이용하는 것에서 추가로 두가지를 배웠다.
• 이미지 바꾸기 : $("#아이디값").attr("src", 이미지URL);
• 텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");

 

 

    <div class="question-box">
      <h2>3. 르탄이 API를 이용하기!</h2>
      <p>아래를 르탄이 사진으로 바꿔주세요</p>
      <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
      <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>

• 이런 코드가 있을때 ajax문의 success의 함수내부에 넣어주면 된다.
• 그러면 html요소의 src속성이 바뀌거나 text가 바뀌게 된다.

11. 2주차 끝 & 숙제 설명

• 내가 전에 만들었던 팬명록에 현재기온이 뜨는 기능을 추가한다.
• 스파르타 측에서 간편하게 사용할 수 있는 api를 제공하기 때문에 위에서 했던 방식대로 ajax를 사용하면 큰 무리없이 해당기능을 구현할 수 있다.
• api로 데이터를 가져오면 console로 response를 찍어보고 어떻게 구현할지 생각해보자.
• $("#아이디값").text("바꾸고 싶은 텍스트");를 사용해주면 된다.