Javascript / Jquery / AJAX
[목표]
- javacript 문법 익숙해지기
- jqeury로 HTML조작하기
- AJAX로 서버 API에 데이터를 주고 결과 받아오기
[일주일 공부 후 느낀 것]
- 사실 나는 JQEURY를 썼었던 것이다! <JQUERY를 쓰는 것을 모르고 있었다.>
- AJAX에 대해서 확실하게 익힐 수 있는 기회였다. API의 사용 미흡으로 면접에서 떨어진 적이 있는데, 이번 기회에 제대로 확립할 수 있어서 좋았다.
- 이젠 확실하게 JQUERY와 AJAX를 사용할 수 있다.
[미리 알고 있었던 것]
- Javasciprt의 문법
- AJAX란? = 비동기식 자바스크립트 XML의 약자.
즉, 새로고침을 하지 않아도 데이터 변경을 받아와 볼 수 있다.
API라고 생각하면 좋다.
[새로 알게된 것]
- jQeury는 미리 작성된 javascript코드이다.
즉, 전문 개발자들이 짜둔 코드를 가져와서 사용하는 것이다. - 서버-클라이언트 통신으 위해선 JSON이 필요하다.
OPEN API는 보통 이러한 객체 형식으로 이루어져 있는데, KEY:VALUE로 이루어져있다. - 클라이언트에서 서버를 통해 이러한 정보들을 요청하게 되는데, API는 클라이언트에서 요청을 이해하고 결과를 처리해준다.
- 이 때, 요청은 크게 2가지로 이루어져있는데
(1) GET = 말 그대로 요청이다. READ와도 같을 수 있는데, 요청한 정보를 가져와 읽을 수 있게 해준다.
(2) POST = 작성하고, 수정하고, 삭제할 수 있는 기능이다.
JQUERY
(1)'element' 요소를 숨기는 코드를 작성해야한다고 가정하자.
(javascript의 경우)
document.getElementById("element").style.display="none";
(jquery의 경우)
$('element').hide()와 같이 짧게 작성이 가능해진다.
같은 기능을 하지만 두 가지 중 하나를 사용하면 AJAX를 사용하는 것이 훨씬 유용하다. 따라서 실무에선 jquery를 사용하는 사람을 많이 뽑는다.
(2)JQeury를 사용하기 위해선
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>위와 같은 코드를 선언해 주어야 한다.
이러한 스크립트는 <head></haed> 와 같이 head 태그 안에 선언해 주어야한다.
(3)JQuery 실습&코드
AJAX
(1) AJAX를 사용하기 위해선
위와 같이 JQuery를 임포트한 곳에서만 사용할 수 있다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>이를 똑같이 선언해주자.
(2) AJAX 기본 골격(GET)
$.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) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})GET을 요청하여 사용할 때는, URL에 뒤에 사용하고자하는 데이터를 제공하는 URL을 넣으면 된다. 이는 RESPONSE로 받아오게 되는데, CONSOLE대신 실행문을 작성하면 된다.
실습예제
위와 같이 서울시 API를 가져와 실시간 미세먼지 상태를 받아왔다.
70이 넘어간 곳들은 붉은 색으로 칠해주도록 코딩했다.
function q1() {
$('#names-q1').empty()
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function (response) {
let rows = response['RealtimeCityAir']['row']
for (let i =0; i<rows.length ; i++){
let gu_name = rows[i]['MSRSTE_NM']
let gu_mise = rows[i]['IDEX_MVL']
let temp_html = ''
if(gu_mise > 70){
temp_html= `<li class="bad">${gu_name} : ${gu_mise}</li>`
}else{
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}
$('#names-q1').append(temp_html)
}
}
})
}실습예제2
달러-원 환율 API를 통해 환율 정보를 넣어주었다.
$('#rate').text(rows)참고로 저렇게 달러-원 환율은 가만히 두고 정보만 바꾸고 싶다면
이렇게 .text를 이용하면 안에 있는 text만 바뀌게 된다. 본인은 이렇게 작성했다.
<p class="rate">달러-원 환율 : <span id="rate"></span> </p>이렇게 되면 span의 정보만 바뀐다.
이렇게 2주차도 열심히 공부했다.
전문 프로그래머가 되고 싶은 소소한 개