[스파르타]웹개발 종합반 - 2주차(#img src 변경)

※ 실제 수강시 다른 곳에 작성했던 원고를 다시 포스팅한 것입니다.

2주차 목표!

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

2주차 숙제

1주차에 완성한 쇼핑몰에, 환율 정보를 넣기 - 로딩이 완료되면 바로 환율을 표시

완성 페이지)

※ jQuery img src 변경

$('#id 선택자').attr('src', 이미지 url)

---

Javascript 복습

전역 변수

function hey() { 
   let count = 1; 
   if( number % 2 == 0) { 
      alert('짝수입니다!'); 
   } 
   else { 
      alert('홀수입니다!'); 
   } 
   count += 1; 
}

위와 같이 "let count = 1;" 코드가 function 코드 안에 있으면, count가 하나씩 올라가지 않고 계속 1로 초기화되므로 function 코드 밖으로 빼줘야 한다. 이렇게 되면 count 변수에 1이 담긴 것은 script 안에서 뿐만 아니라 이 페이지 전체에서 적용된다.

let count = 1;

function hey() { 
   if( number % 2 == 0) { 
      alert('짝수입니다!'); 
   } 
   else { 
      alert('홀수입니다!'); 
   } 
   count += 1; 
}

 

jQuery 시작

- jQuery란?

: 여러가지 브라우저가 존재했고 호환성의 문제가 있었을 때, 브라우저마다 코드를 다르게 적용해야하는 어려움이 있었다. 이 때, jQuery재단에서 Javascript를 모아놓은 라이브러리를 만들어 배포할테니 사용하라며 jQuery를 만들었다.
즉, jQuery는 일종의 Javascript 모음집으로, Javascript에서 길고 복잡한 코드를 jQuery에서 보다 직관적이고 간결한 코드로 대체할 수 있다.

1주차에서 사용한 부트스트랩처럼 jQuery도 사용전에 꼭 Import를 해줘야 코드를 사용할 수 있다.

​- 자주 쓰는 jQuery

CSS에서는 class 선택자로 jQuery에서는 id 선택자를 사용
$('#id선택자').명령

1) input 박스 값 가져오기 - $('#id선택자').val();

id값이 article-url 인 input 박스에 "이순신" 입력

개발자도구 콘솔창에 아래 코드를 입력하면 input 박스에 입력된 값을 가져온다 : 이순신

$('#article-url').val();

2) <div> 보이기/ 숨기기 - $('#id선택자').show(); / $('#id선택자').hide();

// <div> 보이기
$('#post-box').show();

// <div> 숨기기
$('#post-box').hide();

 

3) CSS값 가져오기 - $('#id선택자').css('css속성');

포스트 박스의 너비 값 가져오기

$('#post-box').css('width');

 

4) 태그 내 텍스트 입력하기 - $('#id선택자').text('텍스트');

"포스팅박스 열기"라고 적힌 버튼의 글자를 "열기"로 변경

$('#btn-posting-box').text('열기');

​※ input 박스 안에 텍스트 적을 때는 .val('텍스트')이지만 버튼과 같은 곳에 텍스트 입력은 .text('텍스트')

5) 태그 내 HTML 입력하기 - let 변수명 = `HTML 코드`; $('#id선택자').append(변수명);

HTML 코드는 '(홀따옴표)가 아니라 `(백팁)사이에 쓰기 : 백팁은 Shift 누르지 않고 ~ 버튼 누르기

let temp_html = `<button>나는 버튼이다</button>; 
$('#cards-box').append(temp_html);

※ Javascript, jQuery 둘다 <script></script> 안에 작성

​

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

1) 서버 → 클라이언트 : JSON

- 서버에서 데이터 보내줄 때의 포맷
- Key:Value 로 이루어져 있음(Javascript의 딕셔너리와 유사)

아래 예제에서는 RealtimeCityAir Key:딕셔너리형 Value가 들어가있다.
또, 딕셔너리형 value 안에서 row Key:리스트형 Value가 들어있다.

미세먼지 Open API
http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99

JSONview - JSON 더 편하게 볼 수 있게 해주는 크롬의 확장 프로그램

JSONVue

2) 클라이언트 → 서버 : GET 요청

기업 고객/개인 고객에 따라 은행 창구에서 처리하는 과정이 다르듯이 GET 요청/POST 요청인지에 따라 데이터나 기능들이 달라져야 한다.
- GET 요청 : 통상적으로 데이터 조회(Read)를 요청할 때 사용 → 2주차   ex) 영화 목록 조회

우리가 인터넷 브라우저에 url 을 입력하는 것도 GET 요청 중 하나이다.
https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967

위의 url은 ?를 기점으로 <서버주소>와 <영화번호>로 나눠진다.
- ? 이후는 전달할 데이터가 작성된다는 의미
- &은 전달한 추가 데이터가 존재함을 의미

※ 영화 번호가 "code"라는 이름으로 지정되는 이유
→ FE 개발자와 BE 개발자가 합의했기 때문

ex) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
<서버주소> google.com/search : 구글의 search 창구에 아래 데이터를 전달

<데이터> q=아이폰&sourceid=chrome&ie=UTF-8 : 차례대로 검색서&브라우저 정보&인코딩 정보

- POST 요청 : 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete)를 요청할 때 사용 → 4주차
ex) 회원 가입, 비밀번호 수성, 회원 탈퇴

 

Ajax 시작하기

※ Ajax는 jQuery가 import된 페이지에서만 작동

Javascript로 페이지 전환 없이 서버에서 데이터를 받아오는 방법

Ajax 기본 코드
(url의 데이터가 response에 들어간다고 생각하면 된다)

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

링크의 데이터가 response 변수에 담겼음을 확인할 수 있다.

ex1) 도봉구의 이름과 도봉구 미세먼지 값만 출력

$.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); } })

​ex2) 미세먼지가 40 미만이 곳의 구이름과 미세먼지 값만 출력 - for, if 활용

$.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 mise = rows[i]; let gu_name = mise["MSRSTE_NM"]; let gu_mise = mise["IDEX_MVL"]; if (gu_mise < 40) { console.log(gu_name, gu_mise); } } } })