Script
웹개발 종합반 2주차 본문
1. Jquery
Jquery란?
미리 작성해 놓은 Javascript들을 모아둔 라이브러리.
편의성을 위해 사용한다.
Javascript로는 아래와 같이 나타낼 수 있다면,
//javascript
document.getElementById("element").style.display = "none";
jquery로는 아래와 같이 보다 직관적이고 짧게 나타낼 수 있다.
//jquery
$('#element').hide();
사용법
https://www.w3schools.com/jquery/jquery_get_started.asp
jQuery Get Started
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
위 링크에 들어가 jquery CDN 복사 후 <head> 태그안에 임포트하면 사용할 준비가 완료된 것이다.
jquery에서는 id값을 통해 어떤 것을 가리킬지 정하게 된다.
모든 jquery를 외울 필요는 없고, 그때그때 필요한 기능들을 구글링하여 사용하자.
사용예시
// id 값이 url인 곳을 가리키고, val()로 값을 가져온다.
$('#url').val();
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.
$('#post-box').hide();
// show()로 보이게 한다.
$('#post-box').show();
2.JSON
json이란?
- Javascript Object Notation의 약자로,데이터를 저장하거나 전송할때 많이 사용되는 경량의 data 교환 형식이다.
- javascript에서 객체를 저장하고 보여주는 방식이다. 형식은 주로 아래와 같이 key:value값으로 이루어져 있다.
- JSON은 데이터 포맷일 뿐이며 통신방법도,프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현방법일 뿐이다.
3.GET
GET방식이란?
API에 요청을 할때 상황에 따라 'GET'과 'POST'로 타입이 나누어지게 된다.
- GET - 통상적으로 데이터 조회를 요청할때 ex)영화 목록 조회
- POST-통상적으로 데이터 생성이나 변경, 삭제 등을 요청할때 ex)회원가입,회원탈퇴,비밀번호 수정
이번주차에서는 GET에 대해서 배워보고자 한다.
GET 방식으로 데이터를 전달하는 방법
- 클라이언트의 데이터를 URL 뒤에 붙여서 보낸다.
예시) https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967
- 위 주소는 "?"를 기준으로 두 부분으로 나뉘어진다.
- "?" 기준으로 앞부분이 서버 주소, 뒷부분이 영화 번호이다.
? : 여기서 부터 전달할 데이터가 작성된다는 의미이다.
&: 전달할 데이터가 더 있다는 뜻이다.
++위 예시의 code라는 이름은 프론트엔드와 백엔드가 합의하에 지은 이름이다.
4.Ajax
Ajax란?
- 1주차에서 불필요한 새로고침을 하지 않기 위해 필요한 경우 데이터만 갈아 끼우는 상황에 대해서 소개했다.
- 1주차에서 소개한 경우가 바로 Ajax를 이용해 비동기적으로 서버와 통신하는 방법이다.
- Ajax를 이용하여 주로 위의 Json 형식의 데이터를 받아와 웹페이지에 전달한다.
사용법
- Vanilla Js를 이용하는 방법이 있고 Jquery를 이용하는 방법이 있다.
- Jquery가 $.ajax 함수를 이용해서 자체적인 AJAX를 지원해주기 때문에, 더 간단히 작동시킬 수 있다.
- 여기서는 Jquery를 이용한 사용법을 배워보고자 한다.
- Ajax를 Jquery를 통해 사용하기 위해서는, Jquery를 임포트 해주어야 한다.
- Ajax 기본 골격
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {},
success: function(response){
console.log(response)
}
})- $ajax 코드 설명
- type: "GET" → GET 방식으로 요청한다.
- url: 요청할 url
- data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두어야 한다.)
- (GET 요청은 url 뒤에 붙여서, POST 요청은 data:{} 에 넣어서 데이터를 가져간다.)
- success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.
- 그 뒤로는 서버에서 받은 response값을 가지고 코드를 작성하면 된다.
사용예시 1) 도봉구의 미세먼지 값만 가져와보기
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulair",
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);
}
})
사용예시 2) 모든 구의 미세먼지 값을 찍어보기
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulair",
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);
}
}
});
사용 예시 3) 미세먼지 수치가 70 이상이면 빨갛게 보여주기
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulair",
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>`
//bad class의 style은 color:red
} else {
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}
$('#names-q1').append(temp_html);
}
}
})
2주차 숙제
2주차에는 1주차에서 만든 정적인 페이지에 Ajax을 이용하여
날씨 api를 불러온 후, jquery로 새로고침 할때마다 현재의 기온을 보여주는 기능을 추가해보았다.
서버와 클라이언트간의 통신에 대해 공부할 수 있었던 뜻깊은 시간이였다.
'항해99 > 사전준비' 카테고리의 다른 글
| 웹개발 종합반 5주차 (0) | 2022.07.01 |
|---|---|
| 웹개발 종합반 4주차 (0) | 2022.06.29 |
| 웹개발 종합반 3주차 (0) | 2022.06.26 |
| 웹개발 종합반 1주차 (0) | 2022.06.21 |
