스파르타 코딩 웹개발 2주차 강의 (2) - Ajax

오늘은 Ajax에 대해서 배워보았다. Ajax는 Asynchronous Javascript and XML의 줄임말로 한국어로 번역하면 비동기식 자바스크립트와 XML로 해석되고, 좀 더 쉽게 말하자면 자바스크립트를 활용해 서버에 데이터를 비동기 방식(페이지 이동 없이)으로 요청하는 것으로 받아 들이면 될 것 같다. 

그리고, Ajax의 기본 틀은 다음과 같다.

Ajax의 기본 골격

그리고 Ajax에서 데이터 요청하는 방식은 아래와 같이 2가지 방법으로 나뉜다.

Ajax의 GET요청과 POST요청 방법

강의에서 강사님도 말씀하셨지만, Ajax의 기본 골격을 보고 의미를 하나하나 알려고 하는것 보다 그대로 받아들이는게 빠르게 습득하는 것이라고 하셨기에, 나는 그대로 받아들이기로 했다. (아버지라는 단어가 왜 아버지인지, 어머니라는 단어가 왜 어머니인지 알려고 하는 사람은 없듯이, 있는 그대로 받아들이면 될 것 같다.)

아무튼, Ajax의 기본틀에 대한 개념을 익히고 서울시의 자전거 실시간 사용 현황을 알 수 있는 OpenAPI주소를 받아와 아래와 같은 화면을 구현하는 문제를 풀어보았다.    

구현할 문제                                                                                                   문제를 구현하는데 활용할 body

서울시의 자전거 실시간 사용 현황을 알 수 있는 OpenAPI(왼쪽 사진),  문제 구현을 위해 적은 코드(오른쪽 사진)

Ajax요청방식을 GET요청으로 사용해 data부분은 빈괄호로 처리하고, url부분은 왼쪽 사진의 OpenAPI정보를 담고 있는 주소를 가져왔다. 그리고 성공하였을 경우, 함수를 불러와 모든 OpenAPI정보를 가져올 수 있도록 반복문 처리를 활용하였고, 그 중 거치된 따릉이 수가 5개 미만일 경우 bad라는 클래스 이름을 부여하여 해당 테이블이 빨간색으로 처리되도록 하였다.

웹 개발 강의를 통해, 이전에 국비개발과정에서 들어도 몰랐던 내용이 이해가기 시작하는 부분이 생겨, 역시 같은 내용을 반복해서 여러번 듣는 것이 공부에 도움이 된다고 생각했다. 항해4기가 시작하기 전에 부여 받은 사전과제를 끝내기 위해 꾸준히 강의를 들으며 실력을 쌓아야 할 것 같다.😀