개발일지 2주차 총 정리

김지용·2021년 7월 10일
WILajaxjqueryjson개발일지
0

2주차: jQuery, Ajax

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

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

jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드입니다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것임을 기억해주세요! (그렇게 때문에, 쓰기 전에 "임포트"를 해야합니다!)

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

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

jQuery로 보다 직관적으로 쓸 수 있어요. 편리하죠? :-)

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

  • 미리 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 부릅니다.

    • [코드스니펫] jQuery CDN

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

      jQuery CDN 부분을 참고해서 임포트하기: (링크)

  • 와 사이에 아래를 넣으면 끝!

    수업 자료를 잘 따라온 분이라면, 나홀로메모장 코드에 이미 다음과 같이 임포트 되어있을거예요. 다시한번 잘 살펴보세요!

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

  • jQuery를 사용하는 방법

    css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있습니다.
    예) 특정 인풋박스의 값을 → 가져와줘!
    예) 특정 div를 → 안보이게 해줘!

    css에서는 선택자로 class를 썼지요?
    jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키게 됩니다.

    백문이불여일견! 자주 쓰는 jQuery들을 함께 다뤄보면서 익혀보죠!

    절대!! 아닙니다. 예를 들어 스크롤 움직임을 감지한다거나, 화면 사이즈를 안다거나, jQuery가 할 수 있는 일은 무척 많습니다.

그러니, 필요할 때에 필요한 기능을 구글링해서 쓰면 되는 거예요!

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

API는 은행 창구와 같은 것!

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

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

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

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

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

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

    API는 은행 창구와 같은 것!

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

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

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

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

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

    • GET

      기생충

      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로 영화번호가 들어온다고 생각하고 코딩하고 있을게요"

참고! Ajax는 jQuery를 임포트한 페이지에서만 동작 가능합니다.

즉, http://google.com/ 과 같은 화면에서 개발자도구를 열면, jQuery가 임포트 되어있지 않기 때문에 아래와 같은 에러가 뜹니다.

Uncaught TypeError: $.ajax is not a function
→ ajax라는 게 없다는 뜻

  • type: "GET" → GET 방식으로 요청한다.

  • url: 요청할 url

  • data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)

    리마인드
    GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다.
    http://naver.com?param=value¶m2=value2

    POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다.
    data: { param: 'value', param2: 'value2' },

  • success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.

    결과가 어떻게 response에 들어가나요? → 받아 들이셔야 합니다..!
    (대부분의 개발자들도 내부 원리는 코드를 안 뜯어봐서 몰라요.^^;;)

    success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
  console.log(response) 
}

    • 위에서 했던 Ajax 통신을 발전시켜볼게요!

      $.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

  • 개발자도구 콘솔에 찍어보기

    $.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {},
  success: function(response){
		// 값 중 도봉구의 미세먼지 값만 가져와보기
		let dobong = response["RealtimeCityAir"]["row"][11];
		let gu_name = dobong['MSRSTE_NM'];
		let gu_mise = dobong['IDEX_MVL'];
		console.log(gu_name, gu_mise);
  }
})

  • 모든 구의 미세먼지 값을 찍어보기

    $.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  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);
    }
  }
});

    • 복습할 때 참고! - 해설) 모든 구의 미세먼지 값을 찍어보기

      1. 미세먼지 데이터가 어디에 있는지 찾기

        위 그림과 같이 RealtimeCityAir > row 에 미세먼지 데이터가 들어있습니다. 이걸 꺼내볼까요?

        $.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {},
  success: function(response){
		let mise_list = response["RealtimeCityAir"]["row"]; // 꺼내는 부분!
		console.log(mise_list);
  }
})

      2. 반복문으로 구 데이터를 출력해보기

        row의 값을 mise_list에 담았으니, 반복문을 이용해보겠습니다!

        $.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {},
  success: function (response) {
    let mise_list = response["RealtimeCityAir"]["row"];
    for (let i = 0; i < mise_list.length; i++) {
      let mise = mise_list[i];
      console.log(mise);
    }
  },
});

      3. 구 데이터에서 구 이름, 미세먼지 수치를 골라내어 출력하기

        구 이름 키 값인 "MSRSTE_NM", 미세먼지 수치 키값인 "IDEX_MVL"의 밸류를 출력

        $.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  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);
    }
  }
});
profile
김지용
김죵입니당 ^^
이전 포스트

코딩 2주차 1일차

다음 포스트

개발일지 3주차 1일

0개의 댓글