자바스크립트 3

SOP(Same-Origin-Policy), CORS(Cross-Origin-Resource-Sharing)

자주 마주치는 CORS 오류 프론트엔드 프로젝트를 할 때 자주 마주치는 오류 중 하나로 CORS가 있다. 토이 프로젝트를 할 때 API를 가져가 쓸 때도 빈번하게 발생했고, 현업에서 백엔드/프론트엔드 서버를 다르게 구축하고 개발할 때도 마찬가지이다. 토이 프로젝트를 할 때는 한 줄 코드를 넣어 프록시를 우회하도록 하며 API를 쓰거나(a), webpack 설정 파일에 개발 시에 사용할 수 있게 proxy 설정(b)을 해주곤 했다. 좀 더 큰 규모의 프로젝트를 진행하면서는 백엔드 개발자에게 CORS 해결을 위해 협조를 요청해서 해결했다. (사전 지식이 부족했을 때 프론트엔드 단에서 실수인가 싶어서 온갖 자료를 찾아보면서 방법을 강구해봤지만 AWS 서버 설정 페이지에서 단 한 번의 클릭으로 해결할 수 있는 ..

👩‍💻/Web 2021.05.10

[JavaScript] 콜스택, 콜백큐, 이벤트 루프의 동작 원리를 통한 비동기 함수의 실행 과정

자바스크립트에서 당연히 의심 없이 사용하던 비동기 함수 실행 과정을 들여다볼 기회가 생겼다. 싱글 스레드 언어인 자바스크립트는 한 줄 한 줄 순서대로 동기적으로 실행되어야 하며, 두 가지 이상의 태스크를 병렬적으로 수행할 수 없어야 하는데, setTimeout이나 웹 API, ES6의 promise 같은 비동기 콜백은 어떻게 실행되고 있는 것일까? 우선 자바스크립트의 두 가지 이상의 statements가 병렬적으로 실행되지 못하는 것은 맞다. 실행은 항상 동기적이다. 자바스크립트 엔진 V8은 프로그램 내 모든 변수의 메모리 할당이 일어나는 Memory Heap과 스택 프레임이 쌓이는 콜 스택으로 이루어져 있고 이 콜 스택(호출 스택)이 하나이므로 싱글 스레드이다. 하지만, 자바스크립트가 실행되는 브라우저..