[Javascript] Javascript 이론 공부 - 7

 

Javascript Asychoronus

• 초기 웹 환경에서는 서버에서 모든 데이터를 로드하여 페이지를 빌드 했기 때문에, Javascript 에서는 별도의 비동기 처리가 필요하지 않았음
• Ajax의 등장으로 페이지 로드 없이 client-side에서 서버로 요청을 보내 데이터를 처리할 수 있게 됨
• XMLHttpRequest라는 객체를 이용해 서버로 요청을 보낼 수 있게 됨
• Javascript는 single-threaded 언어이므로, 서버 요청을 기다려야하면 유저는 멈춰있는 브라우저를 보게 됨
  • 따라서 비동기 처리를 이용해 서버로 통신할 필요가 있음

Synchornous	Asynchoronus
- 해당 코드 블록을 실행할 때, 스레드의 제어권을 넘기지 않고 순서대로 실행함	- 코드의 순서와 다르게 실행 됨 - 비동기 처리 코드를 감싼 블록은 task queue에 넣어짐   - main 스레드가 동기 코드를 실행한 후에 제어권이 돌아왔을 때, event loop가 task  queue에 넣어진 비동기 코드를 실행함

• Asynchoronus(비동기) 요청 프로세스
  • 비동기 요청 후, main 스레드는 유저의 입력을 받거나 페이지를 그리는 등의 작업을 처리함
  • 비동기 응받을 받으면 응답을 처리하는 callback 함수를 task queue에 넣음
  • event queue는 main 스레드에 여유가 있을 때, task queue에서 함수를 꺼내 실행 함
• Asynchoronus 처리를 위한 내부 구조
  • 브라우저에서 실행되는 자바스크립트 코드는 event driven 시스템으로 작동
  • 웹 앱을 로드하면 브라우저는 HTML document를 읽어 문서에 있는 CSS, JS 코드를 불러오고, JS 엔진은 코드를 읽어 실행함
  • 브라우저의 main 스레드는 자바스크립트 코드에서 동기적으로 처리되어야 할 코드 실행 외에 다양한 일을 처리함
    • 웹 페이지 실시간 랜더링
    • 유저 입력 감지
    • 네트워크 통신 처리 등
  • 비동기 작업을 할당하면, 비동기 처리가 끝나고 브라우저는 task queue에 실행 코드를 넣음
  • main 스레드는 event loop를 돌려, task queue에 작업이 있는지 체크하고, 있으면 task를 실행함

Promise

Callback pattern	Promise
- 비동기 처리 후 실행될 코드를 callback function 으로 보내는 것 - 비동기 처리가 고도화 되면서, callback 지옥 등이 단점으로 부각되어짐	- 비동기 실행이 완료 된 후에, "then", "catch", "finally" 등의 핸들러를 붙여 각각 데이터, 에러, 클린업 로직을 실행함  - 비동기 처리의 순서 조작, 에러 핸들링, 여러 동기 요청 등을 쉽게 처리 할 수 있음

• Promise의 특징
  • "then" 체인을 붙여, 비동기 실행을 마치 동기 실행처럼 동작하도록 함
  • "then", "catch"는 비동기, 동기 실행 중 어떤 것이라도 리턴할 수 있음
  • Promise 객체가 가지는 3가지 상태 
    • pending : 비동기 실행이 끝나기를 기다리는 상태
    • fulfilled : 비동기 실행이 성공한 상태
    • rejected : 비동기 실행이 실패한 상태
  • fulfilled, rejected 상태는 settled라고 지칭함
• Multiple Promise handling 
  • Promise.all() 
    • 모든 promise가 fulfilled 되길 기다림
    • 하나라도 에러가 발생하면, 모든 promise 요청이 중단 됨
  • Promise.allSettled() : 모든 promise가 settled 되길 기다림
  • Promise.race() : 넘겨진 promise들 중 하나라도 settled 되길 기다림
  • Promise.any() : 넘겨진 promise 중 하나라도 fullfilled 되길 기다림
• Promise chaining, nested promise
  • promise 객체는 settled 되더라도 계속 핸들러를 붙일 수 있음
    • 핸들러는 붙인 순서대로 호출 됨
  • catch 뒤에 계속 핸들러가 붙어 있다면, 에러를 처리한 후에 계속 진행됨
    • 이때 catch에서 리턴한 값이 then으로 전달 됨

Aysnc & await

• promise 체인을 구축하지 않고도 promise를 직관적으로 사용할 수 있는 문법
  • 현재 현업에서 제일 많이 사용하는 방법
• try ~ catch 를 사용해 에러를 직관적으로 처리함
• async function을 만들고, promise를 기다려야 하는 표현 앞에 await를 붙임
• 여러개의 await를 순서대로 나열하여, then 체인을 구현할 수 있음

Promise.all()	async & awiat
특정 비동기 작업이 상대적으로 빠르게 끝나도, 느린 처리를 끝까지 기다려야 함	- 병렬 처리를 구현할 수 있음. 즉, 끝난대로 먼저 처리될 수 있음

 

Open API

• RESTful API를 하나의 문서로 정의하기 위한 문서 표준
• OpenAPI Specification(OAS)로 정의됨
• Swagger등의 툴로, Open API로 작성된 문서를 파싱해 테스팅 도구로 만들 수 있음
• front-end, back-enc 개발자와의 협업 시 주요한 도구로 사용
• API의 method, endpoint 를 정의함
  • endpoint마다 인증 방식, context type등을 정의함
  • body data, query string, path variable 등 정의
  • 요청, 응답 데이터 형식과 타입 정의 - data model 활용

CORS(Corss-Origin Resource Sharing)

• 브라우저는 모든 요청 시, origin 헤더를 포함하고 있음
• 서버는 origin 헤더를 통해, 해당 요청이 원하는 도메인에서부터 출발한 것인지 판단함
• 다른 origin에서 온 요청은 서버에서 기본적으로 거부함
  • 보통 서버의 endpoing 홈페이지와 domain은 다른 경우가 많음
  • 서버에서는 홈페이지 domain을 허용하여, 다른 domain이라고 하더라도 요청을 보낼 수 있게 함
  • 서버는 Access-Control-Allow-Origin 외에 Access-Control-*을 포함하는 헤더에 CORS 관련 정보를 클라이언트로 보냄
• 왜 CORS를 설정하는가?
  • 웹 사이트에 악성 Script 가 로드되어 수상한 요청을 하는 것을 막기 위함
  • 익명 유저로부터의 디도스(DDoS) 공격 등을 막기 위함
• CORS 설정 방법
  • 서버(back-end)에서 CORS 설정
  • 프론트에서 proxy 서버 등을 만들어 설정

 

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript