Skip to content

Commit eba912d

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

10 files changed

+236
-0
lines changed

‎content/posts/자원/JavaScript/`==` 과 `===` 의 차이.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
tags:
3+
- resource
4+
- javascript
5+
createdAt: 2025-04-18 21:21:24
6+
modifiedAt: 2025-04-18 21:53:33
7+
publish: 자원/JavaScript
8+
related: ""
9+
series: ""
10+
---
11+
12+
# `==` 과 `===` 의 차이
13+
14+
두 연산자 모두 값을 비교하지만, 비교 방식에 차이가 있다.
15+
16+
예측 불가능한 타입 벼너환으로 인한 버그를 피하기 위해, 거의 항상 `===` (엄격 동등성 비교)를 사용하는 것이 좋다. `==`는 타입 변환 규칙을 정확히 이해하고 특별한 의도가 있을때만 제한적으로 사용해야 한다.
17+
18+
동등성 비교는 조건문 등에서 매우 빈번하게 사용하게 되므로, 두 연산자의 차이를 명확히 이해하고 `===`를 일관되게 사용하는 것이 코드의 안정성과 예측 가능서을 높이는 데 중요하다.
19+
20+
- `==` (추상 동등성 비교,Abstract Equality Comparison)
21+
22+
비교화기 전에 피연산자들의 타입을 강제로 변환(type coercion)하여 같은 타입으로 만든 후 값을 비교한다. 이 과정에서 예상치 못하 결과가 나올수 있다. 예를 들어, `0 == false`는 `true` 이고 `"" == false`도 `true`이며, `null == undefined`도 `true`이다.
23+
24+
- `===` (엄겨거 동등성 비교, Strict Equality Comparison)
25+
26+
피연산자드의 타입 변환 없이 값과 타입을 모두 비교한다. 타입ㅇ이 다르면 즉시 `false`를 반환한다. 예를 들어, `0 == false`는 `false`이고, `null === undefined`도 `false`이다.

