1. 동기처리

동기처리는 한 작업이 끝날 때까지 기다리는 동안 중지 상태가 된다. 때문에 다른 작업을 할 수가 없으며, 한 작업이 끝나야 비로소 다음 예정된 작업을 실행 할 수 있다.

2. 비동기처리

비동기 처리는 특정 코드의 연산이 진행되는 중 작업을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트 방식으로, 동시에 여러가지 작업을 처리할 수 있고 기다리는 과정에서 다른 함수를 실행할 수 있다.

2-1 Ajax

Asynchronous JavaScript and XML의 약자인 Ajax는 자바스크립트를 이용해 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방법을 말한다.

서버로부터 호출된 웹페이지가 반환되면 화면 전체를 갱신해야 하는데 일부 페이지만 갱신하고도 동일한 효과를 볼 수 있도록 하는 것이다. 전체를 렌더링 하지 않고 갱신이 필요한곳만 로드하여 사용하기 때문에 빠른 퍼포먼스와 부드러운 화면 표시를 기대할 수 있다.

2-2 Json(JavaScript Object Notation)

서버와 클라이언트는 서로 데이터 교환이 필요하다. 이때 Json을 사용하는데, Json은 일반 텍스트 포맷보다 효과적인 데이터 구조화가 가능하며 간편하고 가독성이 좋다. 자바스크립트의 객체 리터럴과 매우 흡사하다. 하지만 Json은 순수한 텍스트로 구성된 규칙이 있다.

{
	"name": "Junghoo",
    "gender": "male",
    "age": "27",
    "job": "Web Developer"
}

키는 반드시 큰따옴표로 둘러싸야 한다.

JSON.stringify

JSON.stringify 메소드는 객체를 JSON 형식의 문자열로 변환한다.

JSON.parse

JSON.parse는 JSON 데이터를 가진 문자열을 객체로 변환한다.

3. Ajax requset

XMLHttpRequest 객체를 이용하여 브라우저는 Ajax 요청을 생성하고 전송한다. 서버가 브라우저의 요청에 대한 응답을 반환하면 같은 XMLHttpRequest 객체가 그 결과를 처리한다.

Ajax 요청처리

const xhr = new XMLHttpRequest(); //객체 생성
xhr.open('GET', '/users'); // 비동기식으로 Request Open
xhr.send(); // Request 전송

3-1 method

HTTP method는 다음과 같다.

1. GET
2. POST
3. PUT
4. DELETE