AJAX
1. 개념
- Asynchronous Javascript And XML
- 웹 페이지를 복잡하고 다이나믹하게 만들어주는 프로그래밍 방식
- 비동기 자바스크립트 : 사용자가 원할 때만 데이터를 가져올 수 있도록 api 를 호출하는 프로그래밍 방식
- 예를 들어
: 페이지가 열리면 절차대로 코딩이 실행되는 것이 아니라
: 버튼을 눌러야만 a 가 실행되거나, 네이버 실시간 검색어처럼 10초마다 새로운 검색어로 교체되는 등의 작업들이 비동기적으로 실행되는 프로그래밍이다. - 필요할 때 api 를 호출하고, 바꾸고 싶은 DOM 부분만 바꿔주는 것이 AJAX 의 핵심 개념
2. AJAX 구현 순서
- 2 페이지 버튼을 누른다.
- click 이벤트가 발생한다.
- click 이벤트의 event handler 함수에서2 페이지 게시글 데이터를 가져오는 api 를 호출한다.
- 받은 data 를 가지고 수정하고 싶은 DOM 부분을 찾아 내용을 교체한다.
JSON
1. 개념
- JavaScript Object Notation
- 프론트와 백은 독립적인 개발이 가능하지만 주고받는 데이터 구조는 맞춰야 한다.
- 프론트에서 사용하기 좋도록 객체(object) 구조로 데이터를 주고 받도록 약속되어 있다.
- 백에서 사용한 언어가 무엇이든 프론트로 보내는 데이터는 JSON 형태여야 한다.
- 백의 딕셔너리가 자바스크립트의 오브젝트와 비슷하게 생겼다. 따라서 백에서는 딕셔너리를 json 라이브러리나 jsonresponse 클래스를 사용해서 json 으로 변환한 후 데이터를 응답한다.
2. 규칙
-
{} 로 감싸준다.
-
key 는 무조건 "" 쌍따옴표를 붙인다.
-
value 에 string 이 올 때에도 "" 쌍따옴표를 붙인다.
-
다음에 데이터가 더 있을 때만 , comma 를 붙일 수 있다.
(자바스크립트의 object 는
: '' 홑따옴표도 가능하고, 없어도 괜찮다.
: 다음 데이터가 없을 때도 마지막에 , comma 로 끝낼 수 있다.) -
사실 프론트에서는 모두 object 로 작성해서 백에 넘겨주므로 JSON 문법을 크게 신경쓰지 않아도 된다. 하지만 아직 API 가 구현되어있지 않아서 가짜 데이터를 준비해서 화면을 미리 개발해야 할 때 JSON 파일을 만들어서 사용한다. 따라서 문법을 익히는 것이 좋다.
