반응형
m.logPrint() is working!
<eq> and <eqq> tags are rendered to MathJax format, being enclosed by \ ( \ ) and \ [ \ ].
docuK-1 scripts started!
If this log is not closed automatically, there must be an error somewhere in your document or scripts.
Table of Contents is filled out.
Auto numberings of sections (div.sec>h2, div.subsec>h3, div.subsubsec>h4), <eqq> tags, and <figure> tags are done.
<cite> and <refer> tags are rendered to show bubble reference.
<codeprint> tags are printed to corresponding <pre> tags, only when the tags exist in the document.
Current styles (dark/bright mode, font-family, font-size, line-height) are shown.
disqus.js with id="disqus-js" is loaded.
kakao.js with id="kakao-jssdk" is loaded.
New ShortKeys (T: Table of Contents, F: Forward Section, D: Previous Section, L: To 전체목록/[Lists]) are set.
m.delayPad=0;
m.wait=1024;
wait 1079ms.
<eq> and <eqq> tags are rendered to MathJax format, being enclosed by \ ( \ ) and \ [ \ ].
docuK-1 scripts started!
If this log is not closed automatically, there must be an error somewhere in your document or scripts.
Table of Contents is filled out.
Auto numberings of sections (div.sec>h2, div.subsec>h3, div.subsubsec>h4), <eqq> tags, and <figure> tags are done.
<cite> and <refer> tags are rendered to show bubble reference.
<codeprint> tags are printed to corresponding <pre> tags, only when the tags exist in the document.
Current styles (dark/bright mode, font-family, font-size, line-height) are shown.
disqus.js with id="disqus-js" is loaded.
kakao.js with id="kakao-jssdk" is loaded.
New ShortKeys (T: Table of Contents, F: Forward Section, D: Previous Section, L: To 전체목록/[Lists]) are set.
m.delayPad=0;
m.wait=1024;
wait 1079ms.
![](https://tistory1.daumcdn.net/tistory/1468360/skin/images/link.png)
![](https://tistory1.daumcdn.net/tistory/1468360/skin/images/icon-Tag.png)
![](https://tistory1.daumcdn.net/tistory/1468360/skin/images/icon-Recoeve.png)
![](https://tistory1.daumcdn.net/tistory/1468360/skin/images/icon-X.png)
![](https://tistory1.daumcdn.net/tistory/1468360/skin/images/icon-Facebook.png)
![](https://tistory1.daumcdn.net/tistory/1468360/skin/images/icon-Kakao.png)
![](https://tistory1.daumcdn.net/tistory/1468360/skin/images/icon-Whatsapp.png)
- Creative Commons
- 저작자표시 - 적절한 출처와, 해당 라이센스 링크를 표시하고, 변경이 있는 경우 공지해야 합니다. 합리적인 방식으로 이렇게 하면 되지만, 이용 허락권자가 귀하에게 권리를 부여한다거나 귀하의 사용을 허가한다는 내용을 나타내서는 안 됩니다.
- 비영리 - 이 저작물은 영리 목적으로 이용할 수 없습니다.
- 변경금지 - 이 저작물을 리믹스, 변형하거나 2차적 저작물을 작성하였을 경우 그 결과물을 공유할 수 없습니다.
Short Keys
- Toggle a mess
- K: DocuK Log.
- F: Forward Section.
- D: Backward Section.
- R: References.
- Z: Tistory comments.
- X: DISQUS comments.
- I: Log in to Tistory.
- O: Log out from Tistory.
* 홍보/Promoting Recoeve.net (3S | Slow/Sexy/Sincere SNS)
유튜브 음악 MV 들을 광고없이 목록재생 해보세요.
접속하셔서 별점만 드레그 하시면 자신의 페이지에 저장 됩니다.
그리고 자신의 페이지로 이동한 뒤 추천 받기 (단축키 R) 를 누르시면 자신이 점수 메긴것들로 이웃 (이웃보기 단축키 B) 을 자동으로 찾아주고 그 이웃들로부터 추천을 받을 수 있습니다.
Come here ([Music/Break]--Pop of kipid's Recoeve.net) and just drag stars/points.
Based on your points on URIs (musics), you will be connected to your neighbors (See neighbors: shortkey 'B') of your kind. And you will get recoms (recommendations: shortkey 'R') from them, and also give recoms to them.
접속하셔서 별점만 드레그 하시면 자신의 페이지에 저장 됩니다.
그리고 자신의 페이지로 이동한 뒤 추천 받기 (단축키 R) 를 누르시면 자신이 점수 메긴것들로 이웃 (이웃보기 단축키 B) 을 자동으로 찾아주고 그 이웃들로부터 추천을 받을 수 있습니다.
Come here ([Music/Break]--Pop of kipid's Recoeve.net) and just drag stars/points.
Based on your points on URIs (musics), you will be connected to your neighbors (See neighbors: shortkey 'B') of your kind. And you will get recoms (recommendations: shortkey 'R') from them, and also give recoms to them.
평가와 기록: 웹사이트에서 본 기사, 뉴스, 영상, 음악 등을 기록하고 평가하세요. 이 정보는 추천 알고리즘을 통해 사용자에게 맞춤형 추천을 제공하는 데 사용됩니다. 즉, 당신이 좋아하는 유형의 콘텐츠를 더 많이 발견할 수 있습니다.
Evaluate and Rate Content: As you explore content on the platform, you can evaluate and rate it based on your preferences and interests. This could involve liking, rating, or commenting on articles, posts, or other types of content.
Connect with Like-Minded Users: The platform likely has features for connecting with other users who share your interests. You might follow or connect with these users to build your network.
Evaluate and Rate Content: As you explore content on the platform, you can evaluate and rate it based on your preferences and interests. This could involve liking, rating, or commenting on articles, posts, or other types of content.
Connect with Like-Minded Users: The platform likely has features for connecting with other users who share your interests. You might follow or connect with these users to build your network.
* For the usage examples, visit my page (예제를 보시려면 제 페이지를 방문해 주세요.)
- [Music/Break]--K-Pop of kipid's Recoeve.net (Multireco mode)
- [Music/Break]--Pop of kipid's Recoeve.net (Multireco mode)
- [Music/Break]--남규리 | Nam Gyuri (Actor of Korea) of kipid's Recoeve.net (Multireco mode)
- [Music/Break]--Pet of kipid's Recoeve.net (Multireco mode)
- [Physics/Math/Science]--Physics of kipid's Recoeve.net
- [음식/요리/건강]--건강 of kipid's Recoeve.net
Recoeve.net Manual collection | 사용방법 모음집: [Recoeve]--Manual/설명서 of kipid's Recoeve.net
Mode: Bright; Font: Noto Sans KR; font-size: 18.0px (10.0); line-height: 1.6;
width: 1280, height: 720, version: 2.12.16
Canonical URI: https://kipid.tistory.com/entry/JavaScript-중급-서술형-평가-자바스크립트에서-this-키워드의-사용과-그-특성에-대해-설명-렉시컬-스코프-Lexical-Scope-의-개념과-그-특성에-대해-설명-브라우저가-어떻게-동작하는지-설명-이벤트-버블링과-캡처링을-설명하고-이를-방지하기-위한-방법을-서술-프로미스-Promise-의-3가지-상태에-대해-설명
dg:plink (Document Global Permanent Link): https://kipid.tistory.com/366
document.referrer: Empty
width: 1280, height: 720, version: 2.12.16
Canonical URI: https://kipid.tistory.com/entry/JavaScript-중급-서술형-평가-자바스크립트에서-this-키워드의-사용과-그-특성에-대해-설명-렉시컬-스코프-Lexical-Scope-의-개념과-그-특성에-대해-설명-브라우저가-어떻게-동작하는지-설명-이벤트-버블링과-캡처링을-설명하고-이를-방지하기-위한-방법을-서술-프로미스-Promise-의-3가지-상태에-대해-설명
dg:plink (Document Global Permanent Link): https://kipid.tistory.com/366
document.referrer: Empty
![](https://tistory1.daumcdn.net/tistory/1468360/skin/images/link.png)
![](https://tistory1.daumcdn.net/tistory/1468360/skin/images/icon-Tag.png)
![](https://tistory1.daumcdn.net/tistory/1468360/skin/images/icon-Recoeve.png)
![](https://tistory1.daumcdn.net/tistory/1468360/skin/images/icon-X.png)
![](https://tistory1.daumcdn.net/tistory/1468360/skin/images/icon-Facebook.png)
![](https://tistory1.daumcdn.net/tistory/1468360/skin/images/icon-Kakao.png)
![](https://tistory1.daumcdn.net/tistory/1468360/skin/images/icon-Whatsapp.png)
JavaScript 중급 서술형 평가 (자바스크립트에서 this 키워드의 사용과 그 특성에 대해 설명, 렉시컬 스코프(Lexical Scope)의 개념과 그 특성에 대해 설명, 브라우저가 어떻게 동작하는지 설명, 이벤트 버블링과 캡처링을 설명하고 이를 방지하기 위한 방법을 서술, 프로미스(Promise)의 3가지 상태에 대해 설명)
Table of Contents
PH.Posting History
1.자바스크립트에서 this 키워드의 사용과 그 특성에 대해 설명
2.렉시컬 스코프 (Lexical Scope) 의 개념과 그 특성에 대해 설명
2.1.렉시컬 스코프란?
2.2.렉시컬 스코프의 작동 방식
2.3.클로저와 렉시컬 스코프
3.브라우저가 어떻게 동작하는지 설명
3.1.브라우저란
3.2.브라우저의 구조
3.3.통신 과정
3.4.렌더링 과정
3.4.1.DOM (Document Object Model), CSSOM (CSS Object Model) 생성
3.4.2.Render Tree 생성
3.4.3.Layout
3.4.4.Paint
4.이벤트 버블링과 캡처링을 설명하고 이를 방지하기 위한 방법을 서술
5.프로미스(Promise)의 3가지 상태에 대해 설명
Refs.References and Related Articles
T1.자바스크립트에서 this 키워드의 사용과 그 특성에 대해 설명
▼ Show/Hide
자바스크립트에서 this 키워드는 실행 컨텍스트에 따라 그 값이 결정되며, 현재 실행중인 함수 또는 메소드의 "소유자"를 가리킵니다.
전역 실행 컨텍스트에서 this 는 전역 객체 (브라우저에서는 window, Node.js 에서는 global) 를 가리킵니다.
일반 함수에서 this 의 값은 기본적으로 전역 객체를 가리키지만, 엄격 모드 ('use strict') 에서는 undefined 가 됩니다.
객체의 메소드로서 함수가 호출될 때, this 는 해당 메소드를 호출한 객체에 바인딩 됩니다.
생성자 함수에서 this 는 새로 생성되는 객체를 가리키며, 이벤트 핸들러에서 this 는 이벤트를 받는 요소를 가리킵니다.
화살표 함수에서 this 는 함수가 생성된 시점의 실행 컨텍스트의 this 를 "상속" 받습니다.
▲ Hide
T2.렉시컬 스코프 (Lexical Scope) 의 개념과 그 특성에 대해 설명
▼ Show/Hide
렉시컬 스코프는 변수와 블록 스코프가 코드가 작성된 구조에 따라 결정되는 스코프의 한 형태입니다. 함수나 블록이 정의된 시점의 외부 환경을 기준으로 스코프가 결정되며, 이는 함수가 실행될 때가 아니라 선언될 때 스코프가 결정된다는 것을 의미합니다.
예를 들어, 함수 내부에서 다른 함수를 정의하고 호출하면, 내부 함수는 항상 자신이 정의된 환경을 참조합니다. 이러한 특성 때문에 클로저가 가능해지며, 외부 함수의 변수를 내부 함수에서 접근할 수 있습니다.
T2.1.렉시컬 스코프란?
렉시컬 스코프는 변수와 블록 스코프가 코드가 작성된 구조에 따라 결정되는 스코프의 한 형태입니다. 즉, 함수나 블록이 정의된 시점의 외부 환경을 기준으로 스코프가 결정됩니다. 이는 함수가 실행될 때가 아니라 선언될 때 스코프가 결정된다는 것을 의미합니다.
T2.2.렉시컬 스코프의 작동 방식
렉시컬 스코프의 작동 방식은 다음과 같습니다:
스코프 결정 시점: 함수가 정의된 위치를 기준으로 스코프가 결정됩니다.
스코프 체인: 함수 내부에서 변수를 참조할 때, 먼저 내부 스코프에서 변수를 찾고, 없으면 외부 스코프로 이동하여 변수를 찾습니다. 이러한 과정을 스코프 체인이라고 합니다.
상위 스코프 참조: 내부 함수는 자신이 정의된 외부 환경 (상위 스코프) 을 참조할 수 있습니다. 이를 통해 함수가 호출되는 위치와 상관없이 일관된 스코프를 유지합니다.
렉시컬 스코프 예시
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 의 스코프를 참조할 수 있기 때문입니다.
T2.3.클로저와 렉시컬 스코프
렉시컬 스코프는 클로저 (Closure) 와 밀접한 관련이 있습니다. 클로저는 함수와 그 함수가 선언될 당시의 렉시컬 환경의 조합을 말합니다. 클로저는 외부 함수의 변수를 내부 함수에서 접근할 수 있도록 합니다.
function makeCounter() { let count = 0; return function() { count++; console.log(count); } } const counter = makeCounter(); counter(); // 1 counter(); // 2
위 예제에서 makeCounter 함수는 count 변수를 가지고 있으며, 내부에 count 변수를 증가시키는 함수를 반환합니다. 반환된 함수는 makeCounter 함수의 렉시컬 환경을 기억하고 있어, count 변수를 계속해서 증가시킬 수 있습니다. 이러한 특성이 바로 클로저입니다.
▲ Hide
T3.브라우저가 어떻게 동작하는지 설명
▼ Show/Hide
T3.1.브라우저란
웹 페이지, 이미지, 비디오 등의 콘텐츠를 수신, 전송 및 표현하는 소프트웨어입니다. 인터넷에 접속하기 위해 사용하는 Chrome, Safari, Edge, Firefox 등이 브라우저입니다.
T3.2.브라우저의 구조
사용자 인터페이스: 주소 표시줄, 각종 버튼 (이전/다음, 새로고침, 설정, 닫기 등), 북마크 메뉴 등. 요청한 페이지를 보여주는 영역을 제외한 나머지 모든 부분이 사용자 인터페이스에 해당합니다.
브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어해주는 엔진입니다. 자료 저장소를 참조하며 로컬에 데이터를 읽기/쓰기 하면서 다양한 작업을 합니다.
렌더링 엔진: 요청한 콘텐츠를 표시합니다. 요청한 웹 페이지의 HTML 과 CSS 를 파싱하여 화면에 표시합니다.
통신: HTTP 요청과 같은 네트워크 호출에 사용됩니다.
자바스크립트 해석기: 자바스크립트 코드를 해석하고 실행합니다.
UI 백엔드: input, select 와 같이 기본적으로 지원하는 요소를 그립니다. OS 사용자 인터페이스에서 정해준 것들을 사용합니다.
자료 저장소: 쿠키, 로컬 스토리지와 같이 로컬 영역에 저장해야 하는 모든 종류의 데이터들을 저장합니다.
T3.3.통신 과정
사용자가 주소창에 URL을 입력하면, DNS 조회를 해서 요청한 페이지의 자원이 어디에 위치 하는지 찾습니다. https://google.com 을 주소창에 입력한다면, DNS조회를 통해 HTML페이지가 있는 IP 주소 50.123.123.12 를 알아냅니다.
IP 주소를 알고난 뒤, 브라우저는 서버와 TCP 핸드쉐이크를 통해 연결을 설정합니다. HTTPS를 이용한 보안성있는 연결을 위해서는 TLS 협상도 필요합니다.
웹서버로 한 번 연결이 성립되고 나면, 이제 브라우저는 HTTP GET request를 보냅니다. 브라우저가 데이터 덩어리를 받으면, 수신된 정보를 분석하고 화면에 보여주기까지 렌더링 과정을 거칩니다.
T3.4.렌더링 과정
아래는 Webkit 의 동작 과정입니다.
▲ Hide
T4.이벤트 버블링과 캡처링을 설명하고 이를 방지하기 위한 방법을 서술
▼ Show/Hide
이벤트 버블링은 이벤트가 발생한 요소에서 시작하여 DOM 트리를 거슬러 올라가며 상위 요소들로 전파되는 과정입니다.
반면, 이벤트 캡처링은 최상위 요소에서 시작하여 이벤트 발생 위치까지 내려가는 과정입니다.
이벤트 전파를 방지하기 위해서는 이벤트 핸들러 내에서 event.stopPropagation() 메서드를 호출하여 이벤트가 더 이상 전파되지 않도록 할 수 있습니다.
▲ Hide
T5.프로미스(Promise)의 3가지 상태에 대해 설명
▼ Show/Hide
Pending: 이 상태는 프로미스 객체가 생성되고 대상 비동기 작업이 아직 완료되지 않은 초기 상태를 나타냅니다. 프로미스는 생성될 때 기본적으로 이 상태에서 시작하며, 비동기 작업이 진행 중이라는 것을 의미합니다. 이 시점에서 프로미스는 성공 (fulfilled) 또는 실패 (rejected) 로 상태가 변경될 수 있습니다.
Fulfilled: 프로미스가 성공적으로 완료되었을 때 이 상태를 가집니다. 이는 비동기 작업이 성공적으로 완료되어 프로미스가 결과 값을 가지게 된 상황을 의미합니다. fulfilled 상태가 되면, 프로미스에 등록된 then() 메서드의 첫 번째 콜백 함수가 호출되며, 이 함수는 비동기 작업의 결과를 처리합니다.
Rejected: 비동기 작업이 실패하거나 에러가 발생하여 프로미스를 완료할 수 없을 때 이 상태가 됩니다. rejected 상태는 프로미스가 예상된 결과를 제공할 수 없음을 나타내며, 이 경우 then() 메서드의 두 번째 콜백 함수 또는 catch() 메서드에 등록된 콜백 함수가 호출됩니다. 이 함수들은 에러 처리 또는 예외 처리를 담당하여 프로그램이 적절히 반응할 수 있도록 합니다.
▲ Hide
![](https://tistory1.daumcdn.net/tistory/1468360/skin/images/link.png)
![](https://tistory1.daumcdn.net/tistory/1468360/skin/images/icon-Tag.png)
![](https://tistory1.daumcdn.net/tistory/1468360/skin/images/icon-Recoeve.png)
![](https://tistory1.daumcdn.net/tistory/1468360/skin/images/icon-X.png)
![](https://tistory1.daumcdn.net/tistory/1468360/skin/images/icon-Facebook.png)
![](https://tistory1.daumcdn.net/tistory/1468360/skin/images/icon-Kakao.png)
![](https://tistory1.daumcdn.net/tistory/1468360/skin/images/icon-Whatsapp.png)
* 홍보/Promoting Recoeve.net (3S | Slow/Sexy/Sincere SNS)
유튜브 음악 MV 들을 광고없이 목록재생 해보세요.
접속하셔서 별점만 드레그 하시면 자신의 페이지에 저장 됩니다.
그리고 자신의 페이지로 이동한 뒤 추천 받기 (단축키 R) 를 누르시면 자신이 점수 메긴것들로 이웃 (이웃보기 단축키 B) 을 자동으로 찾아주고 그 이웃들로부터 추천을 받을 수 있습니다.
Come here ([Music/Break]--Pop of kipid's Recoeve.net) and just drag stars/points.
Based on your points on URIs (musics), you will be connected to your neighbors (See neighbors: shortkey 'B') of your kind. And you will get recoms (recommendations: shortkey 'R') from them, and also give recoms to them.
접속하셔서 별점만 드레그 하시면 자신의 페이지에 저장 됩니다.
그리고 자신의 페이지로 이동한 뒤 추천 받기 (단축키 R) 를 누르시면 자신이 점수 메긴것들로 이웃 (이웃보기 단축키 B) 을 자동으로 찾아주고 그 이웃들로부터 추천을 받을 수 있습니다.
Come here ([Music/Break]--Pop of kipid's Recoeve.net) and just drag stars/points.
Based on your points on URIs (musics), you will be connected to your neighbors (See neighbors: shortkey 'B') of your kind. And you will get recoms (recommendations: shortkey 'R') from them, and also give recoms to them.
평가와 기록: 웹사이트에서 본 기사, 뉴스, 영상, 음악 등을 기록하고 평가하세요. 이 정보는 추천 알고리즘을 통해 사용자에게 맞춤형 추천을 제공하는 데 사용됩니다. 즉, 당신이 좋아하는 유형의 콘텐츠를 더 많이 발견할 수 있습니다.
Evaluate and Rate Content: As you explore content on the platform, you can evaluate and rate it based on your preferences and interests. This could involve liking, rating, or commenting on articles, posts, or other types of content.
Connect with Like-Minded Users: The platform likely has features for connecting with other users who share your interests. You might follow or connect with these users to build your network.
Evaluate and Rate Content: As you explore content on the platform, you can evaluate and rate it based on your preferences and interests. This could involve liking, rating, or commenting on articles, posts, or other types of content.
Connect with Like-Minded Users: The platform likely has features for connecting with other users who share your interests. You might follow or connect with these users to build your network.
* For the usage examples, visit my page (예제를 보시려면 제 페이지를 방문해 주세요.)
- [Music/Break]--K-Pop of kipid's Recoeve.net (Multireco mode)
- [Music/Break]--Pop of kipid's Recoeve.net (Multireco mode)
- [Music/Break]--남규리 | Nam Gyuri (Actor of Korea) of kipid's Recoeve.net (Multireco mode)
- [Music/Break]--Pet of kipid's Recoeve.net (Multireco mode)
- [Physics/Math/Science]--Physics of kipid's Recoeve.net
- [음식/요리/건강]--건강 of kipid's Recoeve.net
Recoeve.net Manual collection | 사용방법 모음집: [Recoeve]--Manual/설명서 of kipid's Recoeve.net
- Creative Commons
- 저작자표시 - 적절한 출처와, 해당 라이센스 링크를 표시하고, 변경이 있는 경우 공지해야 합니다. 합리적인 방식으로 이렇게 하면 되지만, 이용 허락권자가 귀하에게 권리를 부여한다거나 귀하의 사용을 허가한다는 내용을 나타내서는 안 됩니다.
- 비영리 - 이 저작물은 영리 목적으로 이용할 수 없습니다.
- 변경금지 - 이 저작물을 리믹스, 변형하거나 2차적 저작물을 작성하였을 경우 그 결과물을 공유할 수 없습니다.
반응형