Skip to content

Commit 9c17af8

Browse files
lazy-dinosaurlazy-dinosaur
committed
update post
1 parent 1896aef commit 9c17af8

17 files changed

+364
-10
lines changed

‎content/posts/resource/React/React.md

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
---
2+
tags:
3+
- resource
4+
- react
5+
createdAt: 2025-04-11 18:37:48
6+
modifiedAt: 2025-04-20 10:03:17
7+
publish: resource/React
8+
related: ""
9+
series: ""
10+
---
11+
12+
# React
13+
14+
![1745108551-react.png](_assets/attachments/1745108551-react.png)
15+
16+
리액트(React)는 Facebook(현재 Meta)에서 개발한 JavaScript 라이브러리로, 사용자 인터페이스(UI)를 구축하기 위해 설계되었다.
17+
18+
## 핵심 개념
19+
20+
1. 컴포넌트 기반 아키텍처
21+
22+
- 리엑트는 UI를 **독립적이고 재사용 가능한 조각**(컴포넌트)으로 나눈다.
23+
- 각 컴포넌트는 **자체 상태와 렌더링 로직**을 가질 수 있다.
24+
- 이를 통해 복잡한 UI를 **관리하기 쉬운 작은 부분**으로 분리할 수 있다.
25+
26+
2. 가상 DOM(Virtual DOM)
27+
28+
- 실제 DOM을 직접 조작하는 대신 가상 DOM을 사용한다.
29+
- 변경사항이 있을 때 전체 UI를 다시 그리는 대신, **리엑트는 가상 DOM에서 변경된 부분만 식별하여 실제 DOM에 효율적으로 업데이트한다.**
30+
- 이 과정을 '**재조정(Reconciliation)**'이라고 한다.
31+
32+
3. 단방향 데이터 흐름(One-way Data Flow)
33+
34+
- 데이터는 상위 컴포넌트에서 하위 컴포넌트로 한 방향으로만 흐른다.(Props)
35+
- 이 방식은 애플리케이션의 **상태 변화를 예측 가능하게 만들고 디버깅을 용이**하게 한다.
36+
37+
4. JSX(JavaScript XML)
38+
39+
- JavaScript 코드 안에 HTML과 유사한 마크업을 작성할 수 있는 문법이다.
40+
- 컴포넌트의 구조와 동작을 동일한 파일에서 정의할 수 있게 해준다.
41+
42+
```jsx
43+
function Welcome() {
44+
return <h1>안녕하세요!</h1>;
45+
}
46+
```
47+
48+
5. 상태(State)와 생명주기(Lifecycle)
49+
50+
- 컴포넌트는 내부 상태를 가질 수 있으며, 이 상태가 변경되면 컴포넌트가 다시 렌더링 된다.
51+
- 함수형 컴포넌트에서는 Hook(`useState`, `useEffect` 등)을 통해 상태와 생명주기 기능을 사용한다.
52+
- 클래스 컴포넌트에서는 `this.state`와 생명주기 메서드를 사용한다.
53+
54+
## React의 장단점
55+
56+
### 장점
57+
58+
1. 선언적 프로그래밍
59+
60+
- 원하는 UI상태를 선언하면 리엑트가 DOM을 그에 맞게 업데이트햔다.
61+
- 명령형으로 DOM을 직접 조작하는 것보다 코드가 간결하고 이해하기 쉽다.
62+
63+
2. 컴포넌트 재사용성
64+
65+
- 한 번 작성한 컴포넌트는 여러곳에서 재사용할 수 있다.
66+
- 개발 시간을 단축하고 일관된 UI를 유지하는 데 도움이 된다.
67+
68+
3. 커뮤니티와 생태계
69+
70+
- 풍부한 라이브러리, 도구, 확장 프로그램이 있어 다양한 기능을 쉽게 구현할 수 있다.
71+
72+
4. 성능 최적화
73+
- 가상 DOM과 효율적인 렌더링 알고리즘을 통해 높은 성능을 제공한다.
74+
75+
### 단점
76+
77+
1. 가파른 학습 곡선
78+
79+
- JSX, 가상 DOM, 컴포넌트 라이프사이클, Hook 등 새로운 개념을 이해해야 한다.
80+
81+
2. 부분적인 라이브러리
82+
83+
- 리엑트는 UI 인터페이스를 위한 라이브러리 일 뿐, 완전한 프레임워크가 아니다.
84+
- 라우팅, 상태관리, API통신 등을 위해 추가 라이브러리가 필요하다.
85+
- 이로 인해 프로젝트 설정 과정이 복잡해질 수 있다.
86+
87+
3. 높은 번들 크기
88+
89+
- 기본 리엑트 라이브러리 자체가 다소 큰 편이다.
90+
- 추가 라이브러리와 함께 사용하면 최종 번들 크기가 커져 초기 로딩 시간이 길어질 수 있다.
91+
92+
4. SEO 문제
93+
- 전통적인 클라이언트 사이드 렌더링은 검색 엔진 최적화에 불리할 수 있다.
94+
- 이를 해결하기 위해 SSR(서버 사이드 렌더링)구현이 필요한데, 이는 Next.js와 같은 추가 프레임워크나 복잡한 설정이 요구된다.
95+
96+
## 관련 노트
97+
98+
- [[flux 패턴이란]]
99+
- [[엘리먼트와 컴포넌트의 차이]]
100+
- [[props와 state]]
101+
- [[Props Drilling 이란 무엇인가]]
102+
- [[자식컴포넌트에서 부모컴포넌트로 데이터 전달하기]]
103+
- [[가상DOM의 원리]]
104+
- [[리엑트의 상태관리]]
105+
- [[리엑트 함수형 컴포넌트의 생명주기]]
106+
- [[useRef란 무엇인가]]
107+
- [[useEffect와 useLayoutEffect]]
108+
- [[useCallback와 useMemo]]
109+
- [[react-query]]
110+
- [[portal이란 무엇인가]]
111+
- [[hook이란 무엇인가]]
112+
- [[suspense란 무엇인가]]
113+
- [[서버 컴포넌트란 무엇인가]]
114+
- [[Key Props란 무엇인가]]
115+
- [[고차 컴포넌트(Higher-Order Components)란 무엇인가]]
116+
- [[CSR vs SSR vs SSG]]