‎content/posts/자원/JavaScript/null,undefined,undeclared 의 차이점은.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
tags:
3+
- resource
4+
- javascript
5+
createdAt: 2025-04-18 14:59:03
6+
modifiedAt: 2025-04-18 15:14:42
7+
publish: 자원/JavaScript
8+
related: ""
9+
series: ""
10+
---
11+
12+
# null,undefined,undeclared 의 차이점은
13+
14+
이 세가지 상태 전부 변수가 값을가지지 않거나 존재하지 않는 상황을 나타내지만, 의미와 발생 원인이 다르다.
15+
16+
이 세가지 상태를 혼동하면 코드에서 예상치 못한 오류가 발생할 수 있다. 특히 API 응답이나 함수의 반환 값을 다룰 때 `null`과 `undefined`를 변확히 구분하고 처리하는 것이 중요하다.
17+
18+
- `undefined`
19+
변수가 선언되었지만 아직 값이 할당되지 않은 상태를 의미한다. 또는 함수가 명시적으로 값을 반환하지 않을 때 반환되는 값이기도 하다. `typeof undefined`는 `"undefined`이다.
20+
21+
- `null`
22+
변수에 값이 없다는 것을 의도엊긍로 명시할 때 사용된다. 즉, 개발자가가 '빈 값'또는 '값이 없음'을 나타내기 위해 할당하는 값이다. `typeof null`은 역사적인 이유로 `"object"`를 반환하지만, 실제로는 원시 타입 중 하나이다.
23+
24+
- `undeclared`(선언되지 않음)
25+
변수 자체가 아예 선언되지 않은 상태이다. 선언되지 않은 변수에 접근하려고 하면 `ReferenceError`가 발생한다.(단`typeof` 연사자는 선언되지 않은 변수에 사용해도 에러를 발생시키지 않고 `"undefined"`를 반환한다.) 비엄격 모두(non-strict mode)에서 선언 없이 값을 할당하면 예기치 않게 전역 변수가 생성될수 있으므로 피해야 한다.
26+
27+
## 확인 방법
28+
29+
- `undefined` 확인: `myVar === undefined` 또는 `typeof myVar === 'undefined'`
30+
31+
- `null` 확인: `myVar === null`
32+
33+
- `undeclared` 확인: `try...catch` 블록으로 감싸서 `ReferenceError`를 확인하건, `typeof` 사용 (단, `typeof`는 `undefined`와 구분 불가)

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
tags:
3+
- resource
4+
- javascript
5+
createdAt: 2025-04-18 21:55:13
6+
modifiedAt: 2025-04-18 22:35:57
7+
publish: 자원/JavaScript
8+
related: ""
9+
series: ""
10+
---
11+
12+
# 스코프(Scope)란 무엇인가
13+
14+
스코프는 **변수, 함수, 객체 등 식별자(identifier)에 접근하거나 참조할 수 있는 유효 범위**를 의미한다. 즉, 코드가 특정 변수에 접근할 수 있는지 여부를 결정하는 규칙이다. 자바스크립트의 스코프는 주로 **렉시컬 스코프(Lexical Scope)**를 따르는데, 이는 함수가 어디서 선언되었는지에 따라 스코프가 결정된다는 의미이다. 주요 스코프 종류는 다음과 같다. 스코프는 변수의 생명주기와 접근성으 관리하며, 이름추돌을 방지하고 코드의 모듈서을 높이는 데 중요한 역할을 한다.
15+
16+
## 스코프의 종류
17+
18+
1. 전역 스코프(Global Scope)
19+
20+
코드의 가장 바깥 영역이다. 여기서 선언된 변수나 함수는 **코드 어디에서든 접근이 가능**하다. 브라우저 환경에서는 `window`객체가 전역 객체 역할을 한다.
21+
22+
2. 함수 스코프(Function Scope)
23+
24+
**함수 내부에서 선언된 변수는 해당 함수 내에서만 유효**하다. `var`키웓로 선언된 변수가 이 스코프 규칙을 따른다.
25+
26+
3. 블록스코프(Bllank Scope)
27+
28+
**코드 블록(`{}`) 내에서 선언된 변수는 해당 블록 내에서만 유효**하다. `let`과 `const` 키워드로 서언된 변수가 이 스코프 규칙을 따른다. `if`문, `for`문, `while`문 등의 코드 블록이 해당된다.
29+
30+
## 렉시컬 스코프(Lexical Scope)
31+
32+
렉시컬 스코프(Lexical Scope)는 프로그래밍 언어에서 **변수의 유효 범위를 결정하는 방식**으로, 코드가 작성된 구조에 따라 변수의 접근성이 결정된다.
33+
34+
렉시컬 스코프는 스코프 체인과 [[클로저(Closure)]]의 작동 방식을이해하는 데 있어 핵심적인 원리이다. 자바스크립트 엔진은 코드가 실행될 때가 아니라, 코드가 작성될 때(컴파일 또는 파싱 시점)변수와 함수가 어디에 위치하는지를 기준으로 스코프를 결정한다. 이것으 렉시컬 스코프(정적 스코프)이다. 따라서 함수가 호출되는 위치와 관계없이, 함수는 자신이 선언된 위치의 스코프와 그 상위 스코프들에 접근할 수 있다. 스코프 체인은 바로 이 렉시컬 구조를 따라 형성되며, 클로저는 함수가 자신의 렉시컬 환경(선언 시점의 스코프)을 기억하는 능력에서 비롯된다.
35+
36+
만약 자바스크립트가 동적 스코프(함수가 호출된 위치에 따라 스코프가 결정되는 방식)을 사용했다면, 코드의 동작을 에측하기 훨씬 어려웠을 것이다. 렉시컬 스코프 덕분에 개발자는 코드를 읽는것 만으로도 변수의 유효 범위를 상대적으로 쉽게 파악할 수 있고, 이는 코드의 안정성과 예측 가능성을 높여준다.
37+
38+
### 렉시컬 스코프의 주요 특징
39+
40+
1. **코드가 작성된 위치에 따라** 변수의 접근 범위가 정적으로 결정된다.
41+
2. **내부 함수**는 자신이 정의된 **외부 함수의 변수에 접근할 수 있다.**
42+
3. 반대로 **외부 함수**는 **내부 함수의 변수에 접근할 수 없다.**
43+
44+
### 스코프 체인(Scope Chain)
45+
46+
스코프 체인은 **자바스크립트 엔진이 식별자(변수, 함수 등)을 찾는 메커니즘**이다. 특정 스코프 내에서 변수를 참조할 때, 엔진은 먼저 현재 스코프에서 해당 변수를 찾는다. 만약 찾지 못하면, **상위 스코프(자신을 포하하는 외부 스코프)**로 이동하여 다시 찾는다. 이 과정을 젼역 스코프에 도달할 때까지 반복한다. 이처럼 현재 스코프에서 시작하여 **상위 스코프로 연속적으로 연결된 것을 스코프 체인이라고 한다.** 이 체인은 코드가 작성될 때의 렉시컬 구조(어디에 선언되었는지)에 의해 결정된다.
47+
48+
스코프 체인의 내부 함수가 외부 함수의 변수에 접근할 수 있는 원리를 설명하며, 클로저(Closure) 개념의 기반이 된다.

