<2주차 수업 목표>
1. Javascript 문법에 익숙해진다.
2. jQuery로 간단한 HTML을 조작할 수 있다.
3. Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다.
1주차 때 맛 본 클라이언트와 서버간의 통신에 대해 좀 더 깊게 배우는 주간이었다.
jQuery를 이용해 HTML파일을 제어하고 Ajax를 통해 다시 서버에 데이터를 요청하고 받아보기
Javascript를 배우고 나서
- 예를 들어 버튼의 색깔을 바꾸고 싶다면?
- 예를 들어 div 박스를 하나 감추고 싶다면?
- → 이런 것들 쉽게 해주는 것이, jQuery!
jQuery 란?
- HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리(CSS의 Bootstrap과 비슷 / 라이브러리이므로 import 필수)
Javascript
> document.getElementById("element").style.display = "none";jQuery
$('#element').hide();
==> jQuery가 보다 직관적이다.
jQuery 사용법
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head>
이렇게 코드를 임포트 해준 후 사용한다.
css에서는 선택자로 class를 사용
jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리켜 사용한다.
function open_box() { $(`#id값`).show() } function close_box(){ $(`#id값`).hide() }
와 같이 hide() / show()를 사용하여 버튼 클릭 시 나타났다 사라졌다 기능을 만들 수 있다.
$(`#id값`).val() //해당 id값을 가진 text박스의 값을 가져온다 $(`#id값`).val('~~') //해당 id값을 가진 text박스에 값을 입력한다.
위의 입력하는 코드를 이용하여 게시물이 등록되었을 때 화면 상에 추가되는 모션을 넣는 등의 동적인 기능 삽입도 가능하다
(넣고자 하는 양식의 HTML코드를 val()값에 넣어주면 된다.)
추가적인 함수들
.append('추가하고자 하는 HTML 코드') //입력된 HTML코드를 추가한다 .split('') //입력된 문자를 기준으로 분리하여 배열을 선언한다 .empty() //$(`#id`)를 가진 HTML코드의 요소들을 전부 지운다
서버-클라이언트 통신을 좀더 이해해보자.
JSON에 대해 알아보자
공공데이터의 openAPI주소를 주소창에 입력(크롬 익스텐션 JSONView를 설치하면 더 보기 편하게 출력된다)
위 그림과 같이 JSON은 key와 value로 구성되어 있다.
(자료형 dictionary랑 매우 유사)
클라이언트 -> 서버: GET요청
클라이언트가 요청 할 때에도, "타입"이라는 것이 존재한다.
-
GET → 통상적으로 데이터 조회(Read)를 요청할 때
예) 영화 목록 조회 -
POST → 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
예) 회원가입, 회원탈퇴, 비밀번호 수정
2주차 교육에서는 GET 방식에 대해 좀더 알아보았다.
GET 방식으로 데이터를 전달하는 방법
? : 여기서부터 전달할 데이터가 작성된다는 의미입니다.
& : 전달할 데이터가 더 있다는 뜻입니다.
예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!
q=아이폰 (검색어)
sourceid=chrome (브라우저 정보)
ie=UTF-8 (인코딩 정보)예시) https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967
위 예시와 같이 두 부분으로 쪼개집니다. 바로 "?"가 쪼개지는 지점인데요.
"?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호] 입니다.
- 서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
- 영화 정보: code=161967
위의 naver 주소에서의 code값은 프론트엔드 개발자와 백엔드 개발자 간의 약속으로 정해지는 것입니다.
이어서.. 2장에서 계속