‎content/posts/resource/React/flux 패턴이란.md

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
tags:
3+
- resource
4+
- react
5+
createdAt: 2025-04-19 22:48:15
6+
modifiedAt: 2025-04-20 09:23:43
7+
publish: resource/React
8+
related: ""
9+
series: ""
10+
---
11+
12+
# flux 패턴이란
13+
14+
![1745105037-flux-pattern.png](_assets/attachments/1745105037-flux-pattern.png)
15+
16+
Flux 패턴은 Facebook(현 Meta)에서 개발한 단방향 데이터 흐름 아키텍처 패턴이다. 복잡한 UI를 가진 웹 애플리케이션에서 데이터 흐름을 관리하기 위해 만들어 졌으며, 특히 React와 함께 사용하기 위해 설계되었다.
17+
18+
## 주요 특징
19+
20+
1. 단방향 데이터 흐름: 데이터는 항상 한방향(Dispatcher -> Store -> View)으로만 흐른다.
21+
2. 예측 가능한 상태 관리: 애플리케이션의 상태가 어떻게 변하는지 추적하기 쉽다.
22+
3. 중앙 집중식 Dispatcher:모든 액션이 중앙 Dispatcher를 통과한다.
23+
24+
## 핵심 구성 요소
25+
26+
1. 액션(Actioin): 사용자 상호작용이나 API응답 등으로 발생하는 이벤트이다. 각 액션은 `type`과 관련 `payload`(데이터)를 가진다.
27+
28+
2. 디스패처(Dispatcher): 액션을 받아서 등록된 모든 스토어에 전달하는 중앙 허브이다. Flux의 디스패처는 단일 디스패처로, 모든 액션은 이를 통과한다.
29+
30+
3. 스토어(Store): 애플리케이션의 상태와 비즈니스 로직을 포함한다. 디스패치로부터 액션을 받아 처리하고, 상태를 업데이트한다. 스토어는 상태가 변경되면 뷰에게 알린다.
31+
32+
4. 뷰(View): 주로 React 컴포넌트로 구현하다. 스토어의 상태를 화면에 렌더링하고, 사용자 입력에 반응하여 새로운 액션을 생성한다.
33+
34+
## 데어터 흐름
35+
36+
Flux 데이터 흐름은 다음과 같은 단계로 진행된다.
37+
38+
1. 사용자가 뷰와 상호작용한다.(예: 버튼 클릭)
39+
2. 뷰는 액션 크리에이터(Action Creator)
40+
3. 액션은 디스패처로 전달된다.
41+
4. 디스패처는 액션을 모든 스토어에 전달한다.
42+
5. 스토어는 액션에 따라 상태를 업데이트하고, 변경 이벤트를 발생시킨다.
43+
6. 뷰는 스토어의 변경 이벤트를 감지하고, 새로운 상태에 따라 리렌더링된다.
44+
45+
## Flux 패턴의 장단점
46+
47+
- 장점
48+
49+
- 예측 가능한 데이터 흐름
50+
- 상태 관리의 일관성
51+
- 디버깅 용이성
52+
- 코드 구조의 명확성
53+
54+
- 한계점
55+
56+
- 간단한 애플리케이션에서는 과도한 보일러플레이트 코드가 발생
57+
- 비동기 작업 처리를 위한 추가 라이브러리 필요
58+
- 학습 곡선이 있음

