1. JQuery 는 무엇?
1-1. Jquery 정의
- HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리.
- jQuery는 Javascript와 별다른, 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드.
1-2. Javascript 와 JQuery 의 비교
-
이것은 JS : 길고 복잡하게 써야 하는 것을
document.getElementById("element").style.display = "none";
-
이것은 Jquery : 보다 직관적으로 쓸 수 있다.
$('#element').hide();
1-3. JQuery 임포트하기
-
미리 작성된 Javascript 코드를 가져오는 것을 임포트라고 부른다. head 태그 사이에 임포트 코드를 넣어주면 된다. Import jquery
2. 자주 쓰는 JQuery 다뤄보기
2-1. input 박스의 값을 가져와보기
- 먼저, 조작하고 싶은 부분 (여기서는 input 박스) 에 id 값을 준다. 예를 들어 id가 #posting-url 이라고 하자.
- 크롬 개발자도구 콘솔창에 id값이 posting-url 인 곳을 가리키고, val()로 값을 가져온다.
$('#posting-url').val();
2-2. div 보이기 / 숨기기
-
마찬가지로, 조작하고 싶은 부분에 id 값을 준다. 여기서는 #posting-box
-
크롬 개발자도구 콘솔창에 id값이 posting-box 인 곳을 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none 으로 바꾼다와 같음)
$('#posting-box').hide();
-
보이게 하고 싶을 땐
$('#posting-box').show();
2-3. css 값 가져와보기
- display 속성 값 가져오기
('#posting-box').css('display');('#posting-box').css('color','blue');
2-4. 태그 내 텍스트 입력하기
- 마찬가지로, 조작하고 싶은 부분에 id 값을 준다. 여기서는 #btn-posting-box
$('#btn-posting-box').text('포스팅 박스 닫기');
2-5. 태그 내 html 입력하기
- 동적으로 html을 넣고 싶을 때, 마찬가지로 조작하고 싶은 부분의 태그에 id 값을 주고
- 선언하기
let temp_html = '<div class="card">\
<img class="card-img-top" src="https://www.fodors.com/wp-content/uploads/2018/10/4_UltimateRome_PiazzaNavona-975x650.jpg" alt="Card image cap">\
<div class="card-body">\
<h5 class="card-title">예를 들면 이렇게 카드가 나옵니다!!</h5>\
<p class="card-text">여기에 기사 내용이 들어가겠죠</p>\
<p class="card-text comment">여기엔 코멘트가 들어갑니다</p>\
</div>\
</div>\
</div>';$('#cards-box').append(temp_html);
2. '나홀로 링크 메모장'에 jQuery 적용해보기
3. Javascript + jQuery 연습하기
혼자풀기 클리어!! 아싸!!
4. Ajax 통신 기초
4-1. 서버와 통신하는 방법
-
Ajax 통신 : 비동기 서버 통신 방식
-
비동기란? 돌려 놓고 다른 일을 하는 것. 끝나면 정해놓은 함수(=콜백함수) 를 부른다.
4-2. 서버-클라이언트가 데이터를 주고 받는 형식. "JSON"을 이해하기
- 서울시 오픈 API 에 접속 해서 JSON 확인 > Jsonview 설치
- JSON은 Key:Value로 이루어져 있습니다. 자료형 Dictionary와 아주 유사하다.
4-2. GET, POST 요청 타입을 이해하기.
- 은행의 창구가 API와 같다는 것
같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼, 클라이언트가 요청 할 때에도, "타입"이라는 것이 존재힌다.
-
GET → 통상적으로! 데이터 조회(Read)를 요청할 때
예) 영화 목록 조회 -
POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
예) 회원가입, 회원탈퇴, 비밀번호 수정
- 먼저 GET 방식을 알아보자
https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967
위 주소는 크게 두 부분으로 쪼개집니다. 바로 "?"가 쪼개지는 기점인데요.
"?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호] 입니다.- 서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
- 영화 정보: code=161967
즉, 위 url이 말하고 있는 바를 풀어서 쓰면 다음과 같습니다.
"https://movie.naver.com/movie/bi/mi/basic.nhn <- 여기 창구로 가.
그러면 거기에 무수히 많은 영화들이 있겠지?
거기서 code가 161967인 영화의 정보를 조회해서 나에게 돌려줘"
-
GET 방식으로 데이터를 전달하는 방법
? : 여기서부터 전달할 데이터가 작성된다는 의미
& : 전달할 데이터가 더 있다는 의미 -
POST 방식은 4주차에 공부예정
4-3. Ajax 로 서울시 OpenAPI 의 데이터를 받아오기
- 선행요건 : Ajax는 jQuery를 임포트 한 페이지에서 동작 가능함.
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {}, -------------> GET 방식에서는 비워둔다.
success: function(response){ --> 서버에서 준 결과를 response라는 변수에 담음
console.log(response) ------> 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})4-4. Ajax 통신의 결과값을 이용해보기
- 개발자 도구 콘솔에 찍어보기
- 모든 구의 미세먼지 값을 찍어보기 (함수와 반복문의 조화)
