[스파르타코딩클럽] 웹개발 종합반 - 2️⃣주차 개발일지

수업 목표]
1. Javascript 문법에 익숙해진다.
2. jQuery로 간단한 HTML을 조작할 수 있다.
3. Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다.

 

 

[목차]

01. 2주차 오늘 배울 것

 02. JQuery 시작하기 

03. JQuery 다뤄보기 

04. JQuery 적용하기(포스팅 박스) 

05. Quiz_JQuery 연습하기

 06. 서버-클라이언트 통신 이해하기 

07. Ajax 시작하기

08. Ajax 함께 연습하기 

09. Quiz_Ajax 연습하기(1) 

10. Quiz_Ajax 연습하기(2) 

11. 2주차 끝 & 숙제 설명

12. HW. 2주차 숙제 해설

 

 

jQuery와 Javascript - 코드 비교해보기

👉 jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드입니다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것임을 기억해주세요! (그렇게 때문에, 쓰기 전에 "임포트"를 해야합니다!)

 

Javascript로 길고 복잡하게 써야 하는 것을

document.getElementById("element").style.display = "none";

jQuery로 보다 직관적으로 쓸 수 있어요. 편리하죠? :-)

$('#element').hide();

jQuery를 사용하는 방법

👉 css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있습니다. 예) 특정 인풋박스의 값을 → 가져와줘! 예) 특정 div를 → 안보이게 해줘! css에서는 선택자로 class를 썼지요? jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키게 됩니다.

서버-클라이언트 통신 이해하기

크롬 익스텐션 JSONView를 설치

https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko

👉 API는 은행 창구와 같은 것! 같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라가져와야 하는 것 / 처리해주는 것이 다른 것처럼, 클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다. * GET → 통상적으로! 데이터 조회(Read)를 요청할 때                 예) 영화 목록 조회 * POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때                   예) 회원가입, 회원탈퇴, 비밀번호 수정

 

Ajax

👉 참고! Ajax는 jQuery를 임포트한 페이지에서만 동작 가능합니다. 즉, http://google.com/ 과 같은 화면에서 개발자도구를 열면, jQuery가 임포트 되어있지 않기 때문에 아래와 같은 에 러가 뜹니다. Uncaught TypeError: $.ajax is not a function → ajax라는 게 없다는 뜻

[코드스니펫] 미세먼지 OpenAPI
http://spartacodingclub.shop/sparta_api/seoulair

 

[코드스니펫] Ajax 기본 골격
$.ajax({ type: "GET", url: "여기에URL을입력", data: {}, success: function(response){ console.log(response) } })

$.ajax({      type: "GET",      url: "여기에URL을입력",      data: {},      success: function(response){      console.log(response) } })

Ajax 코드 해설

$.ajax({      type: "GET", // GET 방식으로 요청한다.      url: "http://spartacodingclub.shop/sparta_api/seoulair",       data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)       success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음      console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성 } })

$ajax 코드 설명

 type: "GET" → GET 방식으로 요청한다.
url: 요청할 url 

data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)

👉 리마인드 GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다. http://naver.com?param=value&param2=value2 POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다. data: { param: 'value', param2: 'value2' },

success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.

 

2 주차 숙제

 

2주차 숙제.txt

0.00MB