‎content/posts/resource/React/props와 state.md

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
---
2+
tags:
3+
- resource
4+
- react
5+
createdAt: 2025-04-20 09:40:39
6+
modifiedAt: 2025-04-20 12:44:48
7+
publish: resource/React
8+
related: ""
9+
series: ""
10+
---
11+
12+
# props와 state
13+
14+
props 와 state 둘다 데이터를 관리하기 위한 값이다.
15+
16+
## State(상태)
17+
18+
State는[[엘리먼트와 컴포넌트의 차이|컴포넌트]] 내부에서 관리되는 데이터로, 컴포넌트의 렌더링에 영향을 주는 동적인 값이다.
19+
20+
### 주요 특징
21+
22+
- 컴포넌트 내부에서 생성되고 관리된다.
23+
- 변경 가능(mutable)아며, 상태가 변경되면 컴포넌트가 다시 렌더링된다.
24+
- 컴포넌트의 생명주기 동안 유지된다.
25+
- 비동기적으로 업데이트될 수 있다.
26+
27+
> [!important]
28+
>
29+
> - `setState()`나 `setState`의 업데이트 함수는 상태를 즉시 변경하지 않고 업데이트를 예약한다.(비동기적)
30+
> - 이전 상태에 의존하는 업데이트트는 함수형 업데이트를 사용해야 한다.
31+
> ```js
32+
> setCount((prevCount) => prevCount + 1);
33+
> ```
34+
35+
## Props(속성)
36+
37+
Props는 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터 이다.
38+
39+
### 주요 특징
40+
41+
- 외부(부모 컴포넌트)에서 전달받는다.
42+
- 읽기 전용(read-only)이며 컴포넌트 내부에서 변경할 수 없다.
43+
- 부모 컴포넌트가 리렌더링되면 자식 컴포넌트의 props도 업데이트될 수 있다.
44+
- 컴포넌트 간의 데이터 흐름을 형성한다.
45+
46+
> [!important]
47+
>
48+
> - Props는 단방향 데이터 흐름을 구현한다(부모->자식)
49+
> - Props는 불변성(immutability)을 가진다.
50+
> - 기본값 설정이 가능하다.
51+
> - Props를 통해 함수도 전달할 수 있어 자식 컴포넌트가 부모 컴포넌트의 상태를 변경할 수 있다.
52+
53+
| 특성 | State | Props |
54+
| ------------- | ----------------------------------------------- | ----------------------------- |
55+
| 출처 | 컴포넌트 내부 | 부모 컴포넌트 |
56+
| 변경 가능성 | 변경 가능(mutable) | 읽기 전용(immutable) |
57+
| 업데이트 방법 | `setState()` 또는 `useState` 훅의 업데이트 함수 | 부모 컴포넌트에서만 변경 가능 |
58+
| 데이터 흐름 | 컴포넌트 내부 흐름 | 하향식(top-down)흐름 |
59+
| 사용 용도 | 컴포넌트의 내부 상태 관리 | 컴포넌트 간 데이터 전달 |

