Skip to content

Commit 04a2d81

Browse files
lazy-dinosaurlazy-dinosaur
committed
update post
1 parent eba912d commit 04a2d81

12 files changed

+293
-10
lines changed

‎content/posts/자원/JavaScript/Javascript.md

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ tags:
44
- web
55
- javascript
66
createdAt: 2025-04-12 09:09:33
7-
modifiedAt: 2025-04-18 14:59:35
7+
modifiedAt: 2025-04-19 11:50:58
88
publish: 자원/JavaScript
99
related: ""
1010
series: ""
@@ -14,9 +14,15 @@ series: ""
1414

1515
웹사이트에서 [[HTML]]과 [[CSS]]가 각각 내용의 구조를 정하고 그 내용이 어떤 모습으로 표현되어야 하는지 브라우져에게 설명하는 언어라면 Javascript 는 웹사이트와 사용자가 상호작용을 할 수 있도록 하는 언어이다.
1616

17-
## 관련 정보
17+
## 관련 포스트
1818

1919
- [[변수의 선언,초기화,할당의 차이점은 무엇인가]]
20+
- [[var,let,const의 주요 차이점은 무엇인가]]
2021
- [[호이스팅(Hoisting)이란 무엇인가]]
2122
- [[데이터 타입과 불변성]]
2223
- [[null,undefined,undeclared 의 차이점은]]
24+
- [[`==` 과 `===` 의 차이]]
25+
- [[스코프(Scope)란 무엇인가]]
26+
- [[실행컨텍스트(Execution Context)]]
27+
- [[콜 스택(Call Stack)이란 무엇인가]]
28+
- [[클로저(Closure)란 무엇인가]]

‎content/posts/자원/JavaScript/스코프(Scope)란 무엇인가.md

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ tags:
33
- resource
44
- javascript
55
createdAt: 2025-04-18 21:55:13
6-
modifiedAt: 2025-04-18 22:35:57
6+
modifiedAt: 2025-04-19 09:24:31
77
publish: 자원/JavaScript
88
related: ""
99
series: ""
@@ -27,11 +27,33 @@ series: ""
2727

2828
**코드 블록(`{}`) 내에서 선언된 변수는 해당 블록 내에서만 유효**하다. `let`과 `const` 키워드로 서언된 변수가 이 스코프 규칙을 따른다. `if`문, `for`문, `while`문 등의 코드 블록이 해당된다.
2929

30+
### 전역 스코프의 장단점
31+
32+
전역 스코프에 변수나 함수를 선언하면 코드 어디서든 쉽게 접근할 수 있다는 장점이 있다. 애플리케이션 전체에서 공유되어야 하는 상태나 유틸리티 함수 등에 사용될 수 있다.
33+
34+
전역 스코프의 오염을 최소화하는 것이 좋은 프로그래밍 습관이다. 모듈 패턴, IIFE(즉시 실행 함수 표현식), ES6모듈 등을 사용하여 변수의 스코프를 제한하고, 필요한경우에만 최소한의 전역 변수를 사용하는 것이 바람직하다.
35+
36+
#### 장점
37+
38+
1. 접근성: 코드 어디서든 참조 가능하다.
39+
40+
2. 상태 유지: 애플리케이션 생명주기 동안 값이 유지될 수 있다.
41+
42+
#### 단점
43+
44+
1. 이름충돌(Namespace Pollution): 다른 스크립트나 라이브러리에서 동일한 이름의 전역 변수/함수를 사용하면 충돌이 발생하여 예기치 않은 결과를 초래할 수 있다. 특히 규모가 큰 프로젝트나 여러 개발자가 협업하는 경우 문제가 심각해질 수 있다.
45+
46+
2. 유지보수 어려움: 전역변수는 코드 어느 부분에서든 변경될 수 있어, 값의 변경을 추적하고 디버깅하기 어렵게 만든다. 이는 코드의 의존성을 높이고 예측가능성을 떨어뜨린다.
47+
48+
3. 메모리: 전역 변수는 애플리케이션이 종료될 때까지 메모리에 남아있어, 불필요한 메모리 소비를 유발할 수 있다.
49+
50+
4. 함묵적 의존성: 코드가 명시적인 전달 없이 전역 상태에 의존하게 되어 모듈성과 재사용성을 저해할 수 있다.
51+
3052
## 렉시컬 스코프(Lexical Scope)
3153

