키워드 : jQuery, ajax-JSON, OpenAPI
Ajax : 비동기 브라우저/서버 통신
openAPI를 사용할때 간단하고 좋다.
Ajax는 jQuery를 임포트한 페이지에서만 동작
-
GET → 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회
-
POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
예) 회원가입, 회원탈퇴, 비밀번호 수정
GET 방식으로 데이터를 전달하는 방법
? : 여기서부터 전달할 데이터가 작성된다는 의미
& : 전달할 데이터가 더 있다는 뜻
예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
google.com의 search 창구에 다음 정보를 전달!
q=아이폰 (검색어) sourceid=chrome (브라우저 정보) ie=UTF-8 (인코딩 정보)
POST 방식으로 데이터를 전달하는 방법
data : {} 에 넣어서 전달
data: { param: 'value', param2: 'value2' }
근데 GET이라고 쓰고 POST 방식으로 전달해도 전달된다.
success: 성공시 response 값에 서버의 결과 값을 json형식으로 담아서 가져온다.
success: function(response){ console.log(response) }
JSON 알기
JavaScript Object Notation의 약자
속성-값 쌍( attribute–value pairs and array data types (or any other serializable value))
또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷
= ajax에서 주로 사용하는 표준 포맷
적은 용량으로 많은 정보를 효율적으로 전달 가능하다.
연습용 샘플데이터 제공 사이트
샘플데이터가 담긴 api를 제공해주는 사이트
백엔드 없이 프론트엔드 혼자 연습할 때 유용하다!
제너레이트데이터 https://generatedata.com/
간단한 설정으로 양질의 샘플데이터를, 여러 확장자로 뽑을 수 있는 사이트
데이터베이스도 같이 돌릴 때 유용하다!
temp_html 과 템플릿리터럴 ``
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals
공식문서
템플릿 리터럴과 표현식 삽입 (${}는 제이쿼리에서 온게 아니었다!)
둘다 자바스크립트 es6부터 도입된 문법으로 무척 편리하게 쓸 수 있다.
ajax와 함께 사용할 수 있는 자바스크립트/제이쿼리 함수
반복문
for문 - ajax 내부에 for문, 내장함수 등을 중첩할 수 있지만 ajax가 무거워지고 오류가 나서 추천하지 않음
foreach - for문보다 제한된 느낌의 함수이지만 뭔가 가벼움!
if문 - temp_html 값을 여러개 주어 반복문 데이터를 조건에 맞게 변경해서 뽑을때 씀!
기타 제이쿼리 함수
tip - 값을 중첩할 때 ''작은 따옴표와 ""큰 따옴표를 섞어서 쓰면 좋다
$('#pika').val();
$('#pika').hide();
$('#pika').show();
$('#pika').text('피카츄!');
$('#pika').hide(); $('#pika').css('display');
$('#pika').show(); $('#pika').css('display:none');
$('#pika-box').append(temp_html);