‎content/posts/resource/React/엘리먼트와 컴포넌트의 차이.md

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
tags:
3+
- resource
4+
- react
5+
createdAt: 2025-04-20 08:41:50
6+
modifiedAt: 2025-04-20 09:44:34
7+
publish: resource/React
8+
related: ""
9+
series: ""
10+
---
11+
12+
# 엘리먼트와 컴포넌트의 차이
13+
14+
## 엘리먼트(Element)
15+
16+
엘리먼트는 UI를 구성하는 가장 작은 단위로, 화면에 표시하려는 것을 기술한다.
17+
18+
- 정의: 화면에 표시되는 실제 DOM 노드나 React와 같은 프레임워크에서는 **가상 DOM 노드**를 의미한다.
19+
- 특성: 엘리먼트는 일반적으로 불변(immutable)이다. 즉, 생성된 후에는 자식이나 속성을 변경할 수 없다.
20+
- React에서의 예시: `React.createElement()` 함수로 생성 되거나 JSX를 통해 선언적으로 작성된다.
21+
22+
## 컴포넌트(Component)
23+
24+
컴포넌트는 재사용 가능한 독립적인 모듈로, UI의 일부를 구성한다.
25+
26+
- 정의: 엘리먼트들의 집합을 캡슐화하여 재사용 가능한 단위로 만든 것이다.
27+
- 특성:
28+
- 자체[[props와 state|상태(state)]]와 라이프사이클을 가질 수 있다.
29+
- props를 통해 데이터를 전달받아 처리할 수 있다.
30+
- 재사용성과 모듈화를 위해 설계된다.
31+
- React에서의 예시:
32+
```js
33+
function Greeting(props) {
34+
return <h1>안녕하세요, {props.name}님!</h1>;
35+
}
36+
```
37+
38+
## 핵심 차이점
39+
40+
1. 추상화 수준:
41+
42+
- 엘리먼트: 낮은 수준의 추상화로, UI의 실제 표현을 정의한다.
43+
- 컴포넌트: 높은 수준의 추상화로, 엘리먼트들을 조합하여 기능적 단위를 형성한다.
44+
45+
2. 재사용성:
46+
- 엘리먼트: 단일 인스턴스로, 그 자체로는 재사용하기 어렵다.
47+
- 컴포넌트: 재사용을 목적으로 설계되어 다양한 상황에서 활용 가능하다.
48+
3. 동작 방식:
49+
50+
- 엘리먼트: 단순히 화면에 표시라 것을 기술하는 객체이다.
51+
- 컴포넌트: 로직과 상태를 포함하여 동적으로 엘리먼트를 생성하고 조작한다.
52+
53+
4. 생명주기:
54+
- 엘리먼트: 생명주기가 없으며, 단순히 렌더링 결과물의 스냅샷이다.
55+
- 컴포넌트: 마운트, 업데이트, 언마운트 등의 생명주기를 가진다.

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,19 @@ tags:
44
- web
55
- javascript
66
createdAt: 2025-04-12 09:09:33
7-
modifiedAt: 2025-04-19 20:48:09
7+
modifiedAt: 2025-04-20 09:23:09
88
publish: 자원/JavaScript
99
related: ""
1010
series: ""
1111
---
1212

1313
# Javascript
1414

15+
![1745108580-javascript.png](_assets/attachments/1745108580-javascript.png)
16+
1517
웹사이트에서 [[HTML]]과 [[CSS]]가 각각 내용의 구조를 정하고 그 내용이 어떤 모습으로 표현되어야 하는지 브라우져에게 설명하는 언어라면 Javascript 는 웹사이트와 사용자가 상호작용을 할 수 있도록 하는 언어이다.
1618

17-
## 관련 포스트
19+
## 관련 노트
1820

1921
- [[변수의 선언,초기화,할당의 차이점은 무엇인가]]
2022
- [[var,let,const의 주요 차이점은 무엇인가]]