3254
렉시컬 스코프(Lexical Scope)는 프로그래밍 언어에서 **변수의 유효 범위를 결정하는 방식**으로, 코드가 작성된 구조에 따라 변수의 접근성이 결정된다.
3355

34-
렉시컬 스코프는 스코프 체인과 [[클로저(Closure)]]의 작동 방식을이해하는 데 있어 핵심적인 원리이다. 자바스크립트 엔진은 코드가 실행될 때가 아니라, 코드가 작성될 때(컴파일 또는 파싱 시점)변수와 함수가 어디에 위치하는지를 기준으로 스코프를 결정한다. 이것으 렉시컬 스코프(정적 스코프)이다. 따라서 함수가 호출되는 위치와 관계없이, 함수는 자신이 선언된 위치의 스코프와 그 상위 스코프들에 접근할 수 있다. 스코프 체인은 바로 이 렉시컬 구조를 따라 형성되며, 클로저는 함수가 자신의 렉시컬 환경(선언 시점의 스코프)을 기억하는 능력에서 비롯된다.
56+
렉시컬 스코프는 스코프 체인과 [[클로저(Closure)란 무엇인가]]의 작동 방식을이해하는 데 있어 핵심적인 원리이다. 자바스크립트 엔진은 코드가 실행될 때가 아니라, 코드가 작성될 때(컴파일 또는 파싱 시점)변수와 함수가 어디에 위치하는지를 기준으로 스코프를 결정한다. 이것으 렉시컬 스코프(정적 스코프)이다. 따라서 함수가 호출되는 위치와 관계없이, 함수는 자신이 선언된 위치의 스코프와 그 상위 스코프들에 접근할 수 있다. 스코프 체인은 바로 이 렉시컬 구조를 따라 형성되며, 클로저는 함수가 자신의 렉시컬 환경(선언 시점의 스코프)을 기억하는 능력에서 비롯된다.
3557

3658
만약 자바스크립트가 동적 스코프(함수가 호출된 위치에 따라 스코프가 결정되는 방식)을 사용했다면, 코드의 동작을 에측하기 훨씬 어려웠을 것이다. 렉시컬 스코프 덕분에 개발자는 코드를 읽는것 만으로도 변수의 유효 범위를 상대적으로 쉽게 파악할 수 있고, 이는 코드의 안정성과 예측 가능성을 높여준다.
3759

