Skip to content

Commit f5ea9a3

Browse files
codeyomacodeyoma
committed
Quartz sync: Jun 23, 2025, 10:01 PM
1 parent 0c910e1 commit f5ea9a3

25 files changed

+349
-34
lines changed

‎content/Computer Science/5 Software Development/Programming Language/JavaScript/Execution Context.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ description:
33
aliases:
44
- 실행 컨텍스트
55
created: 2025-06-09
6-
modified: 2025-06-09
6+
modified: 2025-06-23
77
---
88

99
- Execution Context
@@ -43,7 +43,7 @@ modified: 2025-06-09
4343
- 전역 환경, 부모 스코프의 lexical environment 를 참조
4444
- [[Closures]]의 원리
4545
- `This Binding`
46-
- `this`가 참조하는 값
46+
- 이때 [[this]]가 참조하는 값이 결정됨
4747
- 종류
4848
- Global Context
4949
- 전체 코드 실행 시 생성

‎content/Computer Science/5 Software Development/Programming Language/JavaScript/Generator.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
description:
3+
aliases:
4+
created: 2025-06-23
5+
modified: 2025-06-23
6+
---
7+
8+
- cpp에서의 코루틴
9+
- ```js
10+
function* myGenerator() {
11+
  yield 1;
12+
  yield 2;
13+
  yield 3;
14+
}
15+
16+
const gen = myGenerator();
17+
18+
console.log(gen.next()); // { value: 1, done: false }
19+
console.log(gen.next()); // { value: 2, done: false }
20+
console.log(gen.next()); // { value: 3, done: false }
21+
console.log(gen.next()); // { value: undefined, done: true }

‎content/Computer Science/5 Software Development/Programming Language/JavaScript/Module.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,6 @@ modified: 2025-06-09
1515
//---
1616
1717
const {log, print} = require('./source-location')
18+
- 동적 임포트
19+
- 트리 쉐이킹에 어려움
1820
- `import`

‎content/Computer Science/5 Software Development/Programming Language/JavaScript/Prototype OOP.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
description:
3+
aliases:
4+
created: 2025-06-23
5+
modified: 2025-06-23
6+
---
7+
8+
- class 방법이 아닌 prototype 기반 상속 매커니즘
9+
- class
10+
- 추상, 구체
11+
- 동일 류에 대해서만 상속가능
12+
- interface -> class -> instance
13+
- 설계 명확
14+
- prototype
15+
- 실행 컨텍스트에 따라 의미가 달라짐
16+
- 의미 유사성기반 상속
17+
- 다른 프로토타입을 상속 가능 (의미만 통하면)
18+
- 프로토 타입 체이닝
19+
- 런타임에 동적 프로토타입 체인 변경 가능
20+
- 동적 상속
21+
- 구조보다 행동 중심
22+
- `console.dir()`
23+
- js에서 모든 객체는 `Object`를 상속한다
24+
- 프로토타입 체인
25+
- js 엔진이 체인을 자동으로 관리
26+
- 상위 체인으로 검색하며 속성 확인
27+
- ```js
28+
const fruits = ['apple', 'banana'];
29+
console.dir(fruits)
30+
31+
// 프로토타입 체인
32+
fruits.forEach === fruits.__proto__.forEach // true
33+
- 프로토타입 메서드와 정적 메서드
34+
- 특정 메소드는 프로토타입에 없고(프로토타입 메소드), 기본 제공되는 전역 객체에 정적 메소드로 포함되는 경우도 있음
35+
- `Object.keys()`
36+
- ...

