[웹개발]-jQuery AJAX JSON

이호현·2022년 2월 19일

GET JavaScript POST ajax jquery json

📚 개발 일지 📚

목록 보기

2/10

📕 두 번째 일지

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

💡 JQuery 시작하기

jQuery 란❓

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

Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만,
1. 코드가 복잡하고, 2. 브라우저 간 호환성 문제도 고려해야해서,
jQuery라는 라이브러리가 등장하게 되었다.

javascript만 사용한 코드
document.getElementById("element").style.display = "none";
jquery 사용한 코드
$('#element').hide();

💡jQuery import

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

💡jQuery를 사용하는 방법

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

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

서버→클라이언트: "JSON"을 이해하기

JSON은, Key:Value로 이루어져 있습니다. 자료형 Dictionary와 아주- 유사합니다.

클라이언트→서버: GET 요청 이해하기

API는 은행 창구와 같은 것!
같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라
가져와야 하는 것 / 처리해주는 것이 다른 것처럼,
클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다.

GET → 통상적으로! 데이터 조회(Read)를 요청할 때
예) 영화 목록 조회
POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
예) 회원가입, 회원탈퇴, 비밀번호 수정

GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다.
http://naver.com?param=value¶m2=value2

POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다.
data: { param: 'value', param2 'value2' },

💡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

💡그럼 code라는 이름으로 영화번호를 주자!는 것은 누가 정하는 것일까❓

바로 프론트엔드 개발자와 백엔드 개발자가 미리 정해둔 약속이다.

프론트엔드: "code라는 이름으로 영화번호를 주면 될까요?"
백엔드: "네 그렇게 하시죠. 그럼 code로 영화번호가 들어온다고 생각하고 코딩하고 있을게요

💡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) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})