‎content/posts/자원/JavaScript/실행컨텍스트(Execution Context).md

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
---
2+
tags:
3+
- resource
4+
- javascript
5+
createdAt: 2025-04-19 10:37:27
6+
modifiedAt: 2025-04-19 13:12:42
7+
publish: 자원/JavaScript
8+
related: ""
9+
series: ""
10+
---
11+
12+
# 실행컨텍스트(Execution Context)
13+
14+
실행 컨텍스트는 **Javascript 코드가 실행되는 환경**에 대한 추상적인 개념이다. **코드가실행될 때마다 자바스크립트 엔진은 해당 코드의 실행 환경을 나타내는 실행 컨텍스트를 생성하고 관리**한다. 실행 컨텍스트는 **코드가 실행되는 데 필요한 모든 정보**(변수, 함수 선언, 스코프 체인, `this`값 등)을 담고있다.
15+
16+
실행 컨텍스트는 자바스크립트 엔진이 코드를 어떻게 해석하고 실행하는지 이해하는 데 핵심적인 개념이다. 스코프, 호이스팅, 클로저, `this` 바인딩 등 중요한 언어적 틍징드이 모두 실행 컨텍스트의 생서 및 관리 메커니즘과 관련되어 있다.
17+
18+
## 종류
19+
20+
1. 전역 실행 컨텍스트(Global Execution Context, GEC)
21+
22+
- 코드를 실행하면 가장 먼저 생성되는 컨텍스트
23+
- 브라우저에서는 `window`객체, Node.js에서는 `global`객체를 생성
24+
- 프로그램에 하나만 존재
25+
26+
2. 함수 실행 컨텍스트(Function Execution Context, FEC)
27+
- 함수가 호출될 때 생성
28+
- 각 함수는 자신만의 실행 컨텍스트를 가짐
29+
30+
- Eval 실행 컨텍스트(Eval Execution Context, EXC)
31+
- `eval()`함수 내에서 실행되는 코드를 위한 컨텍스트
32+
- 보안 문제로 잘 사용하지 않음
33+
34+
## 구성 요소 (논리적)
35+
36+
1. 변수 환경(Variable Environment)
37+
38+
- 변수 선언(`var`)과 함수 산언문이 저장됨
39+
- 호이스팅이 일어나는 공간
40+
41+
2. 렉시컬 환경(Lexical Environment)
42+
43+
- 변수 환경의 확장된 개념
44+
- `let`,`const`로 선언된 변수가 저장됨
45+
- 블록 스코프를 지원
46+
- 외부 환경에 대한 참조(Outer Environment Reference)를 포함
47+
변수 참조시 현제 환경에서 찾지 못하면[[스코프(Scope)란 무엇인가|스코프 체인]]이 발생함
48+
49+
3. `this`바인딩
50+
51+
- 현재 컨텍스트에서 `this`가 가리키는 대상
52+
53+
## 실행 컨텍스트의 생성 및 실행 과정
54+
55+
1. 생성 단계(Creation Phase)
56+
57+
- 변수와 함수 선언을 메모리에 저장(호이스팅)
58+
- `var`로 선언된 변수는 `undefined`로 초기화
59+
- `let`, `const`로 선언된 변수는 초기화되지 않고 TDZ(Temporal Dead Zone)에 들어감
60+
- `this` 바인딩이 결정됨
61+
62+
2. 실행 단계(Execution Phase)
63+
64+
- 코드를 한줄 씩 실행
65+
- 변수에 실제 값 할당
66+
- 함수 호출시 새로운 실행 컨텍스트 생성

‎content/posts/자원/JavaScript/콜 스택(Call Stack)이란 무엇인가.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
tags:
3+
- resource
4+
- javascript
5+
createdAt: 2025-04-19 11:15:16
6+
modifiedAt: 2025-04-19 13:12:49
7+
publish: 자원/JavaScript
8+
related: ""
9+
series: ""
10+
---
11+
12+
# 콜 스택(Call Stack)이란 무엇인가
13+
14+
콜 스택은 **함수 호출을 추적**하기 위해 자비스크립트 엔진이 사용하는 **LIFO(Last-in, First-out)** 구조의 메모리 영역이다. 코드가 실행되면서 함수가 호출되면, 해당 함수의 실행 컨텍스트가 생성되어 콜 스택의 맨 위에 쌓인다(push). 함수 실행이 완료되어 값을 반환하면, 해당 실행 컨텍스트는 콜 스택에서 제거된다(pop). 콜 스택의 가장 위에 있는 실행 컨텍스트가 현재 리행중인 컨텍스트이다.
15+
16+
콜 스택은 자바스크립트의 동기적인 코드 실행 순서를 관리한다. 하나의 작업이 완료되어야 다음 작업이 스택에서 실행될 수있다. 이는 이벤트 루프와 비동기 처리 방식을 이해하는 데 필수적인 배경지식 이다.
17+
18+
## 동작 예시
19+
20+
1. 전역 코드가 실행되면 전역 실행 컨텍스트가 스택에 추가된다.
21+
2. 함수 `A`가 호출되면 `A`의 함수 실행컨텍스트가 스택 위에 추가된다
22+
3. 함수 `A` 내부에서 함수 `B`가 호출되면 `B`의 함수 실행컨텍스트가 스택 위에 추가된다.
23+
4. 함수 `B`가 실행을마치고 반환하면 `B`의 함수 실행 컨텍스트가 스택에서 제거된다.
24+
5. 함수 `A`가 실행을 마치고 반환하면 `A`의 함수 실행 컨텍스트가 제거된다
25+
6. 모든 코드가 실행되면 전역 실행 컨텍스트가 스택에서 제거된다.
26+
27+
## Stack Oeverflow
28+
29+
함수가 자기 자신을 계속해서 호출하는 재귀 호출 등에서 종료 조건이 없거나 잘못된 경우, 콜 스택에 실행 컨텍스트가 무한히 쌓이게 되어 스택 용량을 초과하면 "Stack Overflow"에러가 발생한다.