‎content/posts/자원/웹개발/라이브러리vs프레임워크.md

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
tags:
3+
- web
4+
- resource
5+
createdAt: 2025-04-18 20:56:02
6+
modifiedAt: 2025-04-18 21:53:50
7+
publish: 자원/웹개발
8+
related: ""
9+
series: ""
10+
---
11+
12+
# 라이브러리vs프레임워크
13+
14+
## 라이브러리
15+
16+
라이브러리는 **도구 상자**와 같다.
17+
18+
- 개념: 특정 기능을 수행하는 코드 모음
19+
- 사용 방식: 필요할 때만 꺼내서 사용함
20+
- 주도권: 개발자가 주도권을 가짐(내가 필요할 때 사용)
21+
22+
## 프레임워크
23+
24+
프레임 워크는 **집의 기초 구조**와 같다.
25+
26+
- 개념: 애플리케이션 개발을 위한 뼈대, 구조
27+
- 사용 방식: 프레임워크가 정한 틀 안에서 개발
28+
- 주도권: 프레임워크가 주도권을 가짐 (프레임워크가 내 코드를 호출)
29+
30+
## 주요 차이점
31+
32+
1. 제어 흐름(Control Flow)
33+
34+
- 라이브러리: **개발자가 코드의 흐름을 제어**한다. 필요할 때 라이브러리를 호출하여 사용한다.
35+
- 프레임워크: **프레임워크가 코드의 흐름을 제어**한다. 프레임워크가 정한 규칙과 구조에 맞게 개발자가 코드를 작성한다.
36+
37+
2. 제어의 역전(Inversion of Control)
38+
39+
- 라이브러리: **제어의 역전이 없다.** 개발자가 라이브러리를 호출한다.
40+
- 프레임워크: **제어의 역전이 있다.** 프레임워크가 개발자의 코드를 호출한다.
41+
42+
3. 유연성과 자유도
43+
44+
- 라이브러리: **높은 유연성과 자유도**를 제공한다. 다양한 라이브러리를 조합하여 사용할 수 있다.
45+
- 프레임워크: **제한된 유연성을 가지며, 프레임워크의 규칙을 따라야 한다.**
46+
47+
4. 구조와 아키텍처
48+
49+
- 라이브러리: 특정 기능을 제공하는 코드 모음으로, 전체 애플리케이션 구조에 영향을 미치지 않는다.
50+
- 프레임워크: 애플리케이션의 전체 구조와 아키텍처를 제공한다.
51+
52+
5. 사용 목적
53+
54+
- 라이브러리: 특정 문제 해결이나 기능 구현에 중점을 둔다.
55+
- 프레임워크: **표준화된 개발 환경과 패턴을 제공**한다.
56+
57+
6. 학습 곡선
58+
59+
- 라이브러리: 상대적으로 **낮은 학습곡선**을 가진다. 필요한 부분만 배워서 사용할 수 있다.
60+
- 프레임워크: **높은 학습 곡선**을 가진다. 프레임워크의 철학과 구조를 이해해야 한다.
61+
62+
7. 통합성
63+
64+
- 라이브러리: 독립적으로 작동하며, 필요에 따라 다른 라이브러리와 함께 사용할 수 있습니다.
65+
- 프레임워크: 여러 라이브러리와 도구들을 포함하고 있으며, 일관된 환경을 제공한다.

