🐭 2주차 회고록 gogo
jQuery를 이용한 Ajax로 통신하기
이번 주차에서는 jQuery로 서울시 OpenAPI를 불어와 보겠습니다 API 데이터를 나타내는 방식은 여러 가지가 있지만 우리는 JSON 문서 형식의 API를 이용할 예정이다 그렇다면 JSON은 어떤 건가
JSON (JavaScript Object Notation)
데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식입니다
Javascript에서 객체를 만들 때 사용하는 표현 식을 의미하고 서버와 클라이언트 간의 교류에서 일반적으로 많이 사용된다 JSON 형식은 자바스크립트 객체와 마찬가지로 key / value가 있다 또한 객체, 배열 등의 표기를 사용할 수 있습니다 일반 자바스크립트의 객체처럼 원하는 만큼 중첩해서 사용할 수도 있습니다 자바스크립트 객체 표기법과 아주 유사하여 사용하기 쉽다
🐭 Ajax 말고 다른것도 있어?
통신 종류 (Ajax, fetch API, Axios)
통신에도 여러 가지 종류가 있다 일단 각 통신의 장단점을 살펴봅시다
Ajax
- 장점
- jQuery를 통해서 쉽게 구현 가능
- error, success 상태를 통해 실행 흐름 조절 가능
- 단점
- jQuery를 사용해야 간편하고 호환성이 보장됨
- 연속적으로 데이터 요청 시 부하가 증가할 수 있음
fetch API
- 장점
- Javascript 내장 라이브러리로 별도의 import가 필요 없음
- 비동기 처리가 매우 간단함
- 단점
- JSON으로 변환해주는 과정이 필요함
- 기능이 많지 않음
Axios
- 장점
- response timeout 처리 방법이 존재함
- 브라우저 호환성이 매우 뛰어남
- 단점
- 별로의 모듈을 설치해야 해서 번거로움
- 모듈 설치로 인해 무겁다
현재 우리 프로젝트는 jQuery로 만들 예정이니 저번 주차에 만들었던 사이트에 기능을 추가하여 버튼을 클릭했을 때 알림창이 아닌 서울시 API 내용이 나오도록 해보겠습니다 JSON은 아래 링크를 사용했습니다
http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99🐭 통신하기 전에 버튼 기능을 만들어야겠는데?
버튼 클릭 시 박스게 나오도록 하기
기존 코드에서 message 함수 안에 id="apiBox" 태그를 토글 시키는 명령어를 넣어줬습니다 이렇게 하면 이제 버튼을 클릭 시 해당 박스를 자유롭게 show hide가 가능합니다 그럼 이제 박스 내부에 서울시 API 내용을 담아 보겠습니다
🐭 통신에 대해 조금만 더 설명해줘
GET , POST 요청
클라이언트가 서버에서 요청할 때 여러 가지 요청 방법이 있습니다 우린 그중에 GET과 POST를 알아보겠습니다 GET은 데이터를 조회할 때 사용하고 POST는 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때 사용합니다 우리는 지금 데이터를 조회만 하기 때문에 GET요청으로 API를 불러오겠습니다
map 함수 사용하기
기존 내용에는 for 문으로 사용했지만 JSON에서 Array 문을 가져올 때는 map 함수를 사용하는 편이다 그 이유는 데이터 순서대로 index를 지정해줄 때 map 함수에 인수(argument)를 넣을 수 있는 게 편리하고 좋다
좀 더 편리한 표기법
기존 표기법
let rows = response["RealtimeCityAir"]["row"];
변경 표기법
let row = response.RealtimeCityAir.row;실행 결과 확인하기
이렇게 jQuery를 사용해서 토클 버튼으로 박스 생성과 서버와 클라이언트가 통신하는 예제를 해봤습니다
🐭 3주차에는 뭐할 거야?
bs4로 웹 스크래핑 데이터 mongoDB에 넣기
TMI 이지만 최근에 개인 프로젝트로 만들었던 디스코드 노래 봇이 크롤링 과정에서 먹통이 생겨서 아직도 해결을 못 하고 있다 뭐 그런 일이 있다... 여튼 다음 주에는 python을 이용해 멜론뮤직의 곡을 스크래핑해서 mongoDB에 데이터를 넣어보도록 하겠습니다
