[Weekly Paper] 실행 컨텍스트(Exexution context)란?

1️⃣ 자바스크립트 실행 컨텍스트(Execution context)에 대해 설명해 주세요.

자바스크립트에서 실행 컨텍스트는 코드가 실행되는 환경을 의미합니다. 즉, 코드를 실행하기 위해 필요한 정보들을 모아둔 상자와 같은 것이라고 생각하면 됩니다.

 

자바스크립트는 코드를 실행하기 전에 어떤 변수들이 있고, 어떤 함수들이 있는지, 그리고 현재 this가 무엇을 가리키는지 알고, 실행 컨텍스트가 관리합니다.

 

실행 컨텍스트의 종류

1. 전역 실행 컨텍스트

자바스크립트 파일을 처음 실행할 때 가장 먼저 만들어지는 환경이며, 전역 변수나 전역 함수가 여기에 저장됩니다.

 

2. 함수 실행 컨텍스트

함수를 호출할 때마다 그 함수만의 실행 환경이 따로 만들어집니다. 즉, 함수가 실행될 때마다 새로 만들어지는 환경입니다.

 

실행 컨텍스트의 과정

1. 전역 실행 컨텍스트가 생성

처음 자바스크립트 파일이 실행되면, 자바스크립트는 전역 실행 컨텍스트를 만들고, 작성한 변수, 함수 등이 저장됩니다.

 

2. 함수 호출 시 새로운 실행 컨텍스트 생성

함수를 호출하면, 그 함수만의 작은 환경이 만들어집니다. 이 환경에서는 그 함수에서 사용하는 변수, 매개변수 등의 관리됩니다.

 

3. 코드 실행

전역 실행 컨텍스트나 함수의 실행 컨텍스트가 만들어지면, 그 환경에서 실제로 코드가 실행됩니다.

 

// 예시
var x = 10;

function myFunction() {
	var y = 5;
   	console.log(x + y);
}

myFunction();

1. 전역 실행 컨텍스트가 먼저 만들어지고, 이곳에서 변수 `x`와 함수 `myFunction`이 저장됩니다.
2. 그 다음. `myFunction()`이 호출되면서 새로운 함수 실행 컨텍스트가 만들어져요. 이 환경에서는 변수 `y`가 새로 선언되고, 그 값을 `x + y`로 계산해서 출력합니다.

---

2️⃣ Ajax에 대해 설명해 주세요.

Ajax는 Asynchronous JavaScript And XML(비동기식 자바스크립트와 XML)의 약자입니다. 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능입니다. 브라우저가 가지고 있는 XMLHttpRequest 객체나, fetch API를 이용해 전체 페이지를 새로 고치지 않고도 페이지의 일부 데이터를 동적으로 로드하거나 전송할 수 있는 기술입니다.

 

Ajax 사용 이유

Ajax는 페이지 새로고침 없이 서버와 데이터를 주고받을 수 있게 해줍니다. 이를 통해 사용자는 웹 페이지의 일부만 갱신하고 나머지 페이지는 그대로 유지하면서 더 빠르고 부드러운 사용자 경험을 제공합니다. 다음과 같은 상황에서 Ajax가 사용됩니다.

• 데이터 조회 : 서버로부터 새로운 데이터를 가져올 때 페이지 새로고침 없이 동적으로 데이터를 보여줍니다.
• 폼 제출 : 폼 데이터를 서버로 전송하고 결과를 페이지에 갱신하는 등의 기능을 처리합니다.
• 비동기 처리 : 서버와 통신하는 동안 사용자가 다른 작업을 계속할 수 있도록 합니다.

 

Ajax의 장단점

장점

• 빠른 데이터 갱신 : 전체 페이지를 새로고침하지 않고도 데이터를 빠르게 갱신할 수 있어 사용자 경험이 향상됩니다.
• 네트워크 효율성 : 필요한 데이터마나 요청하고 응답받기 때문에 불필요한 데이터 전송을 줄일 수 있습니다.
• 비동기 처리 : 서버로부터 응답을 기다리는 동안 다른 작업을 할 수 있어 효율적인 처리가 가능합니다.
• 동적인 사용자 인터페이스 : 페이지의 특정 부분만 업데이트할 수 있어 동적이고 직관적인 UI를 제공합니다.

 

단점

• 브라우저 호환성 문제 : 오래된 브라우저에서는 XMLHttpRequest를 제대로 지원하지 않는 경우가 있어 호환성 문제가 발생할 수 있습니다.
• SEO 문제 : 페이지 내용이 자바스크립트로 동적으로 로드되기 때문에 검색 엔진 최적화(SEO)에 불리할 수 있습니다.
• 복잡한 상태 관리 : 여러 Ajax 요청을 동시에 처리해야 할 경우 상태 관리가 복잡해질 수 있습니다.

 

Ajax 사용 방법

1. XMLHttpRequest 사용

오래된 사용 방식이지만 여전히 많이 사용됩니다.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'url', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();

 

2. fetch API 사용

fetch는 최신 API로, 더 간결하고 직관적인 코드로 Ajax 요청을 할 수 있습니다.

fetch('url')
    .then(response => reseponse.json())
    .then(data => console.log(data))
    catch(error => console.error('Error:', error));