‎public/link-map.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,16 @@
55
"3.resource/Javascript/Javascript.md": "자원/JavaScript/Javascript",
66
"3.resource/Javascript/var,let,const의 주요 차이점은 무엇인가.md": "자원/JavaScript/var,let,const의 주요 차이점은 무엇인가",
77
"3.resource/Javascript/데이터 타입과 불변성.md": "자원/JavaScript/데이터 타입과 불변성",
8+
"3.resource/Javascript/null,undefined,undeclared 의 차이점은.md": "자원/JavaScript/null,undefined,undeclared 의 차이점은",
9+
"3.resource/Javascript/`==` 과 `===` 의 차이.md": "자원/JavaScript/`==` 과 `===` 의 차이",
10+
"3.resource/Javascript/스코프(Scope)란 무엇인가.md": "자원/JavaScript/스코프(Scope)란 무엇인가",
811
"3.resource/Web/동적 사이트 vs 정적사이트.md": "자원/웹개발/동적 사이트 vs 정적사이트",
912
"3.resource/Web/HTTP(Hypertext Transfer Protocol).md": "자원/웹개발/HTTP(Hypertext Transfer Protocol)",
1013
"3.resource/Web/웹사이트는 어떻게 보여지는가-브라우저의 렌더링.md": "자원/웹개발/웹사이트는 어떻게 보여지는가-브라우저의 렌더링",
1114
"3.resource/Web/웹사이트는 어떻게 구성되어있나-HTML과 CSS와 Javascript의 이해.md": "자원/웹개발/웹사이트는 어떻게 구성되어있나-HTML과 CSS와 Javascript의 이해",
1215
"3.resource/Web/웹사이트에 들어갈때에는 어떤 일이 생기는가-웹사이트접속의 과정.md": "자원/웹개발/웹사이트에 들어갈때에는 어떤 일이 생기는가-웹사이트접속의 과정",
1316
"3.resource/Web/Javascript가 웹사이트를 어떻게 조작할 수 있는가-DOM과 CSSOM의 개념.md": "자원/웹개발/Javascript가 웹사이트를 어떻게 조작할 수 있는가-DOM과 CSSOM의 개념",
17+
"3.resource/Web/라이브러리vs프레임워크.md": "자원/웹개발/라이브러리vs프레임워크",
1418
"3.resource/크롬 확장프로그램/크롬 확장프로그램에 케시메모리 추가하기.md": "자원/크롬 확장프로그램/크롬 확장프로그램에 케시메모리 추가하기",
1519
"3.resource/Web/HTML/DOM(Document Object Model).md": "자원/웹개발/DOM(Document Object Model)",
1620
"3.resource/Web/CSS/CSSOM(CSS Object Model).md": "자원/웹개발/CSSOM(CSS Object Model)",

