얼마전까지 ajax하면 JQuery만 떠올리던 자신을 반성하며 작성하게 되었습니다 ㅠ.ㅠ
1. Asynchronous
- 일반적으로 프로그램은 순차적으로 진행됩니다 -> 동기
- 그런데 자바스크립트는 single thread의 언어입니다.
- 만약 Multi thread를 지원하는 언어였다면? 멀티코어의 CPU를 사용하여 병렬처리를 하면 조금 나았겠지만...
- 자바스크립트는 컴퓨터가 여러 개의 CPU를 가지고 있어도 main thread라 불리는 단일 thread에서만 작업을 실행할 수 있습니다.
- 그래서 어떤 작업을 처리할 때, blocking 현상이 자주 발생하곤 합니다.
- 이를 해결하기 위해서 Web Worker 라는 개념이 등장하게 됩니다. Web Worker 참고
[ Web Worker ]
- web worker를 사용하면 javascript에서도 병렬처리가 가능해집니다.
- 다만, 제약이 있는데 그 중 하나가
web worker는 main thread의 global인 window를 참조하지 않고
WorkerGlobalScope라는 global을 별도로 가지기 때문에,
window의 메서드나, DOM 조작이 불가하다는 점 입니다.
- worker thread는 위와 같은 이유로 DOM 에 접근하기 위해서는
반드시 worker thread 에서 main thread 에 Message System 로 데이터를 전달해야 합니다.
- Worker Thread 내에서 Error 가 발생하면, Main Thread 까지 전파되지 않습니다.
단, onerror 메서드를 이용하여 ErrorEvent 를 수신할 수 있습니다.
- web worker의 종류
1. dedicated worker
: new Worker 로 생성한 worker, 부모 자식간의 thread 에서만 메세지 전달이 가능합니다.
2. shared worker
: 다른 컨텍스트에서 교류가 가능합니다.
SharedWorkerGlobalScope 를 가지고, port를 이용해서 공유가 가능합니다.- Web worker는 위의 설명 등의 이유로 제약조건이 많습니다.
- 이런 single thread 와 web worker의 한계등을 극복하기 위해 asynchronous 라는 개념을 자주 사용하게 됩니다.
- Asynchronous (순차적으로 처리하지 않는) 방식을 사용하게 되면, 작업의 처리와 응답을 순차적으로 기다리며 진행하지 않기 때문에, 여러가지 작업을 좀 더 효율적으로 진행할 수 있도록 됩니다.
2. XML (Extensible Markup Language) -> xml 설명보기
- HTML과 매우 비슷한 문자 기반의 마크업 언어(text-based markup language)입니다.
- 데이터를 저장하고 전달할 목적으로 만들어졌습니다.
- 데이터를 보여주는 것이 목적이 아닙니다.
3. XMLHttpRequest(XHR)
- XMLHttpRequest(XHR) 객체는 서버와 상호작용하기 위해 사용됩니다.
- 전체 페이지의 새로 고침 없이도 URL를 통해 데이터를 전송하거나 받아 올 수 있습니다.
- XML 만 전달하는 것이 아닙니다. 모든 종류의 데이터를 받아올 수 있습니다.
MDN 문서보기
4. Ajax (Asynchronous JavaScript and XML)
- 자바스크립트를 통해서 서버에 데이터를 비동기 방식으로 요청하는 것이다.
- 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법입니다.
- ajax는 그 자체로 새롭고 특정한 기술은 아닙니다. 기존의 기술들이 결합된 것 입니다.
1. 장점
- 서버의 처리가 완료될 때까지 기다리지 않고 처리가 가능하기 때문에,
웹페이지의 속도가 향상됩니다.
- 서버에서 Data만 전송하면 되므로 전체적인 코딩의 양 자체도 줄어들 수 있습니다.
2. AJAX의 단점
- 히스토리 관리가 되지 않습니다.
이와 이어지는 맥락으로 페이지 이동없는 통신으로 인한 보안상의 문제가 있을 수 있습니다.
- 연속으로 데이터를 요청하면 서버 부하가 증가할 가능성이 있습니다.
- XMLHttpRequest를 통해 통신하는 경우, 사용자에게 아무런 진행 정보가 주어지지 않게됩니다.
따라서, 요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 있습니다.
- AJAX는 모든 브라우저에 유연하지 않습니다.
때문에 지원하지 않는 브라우저에 대한 문제 이슈가 있습니다.
- HTTP 클라이언트의 기능과 지원하는 Charset이 한정되어 있습니다.
- CORS 에러 발생 가능성이 있습니다.4-1. CORS 와 Ajax
- Cross-site HTTP Requests는 보안상 막아두었습니다.
- 같은 출처는 프로토콜, 포트, 호스트명이 같은 출처를 말합니다.
CORS 관련 참고자료
ᴘᴇᴛɪᴛs ᴅᴇ́ᴠᴇʟᴏᴘᴘᴇᴜʀ. ᴘʀᴏɢʀᴀᴍᴍᴀᴛɪᴏɴ = ᴘʟᴀɪsɪʀ 💕