왕초보 시작반 - 02주 개발일지
01. JQuery 시작하기
-
1) jQuery 란?
-
HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리!
Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만,
1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서,
jQuery라는 라이브러리가 등장하게 되었답니다. -
jQuery와 Javascript - 코드 비교해보기
jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드입니다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것임을 기억해주세요! (그렇게 때문에, 쓰기 전에 "임포트"를 해야합니다!)
Javascript로 길고 복잡하게 써야 하는 것을
document.getElementById("element").style.display = "none";
jQuery로 보다 직관적으로 쓸 수 있어요. 편리하죠? :-)
$('#element').hide();
-
02. 서버-클라이언트 통신 이해하기
-
8) 서버→클라이언트: "JSON"을 이해하기
-
서울시 OpenAPI에 접속해보기
-
[코드스니펫] 미세먼지OpenAPI
http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99
-
-
크롬 익스텐션 JSONView를 설치해볼까요? 그럼 좀 더 예쁘게 JSON을 볼 수 있습니다.
-
[코드스니펫] - Jsonview
https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko
-
-
JSON은, Key:Value로 이루어져 있습니다. 자료형 Dictionary와 아주- 유사하죠
위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고,
그 안에 row라는 키 값에는 리스트형 value가 들어가있습니다.
-
-
9) 클라이언트→서버: GET 요청 이해하기
API는 은행 창구와 같은 것!
같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라
가져와야 하는 것 / 처리해주는 것이 다른 것처럼,클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다.
-
GET → 통상적으로! 데이터 조회(Read)를 요청할 때
예) 영화 목록 조회 -
POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
예) 회원가입, 회원탈퇴, 비밀번호 수정이 중에서 오늘은 GET 방식에 대해 배워보겠습니다. (POST는 4주차에 배웁니다)
-
GET
https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967 위 주소는 크게 두 부분으로 쪼개집니다. 바로 "?"가 쪼개지는 지점인데요. "?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호] 입니다. * 서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn * 영화 정보: code=161967
GET 방식으로 데이터를 전달하는 방법
? : 여기서부터 전달할 데이터가 작성된다는 의미입니다.
& : 전달할 데이터가 더 있다는 뜻입니다.예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
위 주소는 google.com의 search 창구에 다음 정보를 전달합니다! q=아이폰 (검색어) sourceid=chrome (브라우저 정보) ie=UTF-8 (인코딩 정보)
여기서 잠깐, 그럼 code라는 이름으로 영화번호를 주자!는 것은
누가 정하는 것일까요?→ 네, 바로 프론트엔드 개발자와 백엔드 개발자가 미리 정해둔 약속입니다.
프론트엔드: "code라는 이름으로 영화번호를 주면 될까요?"
백엔드: "네 그렇게 하시죠. 그럼 code로 영화번호가 들어온다고 생각하고 코딩하고 있을게요"
-
03. Ajax 시작하기
-
10) Ajax 시작하기
-
크롬 개발자 도구에 다음과 같이 써보세요
참고! Ajax는 jQuery를 임포트한 페이지에서만 동작 가능합니다.
즉, http://google.com/ 과 같은 화면에서 개발자도구를 열면, jQuery가 임포트 되어있지 않기 때문에 아래와 같은 에러가 뜹니다.
Uncaught TypeError: $.ajax is not a function
→ ajax라는 게 없다는 뜻-
[코드스니펫] 미세먼지 OpenAPI
[http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99](http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99)
-
[코드스니펫] Ajax 기본 골격
```jsx $.ajax({ type: "GET", url: "여기에URL을입력", data: {}, success: function(response){ console.log(response) } }) ```
Ajax 코드 해설
$.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) // 서버에서 준 결과를 이용해서 나머지 코드를 작성 } })
-
-
$ajax 코드 설명
-
type: "GET" → GET 방식으로 요청한다.
-
url: 요청할 url
-
data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
리마인드
GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다.
http://naver.com?param=value¶m2=value2POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다.
data: { param: 'value', param2: 'value2' }, -
success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.
결과가 어떻게 response에 들어가나요? → 받아 들이셔야 합니다..!
(대부분의 개발자들도 내부 원리는 코드를 안 뜯어봐서 몰라요.^^;;)success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음 console.log(response) }
-
-
-
11) Ajax 통신의 결과값을 이용해보기
-
위에서 했던 Ajax 통신을 발전시켜볼게요!
$.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) // 서버에서 준 결과를 이용해서 나머지 코드를 작성 } })
-
개발자도구 콘솔에 찍어보기
$.ajax({ type: "GET", url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99", 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); } })
-
모든 구의 미세먼지 값을 찍어보기
$.ajax({ type: "GET", url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99", 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); } } });
-
복습할 때 참고! - 해설) 모든 구의 미세먼지 값을 찍어보기
-
미세먼지 데이터가 어디에 있는지 찾기
위 그림과 같이 RealtimeCityAir > row 에 미세먼지 데이터가 들어있습니다. 이걸 꺼내볼까요?
$.ajax({ type: "GET", url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99", data: {}, success: function(response){ let mise_list = response["RealtimeCityAir"]["row"]; // 꺼내는 부분! console.log(mise_list); } })
-
반복문으로 구 데이터를 출력해보기
row의 값을 mise_list에 담았으니, 반복문을 이용해보겠습니다!
$.ajax({ type: "GET", url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99", data: {}, success: function (response) { let mise_list = response["RealtimeCityAir"]["row"]; for (let i = 0; i < mise_list.length; i++) { let mise = mise_list[i]; console.log(mise); } }, });
-
구 데이터에서 구 이름, 미세먼지 수치를 골라내어 출력하기
구 이름 키 값인 "MSRSTE_NM", 미세먼지 수치 키값인 "IDEX_MVL"의 밸류를 출력
$.ajax({ type: "GET", url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99", 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); } } });
-
-
-
04. Quiz_Ajax 연습하기(cat)
-
14) ✍랜덤 고양이 사진 API를 이용하기
-
[코드스니펫] 고양이OpenAPI
```html [https://api.thecatapi.com/v1/images/search](https://api.thecatapi.com/v1/images/search) ```
힌트:
"jQuery 이미지태그 src 바꾸기" 라고 구글에 검색해보세요!
-
[코드스니펫] Ajax퀴즈2
<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JQuery 연습하고 가기!</title> <!-- JQuery를 import 합니다 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <style type="text/css"> div.question-box { margin: 10px 0 20px 0; } div.question-box > div { margin-top: 30px; } </style> <script> function q1() { // 여기에 코드를 입력하세요 } </script> </head> <body> <h1>JQuery+Ajax의 조합을 연습하자!</h1> <hr/> <div class="question-box"> <h2>3. 랜덤 고양이 사진 API를 이용하기</h2> <p>예쁜 고양이 사진을 보여주세요</p> <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p> <button onclick="q1()">고양이를 보자</button> <div> <img id="img-cat" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/> </div> </div> </body> </html>
-
[코드스니펫] Ajax퀴즈2(보기)
http://spartacodingclub.shop/ajaxquiz/03
-
[코드스니펫] Ajax퀴즈2(완성)
<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JQuery 연습하고 가기!</title> <!-- JQuery를 import 합니다 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <style type="text/css"> div.question-box { margin: 10px 0 20px 0; } div.question-box > div { margin-top: 30px; } </style> <script> function q1() { $.ajax({ type: "GET", url: "https://api.thecatapi.com/v1/images/search", data: {}, success: function(response){ let imgurl = response[0]['url']; $("#img-cat").attr("src", imgurl); } }) } </script> </head> <body> <h1>JQuery+Ajax의 조합을 연습하자!</h1> <hr/> <div class="question-box"> <h2>3. 랜덤 고양이 사진 API를 이용하기</h2> <p>예쁜 고양이 사진을 보여주세요</p> <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p> <button onclick="q1()">고양이를 보자</button> <div> <img id="img-cat" width="300" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/> </div> </div> </body> </html>
-
Author And Source
이 문제에 관하여(왕초보 시작반 - 02주 개발일지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dnwlsdl0419/왕초보-시작반-02주-개발일지저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)