JavaScript기초, jQuery기초, Ajax(API)기초

오늘은 JavaScript로 다시 서버에 데이터를 요청하고 받는 방법과 jQuery를 이용해 JavaScript로 HTML을 쉽게 제어하고 Ajax를 이용해 다시 서버에 데이터를 요청하고 받아보는 연습을 하려고한다.

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

jQuery는 JavaScript와 다른 특별한 소프트웨어가 아니라 미리 작성된 JavaScript코드

전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것

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

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

위는 JavaScript 로 짠 코드를 그대로 jQuery로 짠건데 훨씬 보기 쉽고 간편하다.

jQuery를 사용하기 위해선 <head></head>태그 사이에 CDN코드를 불러와 임포를 하면 된다

또한 css에서 선택자로 class를 썻던 것처럼 jQuery에서는 id값을 통해 특정 버튼/인풋박스/div등을 가리키게 된다.

jQuery를 사용할 때 뿐만아니라 어떤 코드를 사용할때 모든 명령어를 외울순 없다. 그렇기 때문에 명령어를 외우는 것이 아닌 어떤 기능을 사용할 수 있으며 어디에 응용할 수있는지 이해하고 바로 떠올려 필요할때마다 찾아 사용할 수 있을 응용력을 길르는데에 초점을 맞춰 공부하려 한다.

https://github.com/dss1222/web_02week

GitHub - dss1222/web_02week

Contribute to dss1222/web_02week development by creating an account on GitHub.

github.com

저번 공부에서 만들었던 나홀로메모장에 포스팅박스 열기 버튼에 function을 달아 그 버튼을 클릭하면

포스팅박스를 열었다 닫았다 할수 있게 바꾸었다

<script>
function openclose() {
	// 여기에 jQuery를 이용해 코드를 짤 예정    
}
</script>
<button onclick="openclose()" class="btn btn-primary btn-lg">포스팅박스 열기</button>

Ajax를 사용하기 위해 먼저 서버-클라이언트 통신을 연결해주는 JSON이해해야한다.

JSON은 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷인데

Ajax를 사용하기 위해 사용하는 데이터 포맷이다. JSON을 이용하면 API를 보다 쉽게 이용할 수 있다.

JSON을 사용하여 서울이 미세먼지를 확인할 수 있다.

JSON은 key:Value로 이루어져 있는데 자료형 Dictionary와 아주 유사하다.

위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는

리스트형 value가 들어 있다.

API는 은행 창구와도 같다.

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

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

GET -> 통상적으로 데이터 조회(Read)를 요청할 때 (영화 목록 조회, 등)

POST -> 통상적으로 데이터 생성, 변경, 삭제 등을 요청할 때 (회원가입, 회원탈퇴, 비밀번호 수정 등)

https://movie.naver.com/movie/bi/mi/basic.naver?code=161967

기생충

전원백수로 살 길 막막하지만 사이는 좋은 기택(송강호) 가족.장남 기우(최우식)에게 명문대생 친구가 ...

movie.naver.com

위 주소는 크게 두 부분으로 쪼개진다 바로 "?"가 쪼개지는 지점인데 물음표 기준으로 앞부분이 <서버 주소>

뒷 부분이 <영화 번호>다

GET 방식으로 데이터를 전달하는 방법은

? : 여기서부터 전달할 데이터가 작성된다는 의미

& : 전달할 데이터가 더 있다는 뜻

예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!

q=아이폰 (검색어)

sourceid=chrome (브라우저 정보)

ie=UTF-8 (인코딩 정보)

API의 사용법

$.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) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

위 함수들이 성공하면 response라는 변수에 결과값을 담는다

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

위 그림과 같이 RealtimCityAir > row에 미세먼지 데이터가 들어가 있다. row의 값을 mis_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);
    }
  },
});

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

위 코드에선 구 이름값인 MSRSTE_NM과 미세먼지 값인 IDEX_MVL만 뽑아낼 수 있게 된다

이처럼 반복문을 이용하면 우리가 원하는 데이터만 뽑아서 관찰할 수 있다.

'공부기록 > 웹개발' 카테고리의 다른 글

웹개발 복습 (jQuery) (Ajax) (Api) (0)	2022.01.13
서버 사용해보기 (0)	2022.01.03
Flask, 미니프로젝트 해보기 (0)	2022.01.03
python 기초, 웹크롤링, DB (0)	2021.12.31
웹의 개념 HTML, CSS기초 (0)	2021.12.27

'공부기록 > 웹개발' 카테고리의 다른 글

티스토리툴바