‎content/posts/자원/JavaScript/클로저(Closure)란 무엇인가.md

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
---
2+
tags:
3+
- resource
4+
- javascript
5+
createdAt: 2025-04-18 22:36:08
6+
modifiedAt: 2025-04-19 13:13:00
7+
publish: 자원/JavaScript
8+
related: ""
9+
series: ""
10+
---
11+
12+
# 클로저(Closure)란 무엇인가
13+
14+
클로저는 함수와 그 함수가 선언된 렉시컬 환경(Lexical Environment)의 조합이다. 간단하게 함수가 자신이 생성될 때의 환경(변수)을 기억하는 현상을 말한다.
15+
16+
클로저는 자바스크립트의 핵심 개념 중 하나로, 함수형 프로그래밍 패러다임과 다양한 디자인 패턴을 구현하는 데 필수적이다.
17+
18+
클로저는 단순히 내부 함수가 외부 변수에 접근하는 현상을 넘어, 자바스크립트의 렉시컬 스코핑 규칙과 실행 컨텍스트가 외부 환경 참조를 유지하는 방식의 자연스러운 결과이다. 외부 함수가 실행될때 생성된 실행 컨텍스트의 렉시컬 환경은, 그 내부에서 정의된 함수가 외부로 반환되거나 다른 곳에서 참조될 경우, 해당 내부 함수에 의해 계속 참조된다.
19+
20+
이 견결고리 때문에 외부 함수의 실행이 끝나도 관련 환경이 메모리에서 사라지지 않는 것이다. 모듈 패턴은 이러한 클로저의 특성을 활용한 대표적인 예시이다. IIFE나 일반 함수를 사용하여 '비공개' 스코프(외부 함수의 렉시컬 환경)을 만들고, 이 스코프에 접근할 수 있는 '공개'메서드(내부 함수)들을 객체 형태로 반환함으로써 데이터 캡슐화를 구현한다. 따라서 클로저를 실행 컨텍스트와 렉시컬 환경의 관점에서 이해하면, 그 작동 원리와 모듈 패턴과 같은 실제 활영 사례를 더 근본적으로 파악할 수 있다.
21+
22+
> [!tip]
23+
>
24+
> 클로저가 발생하는 이유는 객체인 함수를 변수에 할당하면서 가능해 진다. 즉 객체로서 변수에 할당된 함수를 지속적으로 참조할 수 있는 것이다. 변수에 담지 않고 그저 함수를 사용하면 함수가 실행되고 사라지면 실행 컨텍스트도 같이 정리 되어야 하지만 변수는 남아 있기 때문에 해당 한수가 선언된 변수를 담고 있는 컨텍스트가 정리되기 전까지는 유지되는 것이다. 렉시컬 스코프 때문에 가능한 일
25+
26+
## 핵심 개념
27+
28+
1. 렉시컬 스코핑(Lexical Scoping): 함수가 선언된 위치에 따라 상위 스코프가 결정된다.
29+
2. 변수의 생존: 함수가 선언된 함수의 변수들이 함수가 호출될 때까지 메모리에 유지된다.
30+
3. 캡슐화(Encapsulation): 데이터와 그 데이터를 조작하는 마수를 하나의 단위로 묶는다.
31+
32+
> [!example]
33+
>
34+
> ```js
35+
> function createCounter() {
36+
> let count = 0; // 외부에서 직접 접근할 수 없는 변수
37+
> return function () {
38+
> count += 1; // 외부 함수의 변수를 참조
39+
> return count;
40+
> };
41+
> }
42+
> const counter = createCounter();
43+
>
44+
> console.log(counter()); //1
45+
> console.log(counter()); //2
46+
> console.log(counter()); //3
47+
> ```
48+
>
49+
> 이 예제이서 `createCounter`는 내부 함수를 반환한다. 내부 함수는 `count` 변수를 참조하고 있으며, 원래라면 `createCounter`함수가 실행을 마치면 `count`변수는 사라져야 하지만, 클로저 덕분에 내부 함수가 `count`변수를 계속 기억하고 접근할 수 있다.
50+
51+
## 활용 사례
52+
53+
1. 데이터 은닉과 캡슐화
54+
외부에서 직접 접근할 수 없는 비공개(private) 변수를 만들고, 오직 클로저를 통해 노출된 함수(메서드)를 통해서만 이 변수에 접근하거나 조작하도록 할 수 있다. 이는 객체 지향 프로그래밍의 캡슐화와 유사한 효과를 제공한다.
55+
56+
```js
57+
function createPerson(name) {
58+
let _name = name; // 비공개 변수
59+
return {
60+
getName: function () {
61+
// 공개 메서드 (클로져)
62+
return _name;
63+
},
64+
setName: function (newName) {
65+
// 공개 메서드 (클로져)
66+
_name = newName;
67+
},
68+
};
69+
}
70+
const person = creaatePerson("Alice");
71+
console.log(person.getName()); // "Alice"
72+
console.log(person._name); //undefined (직접 접근 불가)
73+
person.setName("Bob");
74+
console.log(person.getName()); // "Bob"
75+
```
76+
77+
2. 상태 유지
78+
함수 호출이 끝나도 이전 상태를 기억하고 유지해야 할 때 사용된다. 예를 들어, 호출 될 때마다 1씩 증가하는 카운터를 만들 수 있다.
79+
80+
```js
81+
function makeCounter() {
82+
let count = 0; // 외부 함수의 변수 (자유 변수)
83+
// 내부 함수 (클로저)
84+
return function () {
85+
count++; // 외부 함수의 count 변수에 접근 및 수정
86+
return count;
87+
};
88+
}
89+
const counter1 = makeCounter(); // counter1은 내부 함수와 count=0 환경을 기억
90+
console.log(counter1()); // 1
91+
console.log(counter1()); // 2
92+
const counter2 = makeCounter(); // counter2은 새로운 내부 함수와 count=0 환경을 기억
93+
console.log(counter2()); // 1
94+
console.log(counter1()); // 3 (counter1의 상태는 유지됨)
95+
```
96+
97+
3. 함수 팩토리
98+
특정 설정을 가진 함수를 동적으로 생성할 때 사용된다. 외부 함수에서 설정값을 받고, 이를 기억하는 내부 함수를 반환하는 방식이다.
99+
100+
4. 비동기 처리에서의 상태 관리
101+
콜백 함수나 프로미스 핸들러 등 비동기 작업이 완료된 후 특정 컨텍스트나 상태를 참조해야할 때 클로저가 활용된다.
102+
103+
5. 모듈 패턴 구현
104+
전역 스코프를 오염시키지 않고 독립적인 모듈을 만드는 데 클로저가 핵심적인 역할을 한다.
105+
106+
## 클로저의 주의점
107+
108+
1. 메모리 관리
109+
클로저는 참조하는 변수를 메모리에 계속 유지하므로, 불필요한 클로저는 메모리 누수의 원인이 될 수 있다. 더 이상 필요 없는 클로저나 클로저가 참조하는 변수에 대한 참조를 명시적으로 끊어줘야 한다.(변수에 `null` 할당)
110+
111+
2. 루프 내에서의 클로저
112+
루프 안에서 비동기 함수를 사용할 때 예상치 못한 결과가 나올 수 있다. 이벤트 리스너 등은 사용이 끝나면 반드시 `removeEventListener`등을 사용하여 제거해야 한다.