‎content/posts/자원/JavaScript/변수의 선언,초기화,할당의 차이점은 무엇인가.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ tags:
33
- resource
44
- javascript
55
createdAt: 2025-04-17 13:25:40
6-
modifiedAt: 2025-04-18 15:01:06
6+
modifiedAt: 2025-04-20 08:03:35
77
publish: 자원/JavaScript
88
related: ""
99
series: ""
@@ -14,10 +14,10 @@ series: ""
1414
선언, 초기화, 할당 세 단계를 구분하는 것은 호이스팅과 시간적 사각지대(TDZ)같은 개념을 이해하는 데 기초가 된다. 변수가 어떻게 생성되고 언제 접근 가능한지를 정확히 아는것은 코드의 동작을 예측하고 오류를 피하는데에 중요하다.
1515

1616
1. 선언(Declaration)
17-
변수 이름을 자바스크립트 엔진에 등록하는 단계이다. 이 단계에서 해당 스코프는 참조할 식별자를 알게 된다. 예를 들어 `let myVar;`은 `myVar`이라는 변수를 선언한다.
17+
**변수 이름을 자바스크립트 엔진에 등록**하는 단계이다. 이 단계에서 해당 스코프는 참조할 식별자를 알게 된다. 예를 들어 `let myVar;`은 `myVar`이라는 변수를 선언한다.
1818

1919
2. 초기화(Initialization)
20-
선언된 변수를 위해 메모리 공간을 확보하고, 기본값으로 `undefined`를 할당하는 단계이다. `let`과 `const`는 선언 단계와 초기화 단계가 분리되어 있지만, `var`은 선언과 동시에 `undefined`로 초기화된다. 이 때문에 [[호이스팅(Hoisting)이란 무엇인가|호이스팅 작동시에 문제]]가 생긴다
20+
**선언된 변수를 위해 메모리 공간을 확보하고, 기본값으로 `undefined`를 할당**하는 단계이다. `let`과 `const`는 선언 단계와 초기화 단계가 분리되어 있지만, `var`은 선언과 동시에 `undefined`로 초기화된다. 이 때문에 [[호이스팅(Hoisting)이란 무엇인가|호이스팅 작동시에 문제]]가 생긴다
2121

2222
3. 할당(Assignment)
23-
`=`연산자를 사용하여 변수에 실제 값을 저장하는 단계이다. `undefined`로 초기화된 변수에 구체적인 값을 넣어주는 과정이다. 예를 들어 `myVar = 10;`은 `myVar`변수에 10이라는 값을 할당한다.
23+
`=`연산자를 사용하여 **변수에 실제 값을 저장**하는 단계이다. `undefined`로 초기화된 변수에 구체적인 값을 넣어주는 과정이다. 예를 들어 `myVar = 10;`은 `myVar`변수에 10이라는 값을 할당한다.

‎public/link-map.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@
1515
"3.resource/Javascript/프로토타입(Prototype)과 프로토타입 상속.md": "자원/JavaScript/프로토타입(Prototype)과 프로토타입 상속",
1616
"3.resource/Javascript/Javascript에서의 비동기 함수.md": "자원/JavaScript/Javascript에서의 비동기 함수",
1717
"3.resource/Javascript/Javascript는 어떻게 비동기 처리가 가능한 것인가.md": "자원/JavaScript/Javascript는 어떻게 비동기 처리가 가능한 것인가",
18+
"3.resource/React/React.md": "resource/React/React",
19+
"3.resource/React/엘리먼트와 컴포넌트의 차이.md": "resource/React/엘리먼트와 컴포넌트의 차이",
20+
"3.resource/React/flux 패턴이란.md": "resource/React/flux 패턴이란",
21+
"3.resource/React/props와 state.md": "resource/React/props와 state",
1822
"3.resource/Web/동적 사이트 vs 정적사이트.md": "자원/웹개발/동적 사이트 vs 정적사이트",
1923
"3.resource/Web/HTTP(Hypertext Transfer Protocol).md": "자원/웹개발/HTTP(Hypertext Transfer Protocol)",
2024
"3.resource/Web/웹사이트는 어떻게 보여지는가-브라우저의 렌더링.md": "자원/웹개발/웹사이트는 어떻게 보여지는가-브라우저의 렌더링",

0 commit comments

Comments
 (0)