JavaScript 중급 서술형 평가 (자바스크립트에서 this 키워드의 사용과 그 특성에 대해 설명, 렉시컬 스코프(Lexical Scope)의 개념과 그 특성에 대해 설명, 브라우저가 어떻게 동작하는지 설명, 이벤트 버블링과 캡처링을 설명하고 이를 방지하기 위한 방법을 서술, 프로미스(Promise)의 3가지 상태에 대해 설명)

# JavaScript 중급 서술형 평가 (자바스크립트에서 this 키워드의 사용과 그 특성에 대해 설명, 렉시컬 스코프(Lexical Scope)의 개념과 그 특성에 대해 설명, 브라우저가 어떻게 동작하는지 설명, 이벤트 버블링과 캡처링을 설명하고 이를 방지하기 위한 방법을 서술, 프로미스(Promise)의 3가지 상태에 대해 설명) ## PH

• 2024-08-31 : First posting.

## TOC ## 자바스크립트에서 this 키워드의 사용과 그 특성에 대해 설명 자바스크립트에서 this 키워드는 실행 컨텍스트에 따라 그 값이 결정되며, 현재 실행중인 함수 또는 메소드의 "소유자"를 가리킵니다. 전역 실행 컨텍스트에서 this 는 전역 객체 (브라우저에서는 window, Node.js 에서는 global) 를 가리킵니다. 일반 함수에서 this 의 값은 기본적으로 전역 객체를 가리키지만, 엄격 모드 ('use strict') 에서는 undefined 가 됩니다. 객체의 메소드로서 함수가 호출될 때, this 는 해당 메소드를 호출한 객체에 바인딩 됩니다. 생성자 함수에서 this 는 새로 생성되는 객체를 가리키며, 이벤트 핸들러에서 this 는 이벤트를 받는 요소를 가리킵니다. 화살표 함수에서 this 는 함수가 생성된 시점의 실행 컨텍스트의 this 를 "상속" 받습니다. ## 렉시컬 스코프 (Lexical Scope) 의 개념과 그 특성에 대해 설명 렉시컬 스코프는 변수와 블록 스코프가 코드가 작성된 구조에 따라 결정되는 스코프의 한 형태입니다. 함수나 블록이 정의된 시점의 외부 환경을 기준으로 스코프가 결정되며, 이는 함수가 실행될 때가 아니라 선언될 때 스코프가 결정된다는 것을 의미합니다. 예를 들어, 함수 내부에서 다른 함수를 정의하고 호출하면, 내부 함수는 항상 자신이 정의된 환경을 참조합니다. 이러한 특성 때문에 클로저가 가능해지며, 외부 함수의 변수를 내부 함수에서 접근할 수 있습니다. ### 렉시컬 스코프란? 렉시컬 스코프는 변수와 블록 스코프가 코드가 작성된 구조에 따라 결정되는 스코프의 한 형태입니다. 즉, 함수나 블록이 정의된 시점의 외부 환경을 기준으로 스코프가 결정됩니다. 이는 함수가 실행될 때가 아니라 선언될 때 스코프가 결정된다는 것을 의미합니다. ### 렉시컬 스코프의 작동 방식 렉시컬 스코프의 작동 방식은 다음과 같습니다: 스코프 결정 시점: 함수가 정의된 위치를 기준으로 스코프가 결정됩니다. 스코프 체인: 함수 내부에서 변수를 참조할 때, 먼저 내부 스코프에서 변수를 찾고, 없으면 외부 스코프로 이동하여 변수를 찾습니다. 이러한 과정을 스코프 체인이라고 합니다. 상위 스코프 참조: 내부 함수는 자신이 정의된 외부 환경 (상위 스코프) 을 참조할 수 있습니다. 이를 통해 함수가 호출되는 위치와 상관없이 일관된 스코프를 유지합니다. 렉시컬 스코프 예시 ``` const outerVar = 'I am outside!'; function outerFunction() { const innerVar = 'I am inside!'; function innerFunction() { console.log(outerVar); // 'I am outside!' console.log(innerVar); // 'I am inside!' } innerFunction(); } outerFunction(); ```/ 위 예제에서 outerFunction 은 outerVar 변수를 참조할 수 있습니다. 또한, innerFunction 은 outerVar 와 innerVar 변수를 모두 참조할 수 있습니다. 이는 innerFunction 이 outerFunction 내부에서 정의되었기 때문에, innerFunction 은 outerFunction 의 스코프를 참조할 수 있기 때문입니다. ### 클로저와 렉시컬 스코프 렉시컬 스코프는 클로저 (Closure) 와 밀접한 관련이 있습니다. 클로저는 함수와 그 함수가 선언될 당시의 렉시컬 환경의 조합을 말합니다. 클로저는 외부 함수의 변수를 내부 함수에서 접근할 수 있도록 합니다. ``` function makeCounter() { let count = 0; return function() { count++; console.log(count); } } const counter = makeCounter(); counter(); // 1 counter(); // 2 ```/ 위 예제에서 makeCounter 함수는 count 변수를 가지고 있으며, 내부에 count 변수를 증가시키는 함수를 반환합니다. 반환된 함수는 makeCounter 함수의 렉시컬 환경을 기억하고 있어, count 변수를 계속해서 증가시킬 수 있습니다. 이러한 특성이 바로 클로저입니다. ## 브라우저가 어떻게 동작하는지 설명 ### 브라우저란 웹 페이지, 이미지, 비디오 등의 콘텐츠를 수신, 전송 및 표현하는 소프트웨어입니다. 인터넷에 접속하기 위해 사용하는 Chrome, Safari, Edge, Firefox 등이 브라우저입니다. ### 브라우저의 구조 사용자 인터페이스: 주소 표시줄, 각종 버튼 (이전/다음, 새로고침, 설정, 닫기 등), 북마크 메뉴 등. 요청한 페이지를 보여주는 영역을 제외한 나머지 모든 부분이 사용자 인터페이스에 해당합니다. 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어해주는 엔진입니다. 자료 저장소를 참조하며 로컬에 데이터를 읽기/쓰기 하면서 다양한 작업을 합니다. 렌더링 엔진: 요청한 콘텐츠를 표시합니다. 요청한 웹 페이지의 HTML 과 CSS 를 파싱하여 화면에 표시합니다. 통신: HTTP 요청과 같은 네트워크 호출에 사용됩니다. 자바스크립트 해석기: 자바스크립트 코드를 해석하고 실행합니다. UI 백엔드: input, select 와 같이 기본적으로 지원하는 요소를 그립니다. OS 사용자 인터페이스에서 정해준 것들을 사용합니다. 자료 저장소: 쿠키, 로컬 스토리지와 같이 로컬 영역에 저장해야 하는 모든 종류의 데이터들을 저장합니다. ### 통신 과정 사용자가 주소창에 URL을 입력하면, DNS 조회를 해서 요청한 페이지의 자원이 어디에 위치 하는지 찾습니다. https://google.com 을 주소창에 입력한다면, DNS조회를 통해 HTML페이지가 있는 IP 주소 50.123.123.12 를 알아냅니다. IP 주소를 알고난 뒤, 브라우저는 서버와 TCP 핸드쉐이크를 통해 연결을 설정합니다. HTTPS를 이용한 보안성있는 연결을 위해서는 TLS 협상도 필요합니다. 웹서버로 한 번 연결이 성립되고 나면, 이제 브라우저는 HTTP GET request를 보냅니다. 브라우저가 데이터 덩어리를 받으면, 수신된 정보를 분석하고 화면에 보여주기까지 렌더링 과정을 거칩니다. ### 렌더링 과정 아래는 Webkit 의 동작 과정입니다. #### DOM (Document Object Model), CSSOM (CSS Object Model) 생성 서버로부터 받은 HTML, CSS 를 다운로드 받습니다. 이 때 HTML, CSS 파일은 단순한 텍스트이므로 연산과 관리를 위해 Parser 를 통해 Object Model 로 만듭니다. HTML 은 DOM Tree 로 CSS 는 CSSOM 으로 만듭니다. #### Render Tree 생성 Render Tree 에는 스타일 정보가 설정되어 있으며, 실제 화면에 표현되는 노드들로만 구성됩니다. #### Layout Render Tree 노드들이 가지고 있는 스타일과 속성에 따라서 브라우저 화면의 어느 위치에 어떤 크기로 출력할지 계산합니다. #### Paint Layout 계산이 완료되면 요소들을 실제 화면에 그립니다. 이전 단계에서 요소들의 위치와 크기, 스타일 계산이 완료된 Render Tree 를 이용해 실제 값을 채워 넣습니다. 이 때 텍스트, 색, 이미지, 그림자 효과 등을 모두 처리해 그립니다. ## 이벤트 버블링과 캡처링을 설명하고 이를 방지하기 위한 방법을 서술 이벤트 버블링은 이벤트가 발생한 요소에서 시작하여 DOM 트리를 거슬러 올라가며 상위 요소들로 전파되는 과정입니다. 반면, 이벤트 캡처링은 최상위 요소에서 시작하여 이벤트 발생 위치까지 내려가는 과정입니다. 이벤트 전파를 방지하기 위해서는 이벤트 핸들러 내에서 event.stopPropagation() 메서드를 호출하여 이벤트가 더 이상 전파되지 않도록 할 수 있습니다. ## 프로미스(Promise)의 3가지 상태에 대해 설명 Pending: 이 상태는 프로미스 객체가 생성되고 대상 비동기 작업이 아직 완료되지 않은 초기 상태를 나타냅니다. 프로미스는 생성될 때 기본적으로 이 상태에서 시작하며, 비동기 작업이 진행 중이라는 것을 의미합니다. 이 시점에서 프로미스는 성공 (fulfilled) 또는 실패 (rejected) 로 상태가 변경될 수 있습니다. Fulfilled: 프로미스가 성공적으로 완료되었을 때 이 상태를 가집니다. 이는 비동기 작업이 성공적으로 완료되어 프로미스가 결과 값을 가지게 된 상황을 의미합니다. fulfilled 상태가 되면, 프로미스에 등록된 then() 메서드의 첫 번째 콜백 함수가 호출되며, 이 함수는 비동기 작업의 결과를 처리합니다. Rejected: 비동기 작업이 실패하거나 에러가 발생하여 프로미스를 완료할 수 없을 때 이 상태가 됩니다. rejected 상태는 프로미스가 예상된 결과를 제공할 수 없음을 나타내며, 이 경우 then() 메서드의 두 번째 콜백 함수 또는 catch() 메서드에 등록된 콜백 함수가 호출됩니다. 이 함수들은 에러 처리 또는 예외 처리를 담당하여 프로그램이 적절히 반응할 수 있도록 합니다. ## RRA

1. JavaScript 중급 서술형 평가