‎public/link-map.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@
88
"3.resource/Javascript/null,undefined,undeclared 의 차이점은.md": "자원/JavaScript/null,undefined,undeclared 의 차이점은",
99
"3.resource/Javascript/`==` 과 `===` 의 차이.md": "자원/JavaScript/`==` 과 `===` 의 차이",
1010
"3.resource/Javascript/스코프(Scope)란 무엇인가.md": "자원/JavaScript/스코프(Scope)란 무엇인가",
11+
"3.resource/Javascript/실행컨텍스트(Execution Context).md": "자원/JavaScript/실행컨텍스트(Execution Context)",
12+
"3.resource/Javascript/콜 스택(Call Stack)이란 무엇인가.md": "자원/JavaScript/콜 스택(Call Stack)이란 무엇인가",
13+
"3.resource/Javascript/클로저(Closure)란 무엇인가.md": "자원/JavaScript/클로저(Closure)란 무엇인가",
1114
"3.resource/Web/동적 사이트 vs 정적사이트.md": "자원/웹개발/동적 사이트 vs 정적사이트",
1215
"3.resource/Web/HTTP(Hypertext Transfer Protocol).md": "자원/웹개발/HTTP(Hypertext Transfer Protocol)",
1316
"3.resource/Web/웹사이트는 어떻게 보여지는가-브라우저의 렌더링.md": "자원/웹개발/웹사이트는 어떻게 보여지는가-브라우저의 렌더링",

