728x90 반응형 JavaScript25 실행 컨텍스트란? 종류와 그 내부까지 실행 컨텍스트실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다. 여기서 환경은 this, 변수, 객체, 함수 등 코드의 실행에 필요한 기반들입니다. 코드를 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장합니다. 실행 컨텍스트 종류1. 전역 실행 컨텍스트처음으로 자바스크립트 코드가 실행될 때 생성됩니다.브라우저의 window, Node.js의 global 객체가 있습니다. 2. 함수 실행 컨텍스트함수가 호출될 때마다 생성됩니다.각각의 함수 호출은 모두 각자의 실행 컨텍스트를 생성하고 가집니다. 3. eval 실행 컨텍스트strict mode(엄.. 2025. 5. 28. Google OAuth 2.0 로그인 구현하기 Google 로그인과 구글 드라이브의 파일과 비디오를 업로드하는 기능을 맡아 구현하게 되었다. Google 로그인은 물론 구글 드라이브를 연결해본 경험은 없었다. 호기롭게 시작했지만 많은 오류와 시련을 겪었다.. 변명아닌 변명을 해보자면 1. google 공식문서라고 믿으면 안된다.. (믿는 도끼에 큰 코 다친다고 공식문서는 업데이트도 되지 않았었고, 구글 로그인 관련된 코드를 관리하는 웹과 구글 드라이브 관련 코드를 관리하는 웹이 서로 다른 코드를 예제로 들고 있었다.) 2. svelte로 작성된 코드가 없었기 때문에 JS 샘플코드만 가지고 svelte화 시키는 과정에서 시간이 소요되었다. 3. TS로 작성된 코드도 없었기 때문에 타입 지정하는데 어려움을 겪었다. 어쨌든 결과적으로 혼자서 Google .. 2024. 1. 15. ES Module 동작 방식 CommonJS(CJS) module.exports = { ... } // 모듈 내보낼 때 const utils = require('utils'); // 모듈 가져올 때 NodeJS에서 지원하는 모듈 방식으로 초기 Node 버전부터 사용되었다. 별도의 설정이 없다면 CJS가 기본값이다. require()는 즉시 스크립트를 실행하는 구조이고, 동기적으로 작동하기 때문에 import 순서에 따라 스크립트를 실행하고 module.exports에 설정된 값만을 리턴한다. ES Modules export.default = () => { ... } // 모듈 내보낼 때 import utils from 'utils'; // 모듈 가져올 때 ECMAScript에서 지원하는 방식이다. package.json에 "type.. 2024. 1. 11. 이벤트 루프 작동 원리 자바스크립트는 하나의 프로그램에서 하나의 코드만 실행할 수 있는 싱글 스레드 프로그래밍 언어다. 하지만 자바스크립트의 동시성을 지원해주는 것이 바로 이벤트 루프다. 즉, 자바스크립트 엔진은 싱글 스레드로 동작하지만, 브라우저는 멀티 스레드로 동작하는 것이다. 이 말은 아래의 작동 원리를 보면 조금 더 이해가 잘 될 것이다. 먼저 v8 자바스크립트 엔진이 어떤 절차로 동작하는지 간단하게 작성했다. 아래의 이미지를 보면서 흐름을 읽는 것이 이해하기가 쉽다. 1. 힙 영역에서 메모리를 할당 2. 콜스택에 맨 처음으로 선언한 코드들을 가지고 있는 anonymous 푸시 3. 그 다음에, 호출된 코드들이 순차적으로 콜스택에 푸시되고 실행 4. 호출된 코드들 중 비동기 함수는 Web APIs로 이동 5. Web A.. 2023. 6. 1. [JS/오류해결] Uncaught (in promise) TypeError: Failed to execute 'json' on 'Response': body stream already read 문제 상황 fetch를 사용하고, 응답을 받을 때 response.json()을 사용한다. 이때 response.json()을 2번 사용하면 오류가 발생한다. fetch('https://www.naver.com/') .then((response) => { console.log(response); if (response.ok) { console.log(response.json()); return response.json(); // 오류 발생 } }); 원인 response.json()은 HTTP 응답에서 JSON 데이터를 추출하기 위한 메서드이다. 이 메서드는 해당 HTTP 응답의 body를 읽어서 JSON 객체로 변환해 주는 역할을 한다. HTTP 응답의 body는 일반적으로 string으로 전송되고, .. 2023. 4. 16. 이전 1 2 3 4 5 다음 728x90 반응형