‎content/Computer Science/5 Software Development/Programming Language/JavaScript/This.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
description:
3+
aliases:
4+
created: 2025-06-23
5+
modified: 2025-06-23
6+
---
7+
- 실행 컨텍스트에 따라 달라지는 this
8+
- 암시적 바인딩
9+
- 전역 공간에서 this는 전역 객체를 참조
10+
- 함수가 함수로서 호출될 경우, this는 전역 객체를 참조
11+
- 함수가 메서드로 호출될 경우, this는 메서드를 호출한 객체를 참조
12+
- 생성자 함수 내에서 this는 생성될 인스턴스를 참조
13+
- 명시적 바인딩
14+
- call, apply, bind 메서드를 사용하여 함수나 메서드를 호출할 때 this를 명시적으로 바인딩
15+
- call
16+
- 함수로 전달할 인자가 고정
17+
- `func.call(this, arg1, arg2);`
18+
- apply
19+
- 함수로 전달할 인자가 가변
20+
- `func.apply(this, [arg1, arg2]);`
21+
- bind
22+
- this값이 설정된 새로운 함수를 반환
23+
- `const bindFunc = func.bind(this)`
24+
- 정적 바인딩
25+
- 화살표 함수는 상위 스코프의 this를 바인딩
26+
- 함수가 정의된 시점(실행 시점이 아닌)의 this 바인딩
27+
- `this === window(global) // true`
28+
- ```js
29+
const a = {name: "a"};
30+
const b = {name: "b"};
31+
32+
function print(){
33+
console.log(this.name);
34+
}
35+
36+
a.print = print;
37+
b.print = print;
38+
a.print(); // a
39+
b.print(); // b
40+
print(); // fcClassroom

‎content/Computer Science/5 Software Development/Programming Language/JavaScript/데이터 메모리 할당.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,12 @@ modified: 2025-06-09
2121
- ```js
2222
let a = 1;
2323
let b = 1;
24-
- 변수 영역
24+
- 변수 영역 (stack)
2525
- | 변수명 | 주소 |
2626
| ------ | ---- |
2727
| a | @201 |
2828
| b | @201 |
29-
- 데이터 영역
29+
- 데이터 영역 (stack)
3030
- | 주소 | 값 |
3131
| --- | --- |
3232
| 201 | 1 |
@@ -48,12 +48,12 @@ modified: 2025-06-09
4848
let a = 1;
4949
let b = 1;
5050
a = 2;
51-
- 변수 영역
51+
- 변수 영역 (stack)
5252
- | 변수명 | 주소 |
5353
| ------ | ---- |
5454
| a | @202 |
5555
| b | @201 |
56-
- 데이터 영역
56+
- 데이터 영역 (stack)
5757
- | 주소 | 값 |
5858
| --- | --- |
5959
| 201 | 1 |
@@ -70,17 +70,17 @@ modified: 2025-06-09
7070
}
7171
7272
a.name = "lee"
73-
- 변수 영역
73+
- 변수 영역 (stack)
7474
- | 변수명 | 주소 |
7575
| ------ | ---- |
7676
| a | @201 |
77-
- 데이터 영역
77+
- 데이터 영역 (stack)
7878
- | 주소 | 데이터 |
7979
| ---- | ------ |
8080
| 201 | @401~? |
8181
| 202 | "kim" |
8282
| 203 | "lee" |
83-
- Heap 영역
83+
- Heap 영역 (heap)
8484
- | 주소 | 이름 | 데이터 |
8585
| ---- | ---- | ------ |
8686
| 401 | name | @203 |

‎content/Computer Science/5 Software Development/Programming Language/JavaScript/컴파일링.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,11 @@
44
- babel
55
- 빌드 도구에 의해 자동화
66
- webpack
7+
- 번들링
78
- parcel
9+
- vite
10+
- 개발 서버 속도
11+
- ESM
12+
- Rollup 기반 더 효율적인 번들링
13+
- 트리 쉐이킹, 코드 스플릿
14+
- HMR (Hot Module Replacement)

‎content/Computer Science/5 Software Development/Programming Language/TypeScript/Interface vs type.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
description:
3+
aliases:
4+
created: 2025-06-23
5+
modified: 2025-06-23
6+
---
7+
8+
- interface
9+
- 구조 선언에 최적
10+
- 클래스 친화적
11+
- 선언 병합
12+
- 활용
13+
- 객체, 클래스 구조 명세
14+
- ```ts
15+
interface Animal { name: string }
16+
interface Dog extends Animal { breed: string }
17+
- api 정의
18+
- type
19+
- 타입 조작에 최적
20+
- 유니온 / 제네릭 / 고급 타입 친화적
21+
- 단일 선언
22+
- 활용
23+
- 유니온
24+
- ```ts
25+
type Shape = { kind: 'circle'; r: number } | { kind: 'square'; size: number }
26+
- 함수 반환, 유틸리티 타입
27+
- ```ts
28+
type Keys = 'a' | 'b'
29+
type Obj = {
30+
  [K in Keys]: number
31+
}

‎content/Computer Science/7 Applications Development/Frontend/React/React Framework.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
- next.js
2+
- astro
3+
- qwik
4+
- remix
5+
- solidstart

‎content/Computer Science/7 Applications Development/Frontend/React/Side effect.md‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
1-
-
1+
---
2+
description:
3+
aliases:
4+
created: 2025-06-19
5+
modified: 2025-06-23
6+
---
7+
28
- 클래스 컴포넌트
39
- componentDidMount
410
- componentDidUpdate
511
- componentWillUpdate
612
- 함수 컴포넌트
7-
- 렌더링에 기반한 부수효과 한곳에서 처리
13+
- 렌더링에 기반한 부수효과 한 곳에서 처리
814
- 컴포넌트를 외부 시스템과 연결
915
- useEffect
1016
- 렌더링 후의 동작
@@ -23,6 +29,6 @@
2329
- 의존성이 없으므로 최초에만 설정 콜백 적용
2430
- 의존성 배열 전달 안하면
2531
- 매 렌더링마다 설정 콜백 호출
26-
- 리액트는 `Object.is`를 통해 이전 값과 비교하여 변경 사항 파악
32+
- [[rendering trigger]]
2733
- cleanup 콜백은 이전 상태를 기준으로 정리되고, 설정 콜백은 새로운 상태를 이용해 등록 - [[Closures]] 특징
2834
- [[useEffect 개발모드에서 두번 실행되는 이유]]

0 commit comments

Comments
 (0)