[꼬꼬공] 동기/비동기, Ajax
1. 동기 vs 비동기
| 동기 | 비동기 | |
| 의미 | Syn는 그리스어로 '함께', chrono는 '시간'을 뜻한다. 동기는 작업이 동시에 이뤄지지 않아 이전 작업이 다 수행되지 않으면 다음 작업을 수행하지 못하는 상태를 말한다. (Blocking) |
동기인 Synchronous 앞에 접두사 a가 붙어 반대의 의미를 가진다. 작업이 동시에 이진행되며 이전 작업이 수행되지 않아도 다음 작업이 알아서 수행되는 상태를 말한다. (Non-Blocking) |
| 예시 | 창구가 1개인 은행 새로고침 O |
창구가 여러 개인 은행 새로고침 X |
| 장점 | 설계가 간단하고 직관적이다. | 이전 작업의 결과를 기다리는 시간 동안 다른 작업을 동시 처리하여 멀티 작업을 수행할 수 있다. |
| 단점 | 이전 작업의 결과가 주어질 때까지 아무것도 못하고 대기해야 한다. | 동기식보다 비교적 설계가 복잡하다. |
🔗 동시 처리란?
동시 처리 : 두 개 이상의 작업이 동시에 실행되는 것
예를 들면, 멀티 프로세스 또는 멀티 스레드
🔗 멀티 프로세스(Multi Process) vs 멀티 스레드(Multi Thread)
프로세스 : 실행 중인 프로그램
멀티 프로세스 : 하나의 응용 프로그램에 대해 동시에 여러 개의 프로세스를 실행
스레드 : 하나의 프로세스 내에 있는 실행 흐름
멀티 스레드 : 하나의 프로세스 내에 여러 개의 스레드가 존재
싱글 스레드 : 하나의 프로세스 내에 하나의 스레드가 존재
| 멀티 프로세스 | 멀티 스레드 | |
| 장점 | 다른 프로세스에 영향을 주지 않는 독립된 구조라 안정성이 높다. | 메모리를 공유하기에 비교적 적은 메모리 공간을 차지한다. |
| 단점 | 메모리도 독립적으로 사용하므로 멀티 스레드보다 더 많은 메모리 공간과 CPU 시간을 차지한다. | 하나의 스레드에 문제가 생기면 전체 프로세스가 영향을 받는다. |
🔗 자바스크립트는 싱글 스레드?
자바스크립트는 싱글 스레드 언어이다.
자바스크립트는 원래 웹 브라우저에서 간단한 동작을 추가하는 용도로 만들어졌기 때문이다.
복잡한 연산이나 동시에 여러 작업을 처리하는 것은 웹 페이지의 반응성을 해칠 수 있으므로 이런 기능은 자바스크립트의 목표에서 벗어난 것이었다.
하지만 자바스크립트는 런타임 과정에서 Event Loop, Task Queue 등을 통해 비동기 작업을 처리할 수 있다.
따라서 자바스크립트는 싱글 스레드 언어지만, 비동기 처리 능력이 있어 동시에 여러 작업을 처리하는 것처럼 보일 수 있다.
🔗 자바스크립트 비동기 런타임 과정?
- Call Stack : 수행할 함수들을 순차적으로 담은 스택
- Task Queue(Callback Queue) : Web API에서 넘겨받은 Call back함수를 저장
- Event Loop : Call Stack이 비어있는지 확인하여 Task Queue의 작업을 Call Stack으로 옮김
- Web API : 웹 브라우저에서 제공하는 API, 예를 들면 AJAX, DOM, Timeout
function first() {
setTimeout(() => {
console.log("First")
}, 3000);
}
function second() {
console.log("Second");
}
function third() {
console.log("Third");
}
first();
second();
third();
예를 들어 위와 같은 코드에서 사용된 setTimeout 메서드는 이 친구는 브라우저에서 제공하는 Web API이자 비동기 함수다.
실행 순서는 다음과 같다.
1. Call Stack에 first 함수가 담긴다.
2. Task Queue에 anonymous가 담긴다. ( anonymous : 화살표 함수)
3. Call Stack에서 first 함수가 나가고 second 함수가 들어온다.
4. "Second"가 출력된다.
5. Call Stack에서 second 함수가 나가고 third 함수가 들어온다.
6. "third"가 출력된다.
7. Call Stack에서 third 함수가 나가고 Call Stack은 비워진다.
8. Event Loop가 이를 탐지하여 Task Queue에 있던 anonymous를 Call Stack으로 옮긴다.
8. "first"가 출력된다.
.
JS Visualizer 9000
www.jsv9000.app
2. Ajax
Ajax : Asynchronous JavaScript and XML
즉, JavaScript 기반 비동기 방식의 정보 교환 기법에 사용되는 기술을 통칭한다.
서버와 통신하기 위해 XMLHttpRequest 객체를 사용한다.
🔗 XMLHttpRequest ?
XMLHttpRequest : 별도의 새로고침 없이 페이지 내의 데이터를 지속적으로 갱신하는 객체이자 브라우저에서 제공하는 Web API
즉, 웹 페이지 전체를 다시 로딩하지 않고 일부분만 갱신할 수 있다.
HTTP 요청 방식 중 GET를 사용해서 데이터를 요청하는 예제
// XMLHttpRequest 객체 생성
const xhr = new XMLHttpRequest();
// 요청 준비
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts"); //HTTP Method, URL 정의
// 요청 실제 전송
xhr.send();
// 응답이 완료되었는지 확인
xhr.onload = () => {
if(xhr.status === 200) {
const responseData = xhr.responseText; // 응답 데이터
const result = JSON.parse(xhr.response); // JSON 역직렬화
console.log(result);
} else {
//에러발생
console.error(xhr.status, xhr.statusText); // 응답 상태와 메시지 출력
}
}
HTTP 요청 방식 중 POST를 사용해 데이터를 전송하는 예제
// XMLHttpRequest 객체 생성
const xhr = new XMLHttpRequest();
// 요청 준비
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts"); //HTTP Method, URL 정의
// 헤더값 중 content-type 정의
xhr.setRequestHeader("content-type", "application/json; charset=UTF-8");
// 요청 실제 전송
xhr.send(JSON.stringify({title: "name", body:"yunie", userId:1})) // JSON 직렬화
// 응답이 완료되었는지 확인
xhr.onload = () => {
if(xhr.status === 201) {
const result = JSON.parse(xhr.response); // JSON 역직렬화
console.log(result);
} else {
//에러발생
console.error(xhr.status, xhr.statusText); // 응답 상태와 메시지 출력
}
}
🔗 직렬화 vs 역직렬화 ?
- 직렬화(serialize) : 객체를 문자열로 변환, JSON.stringify, 통신할 때 객체를 문자열로 직렬화하여 전송
- 역직렬화(deserialize) : 문자열을 객체로 변환, JSON.parse, 통신해서 받은 문자열을 객체로 역직렬화하여 사용
🔗 HTTP 요청 메서드 ?
- GET : 서버로부터 정보를 조회하기 위해 사용하는 요청 메소드, 멱등O
- POST : 클라이언트 데이터를 서버로 전송하는 요청 메소드, 멱등X
- PUT : 클라이언트 데이터를 서버로 보내 데이터를 업데이트하는 메소드, 멱등O
- DELETE : 서버에서 데이터를 삭제하는 메소드, 멱등O
- PATCH : 데이터를 일부만 변경하는 메소드, 멱등X
- HEAD : GET과 동일하지만 응답 본문을 제외하고 HTTP 헤더 정보만 가져오는 메소드, 멱등O
- OPTIONS : 데이터 통신 가능 옵션을 설명하는 메소드 , 멱등O
- CONNECT : 서버 응답을 기다리는 동안 프록시 서버 역할을 하는 중간 서버에 대한 터널을 설정하는 요청 메소드
- TRACE: 클라이언트의 요청 경로를 추적하기 위해 사용하는 요청 메소드, 멱등O