‎public/meta-data.json

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
"tags": ["resource", "web", "javascript"],
4141
"series": "",
4242
"createdAt": "2025-04-12 09:09:33",
43-
"modifiedAt": "2025-04-18 14:59:35",
43+
"modifiedAt": "2025-04-19 11:50:58",
4444
"publish": "자원/JavaScript"
4545
},
4646
{
@@ -95,7 +95,40 @@
9595
"tags": ["resource", "javascript"],
9696
"series": "",
9797
"createdAt": "2025-04-18 21:55:13",
98-
"modifiedAt": "2025-04-18 22:35:57",
98+
"modifiedAt": "2025-04-19 09:24:31",
99+
"publish": "자원/JavaScript"
100+
},
101+
{
102+
"urlPath": "자원/JavaScript/실행컨텍스트(Execution Context)",
103+
"title": "실행컨텍스트(Execution Context)",
104+
"summary": "",
105+
"image": "",
106+
"tags": ["resource", "javascript"],
107+
"series": "",
108+
"createdAt": "2025-04-19 10:37:27",
109+
"modifiedAt": "2025-04-19 13:12:42",
110+
"publish": "자원/JavaScript"
111+
},
112+
{
113+
"urlPath": "자원/JavaScript/콜 스택(Call Stack)이란 무엇인가",
114+
"title": "콜 스택(Call Stack)이란 무엇인가",
115+
"summary": "",
116+
"image": "",
117+
"tags": ["resource", "javascript"],
118+
"series": "",
119+
"createdAt": "2025-04-19 11:15:16",
120+
"modifiedAt": "2025-04-19 13:12:49",
121+
"publish": "자원/JavaScript"
122+
},
123+
{
124+
"urlPath": "자원/JavaScript/클로저(Closure)란 무엇인가",
125+
"title": "클로저(Closure)란 무엇인가",
126+
"summary": "",
127+
"image": "",
128+
"tags": ["resource", "javascript"],
129+
"series": "",
130+
"createdAt": "2025-04-18 22:36:08",
131+
"modifiedAt": "2025-04-19 13:13:00",
99132
"publish": "자원/JavaScript"
100133
},
101134
{

0 commit comments

Comments
 (0)