‎public/meta-data.json

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,39 @@
6565
"modifiedAt": "2025-04-18 15:00:11",
6666
"publish": "자원/JavaScript"
6767
},
68+
{
69+
"urlPath": "자원/JavaScript/null,undefined,undeclared 의 차이점은",
70+
"title": "null,undefined,undeclared 의 차이점은",
71+
"summary": "",
72+
"image": "",
73+
"tags": ["resource", "javascript"],
74+
"series": "",
75+
"createdAt": "2025-04-18 14:59:03",
76+
"modifiedAt": "2025-04-18 15:14:42",
77+
"publish": "자원/JavaScript"
78+
},
79+
{
80+
"urlPath": "자원/JavaScript/`==` 과 `===` 의 차이",
81+
"title": "`==` 과 `===` 의 차이",
82+
"summary": "",
83+
"image": "",
84+
"tags": ["resource", "javascript"],
85+
"series": "",
86+
"createdAt": "2025-04-18 21:21:24",
87+
"modifiedAt": "2025-04-18 21:53:33",
88+
"publish": "자원/JavaScript"
89+
},
90+
{
91+
"urlPath": "자원/JavaScript/스코프(Scope)란 무엇인가",
92+
"title": "스코프(Scope)란 무엇인가",
93+
"summary": "",
94+
"image": "",
95+
"tags": ["resource", "javascript"],
96+
"series": "",
97+
"createdAt": "2025-04-18 21:55:13",
98+
"modifiedAt": "2025-04-18 22:35:57",
99+
"publish": "자원/JavaScript"
100+
},
68101
{
69102
"urlPath": "자원/웹개발/동적 사이트 vs 정적사이트",
70103
"title": "동적 사이트 vs 정적사이트",
@@ -131,6 +164,17 @@
131164
"modifiedAt": "2025-04-16 19:08:41",
132165
"publish": "자원/웹개발"
133166
},
167+
{
168+
"urlPath": "자원/웹개발/라이브러리vs프레임워크",
169+
"title": "라이브러리vs프레임워크",
170+
"summary": "",
171+
"image": "",
172+
"tags": ["web", "resource"],
173+
"series": "",
174+
"createdAt": "2025-04-18 20:56:02",
175+
"modifiedAt": "2025-04-18 21:53:50",
176+
"publish": "자원/웹개발"
177+
},
134178
{
135179
"urlPath": "자원/크롬 확장프로그램/크롬 확장프로그램에 케시메모리 추가하기",
136180
"title": "크롬 확장프로그램에 케시메모리 추가하기",

‎public/post-contents/자원/JavaScript/`==` 과 `===` 의 차이.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"content": "\n# `==` 과 `===` 의 차이\n\n두 연산자 모두 값을 비교하지만, 비교 방식에 차이가 있다.\n\n예측 불가능한 타입 벼너환으로 인한 버그를 피하기 위해, 거의 항상 `===` (엄격 동등성 비교)를 사용하는 것이 좋다. `==`는 타입 변환 규칙을 정확히 이해하고 특별한 의도가 있을때만 제한적으로 사용해야 한다.\n\n동등성 비교는 조건문 등에서 매우 빈번하게 사용하게 되므로, 두 연산자의 차이를 명확히 이해하고 `===`를 일관되게 사용하는 것이 코드의 안정성과 예측 가능서을 높이는 데 중요하다.\n\n- `==` (추상 동등성 비교,Abstract Equality Comparison)\n\n 비교화기 전에 피연산자들의 타입을 강제로 변환(type coercion)하여 같은 타입으로 만든 후 값을 비교한다. 이 과정에서 예상치 못하 결과가 나올수 있다. 예를 들어, `0 == false`는 `true` 이고 `\"\" == false`도 `true`이며, `null == undefined`도 `true`이다.\n\n- `===` (엄겨거 동등성 비교, Strict Equality Comparison)\n\n 피연산자드의 타입 변환 없이 값과 타입을 모두 비교한다. 타입ㅇ이 다르면 즉시 `false`를 반환한다. 예를 들어, `0 == false`는 `false`이고, `null === undefined`도 `false`이다.\n",
3+
"plainContent": "두 연산자 모두 값을 비교하지만, 비교 방식에 차이가 있다.\n예측 불가능한 타입 벼너환으로 인한 버그를 피하기 위해, 거의 항상 === (엄격 동등성 비교)를 사용하는 것이 좋다. ==는 타입 변환 규칙을 정확히 이해하고 특별한 의도가 있을때만 제한적으로 사용해야 한다.\n동등성 비교는 조건문 등에서 매우 빈번하게 사용하게 되므로, 두 연산자의 차이를 명확히 이해하고 ===를 일관되게 사용하는 것이 코드의 안정성과 예측 가능서을 높이는 데 중요하다.\n== (추상 동등성 비교,Abstract Equality Comparison)\n비교화기 전에 피연산자들의 타입을 강제로 변환(type coercion)하여 같은 타입으로 만든 후 값을 비교한다. 이 과정에서 예상치 못하 결과가 나올수 있다. 예를 들어, 0 == false는 true 이고 \"\" == false도 true이며, null == undefined도 true이다.\n=== (엄겨거 동등성 비교, Strict Equality Comparison)\n피연산자드의 타입 변환 없이 값과 타입을 모두 비교한다. 타입ㅇ이 다르면 즉시 false를 반환한다. 예를 들어, 0 == false는 false이고, null === undefined도 false이다."
4+
}

0 commit comments

Comments
 (0)