profile
๐Ÿ’ป ์†Œํ”„ํŠธ์›จ์–ด ์—”์ง€๋‹ˆ์–ด๋ฅผ ๊ฟˆ๊พธ๋Š” ๊ฐœ๋ฐœ ์‹ ์ƒ์•„๐Ÿ‘ถ

๋ฆฌ์•กํŠธ์˜ ๋””์ž์ธ ์ฒ ํ•™ - scheduling

์–ด์ฉŒ๋ฉด ๋ชฐ๋ผ๋„ ๋˜๋Š” ๋ฆฌ์•กํŠธ ๊นŠ์ˆ™ํ•œ ๊ณณ์˜ ์ด์•ผ๊ธฐ

2022๋…„ 7์›” 12์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

๋ฆฌ์•กํŠธ Virtual DOM์— ๋Œ€ํ•ด์„œ ๊ฐ„๋‹จํ•˜๊ฒŒ

๋ฆฌ์•กํŠธ์—์„œ Virtual DOM์€ ๋ฌด์—‡์ด๊ณ  ๋ฆฌ์•กํŠธ์—์„œ๋Š” ์™œ ์ด๊ฒƒ์„ ์‚ฌ์šฉํ•˜๋Š”๊ฐ€์— ๋Œ€ํ•ด ๊ฐ„๋žตํ•˜๊ฒŒ ์ •๋ฆฌํ•ด๋ณด์ž

2022๋…„ 7์›” 12์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

DOM Node์™€ Element

์‹œ์ž‘์€ React reconciliation, ๊ทธ ์ „์—๋Š” React18์— ์ ์šฉ๋œ Suspense, useTransition ๋“ฑ์— ๋Œ€ํ•œ ๊ถ๊ธˆ์ฆ์—์„œ๋ถ€ํ„ฐ์˜€๋‹ค. ๊ด€๋ จ ๊ธ€์„ ์ฝ๋‹ค๋ณด๋‹ˆ ์ž์ฃผ ๋‚˜์˜ค๋Š” ๊ฐœ๋…์ธ DOM node, element ๋“ฑ์— ๋Œ€ํ•œ ์ดํ•ด๋„๋ฅผ ๋†’์ด๊ณ ์ž ์ •๋ฆฌํ•˜๋Š” ๊ธ€

2022๋…„ 6์›” 28์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

component, element ๊ทธ๋ฆฌ๊ณ  instance in React

์ปดํฌ๋„ŒํŠธ์™€, ๊ทธ์˜ instance ๊ทธ๋ฆฌ๊ณ  element๊ฐ„์˜ ๊ตฌ๋ถ„์€ ํ—ท๊ฐˆ๋ฆฌ๋Š” ๊ฐœ๋…์ด๋‹ค. ์™œ ๊ทธ๋“ค์€ ๋ชจ๋‘ ์Šคํฌ๋ฆฐ์— ๊ทธ๋ ค์ง„ ์–ด๋–ค ๊ฒƒ์„ ์ง€์นญํ•˜๋ฉด์„œ ๋‹ค๋ฅธ ๋‹จ์–ด๋“ค๋กœ ์‚ฌ์šฉ๋˜๋Š”๊ฐ€?

2022๋…„ 6์›” 28์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

๋ฆฌ์•กํŠธ Reconciliation

render()ํ•จ์ˆ˜๋Š” ๋ธŒ๋ผ์šฐ์ €์—์„œ UI๋ฅผ render ํ•˜๋ คํ•  ๋•Œ ๋งˆ๋‹ค ๋ถˆ๋ฆฌ์šฐ๋Š” ํ•จ์ˆ˜์ด๋‹ค. ์ตœ์ƒ์œ„ render ํ•จ์ˆ˜๋Š” React element๋“ค์˜ ํŠธ๋ฆฌ๋ฅผ ์žฌ๊ท€์ ์œผ๋กœ ๋ฆฌํ„ดํ•˜๋Š” ํ•จ์ˆ˜๋ผ๊ณ  ๋ณผ ์ˆ˜ ์žˆ๋‹ค. ๊ทธ ํ›„ ๋‹ค์Œ ๋ Œ๋” cycle์—์„œ ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ์˜ ํŠธ๋ฆฌ๋Š” ๋‹ค์‹œ ์ƒ์„ฑ๋œ๋‹ค(re

2022๋…„ 6์›” 25์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

[์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive] ํƒ€์ž…๋ณ€ํ™˜๊ณผ ๋‹จ์ถ• ํ‰๊ฐ€

ํƒ€์ž…๋ณ€ํ™˜์€ ์ฝ”๋”์˜ ์˜๋„์— ๋”ฐ๋ผ ๊ฐ€์‹œ์ ์œผ๋กœ ์˜๋„๊ฐ€ ๋ณด์ด๋Š” ๋ช…์‹œ์  ํƒ€์ž…๋ณ€ํ™˜๊ณผ ์—”์ง„์— ์˜ํ•ด ์ž๋™์œผ๋กœ ๋ณ€ํ™˜๋˜๋Š” ์•”๋ฌต์  ํƒ€์ž…๋ณ€ํ™˜์ด ์žˆ๋‹ค.

2022๋…„ 3์›” 22์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

[์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive] ์—ฐ์‚ฐ์ž

7. ์—ฐ์‚ฐ์ž ์—ฐ์‚ฐ์ž๋Š” ํ•˜๋‚˜ ์ด์ƒ์˜ ํ‘œํ˜„์‹์„ ๋Œ€์ƒ์œผ๋กœ ์‚ฐ์ˆ , ํ• ๋‹น, ๋น„๊ต, ๋…ผ๋ฆฌ, ํƒ€์ž…, ์ง€์ˆ˜ ์—ฐ์‚ฐ ๋“ฑ์„ ์ˆ˜ํ–‰ํ•˜์—ฌ ํ•˜๋‚˜์˜ ๊ฐ’์„ ๋งŒ๋“ ๋‹ค.

2022๋…„ 3์›” 17์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

[์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive] ๋ฐ์ดํ„ฐ ํƒ€์ž…

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” 7๊ฐœ์˜ ๋ฐ์ดํ„ฐ ํƒ€์ž…์ด ์žˆ๋‹ค. ๊ทผ๋ฐ ์ด์ œ ES11์—์„œ BigInt๊ฐ€ ์ถ”๊ฐ€๋œ.

2022๋…„ 3์›” 16์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

[์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive] ํ‘œํ˜„์‹๊ณผ ๋ฌธ

ํ”„๋กœ๊ทธ๋žจ์€ ๋ฌธ์˜ ์ง‘ํ•ฉ์œผ๋กœ ์ด๋ค„์ง„ ๊ฒƒ์œผ๋กœ ๋ฌธ์„ ์ž‘์„ฑํ•˜์—ฌ ์ˆœ์„œ์— ๋งž๊ฒŒ ๋‚˜์—ดํ•˜๋Š” ๊ฒƒ์ด ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด๋‹ค. ์ฆ‰ ๋ฌธ์€ ํ”„๋กœ๊ทธ๋žจ์„ ๊ตฌ์„ฑํ•˜๋Š” ๊ธฐ๋ณธ ๋‹จ์œ„์ด์ž ์ตœ์†Œ ์‹คํ–‰ ๋‹จ์œ„์ด๋ฉฐ ๋ฌธ์€ ํ‘œํ˜„์‹์ธ ๋ฌธ๊ณผ ํ‘œํ˜„์‹์ด ์•„๋‹Œ๋ฌธ์œผ๋กœ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ๋‹ค.

2022๋…„ 3์›” 10์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

[์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive] ๋ณ€์ˆ˜

์•„๋ฌด๋ฆฌ ๋ณต์žกํ•œ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์ด๋ผ ํ• ์ง€๋ผ๋„ ๋ฐ์ดํ„ฐ๋ฅผ ์ž…๋ ฅ ๋ฐ›์•„ ์ฒ˜๋ฆฌํ•˜๊ณ  ๊ฒฐ๊ณผ๋ฅผ ์ถœ๋ ฅ ํ•˜๋Š” ๊ฒƒ์ด ์ „๋ถ€์ด๋‹ค.

2022๋…„ 2์›” 3์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

[์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive] ํ”„๋กœ๊ทธ๋ž˜๋ฐ๊ณผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ

ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด๋ž€ 0๊ณผ 1๋ฐ–์— ์•Œ์ง€ ๋ชปํ•˜๋Š” ๊ธฐ๊ณ„๊ฐ€ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ์„ ์ •๋„๋กœ ์ •ํ™•ํ•˜๊ณ  ์ƒ์„ธํ•˜๊ฒŒ ์š”๊ตฌ์‚ฌํ•ญ์„ ์„ค๋ช…ํ•˜๋Š” ์ž‘์—…์„ ์ฝ”๋“œ๋กœ ๋ช…๋ น์„ ์ „๋‹ฌํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ๊ทธ 0๊ณผ1์„ ์ธ๊ฐ„์นœํ™”์ ์ธ ์–ธ์–ด๋กœ ๋งŒ๋“ค์–ด์ง„ ๊ฒƒ์ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์ผ๋ฟ.

2022๋…„ 2์›” 3์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

React์— GraphQL ํ•œ์Šคํ‘ผ ๋”ํ•˜๊ธฐ: 2. Apollo Client

graphQL์˜, graphQL์— ์˜ํ•œ, graphQL๋ฅผ ์œ„ํ•œ

2020๋…„ 8์›” 16์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

React์— GraphQL ํ•œ์Šคํ‘ผ ๋”ํ•˜๊ธฐ: 1. graphQL ๋ง›๋ณด๊ธฐ

React์— graphQL๊ณผ React-Apollo๋ฅผ ํ•œ ์Šคํ‘ผ์”ฉ ๋„ฃ์–ด์„œ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋” ๋ง›์žˆ๊ฒŒ ๋งŒ๋“ค์–ด๋ณด์ž.

2020๋…„ 8์›” 2์ผ
ยท
2๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

์•„๋งˆ์กด์•„ ์„œ๋ฒ„์šฉ ์ปดํ“จํ„ฐ๋ฅผ ๋ฟŒ๋ ค๋ผ: EC2

๋ญ๋ผ๊ณ ? ์•„๋งˆ์กด์—์„œ ๋ฌด๋ฃŒ๋กœ ์ปดํ“จํ„ฐ๋ฅผ ๋งž์ถฐ์ค€๋‹ค๊ณ ? ์—ฅ?

2020๋…„ 7์›” 19์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

Dive into patterns with React

About desing patterns with React: Flux, provider and Observer in brief way.

2020๋…„ 7์›” 11์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

[JS] ๋ฐ์ดํ„ฐ ํƒ€์ž…๊ณผ ๋ณ€์ˆ˜

๋ช‡์ผ ์ „ ๊ฐœ๋ฐœ์„ ํ•˜๋‹ค๊ฐ€ JSONํŒŒ์ผ์˜ numberํƒ€์ž…์˜ id์˜ ๊ฐ’์„ ์ปดํฌ๋„ŒํŠธ์˜ id๊ฐ’์œผ๋กœ ํ• ๋‹นํ•˜๊ณ  ๋‹ค์‹œ JSONํŒŒ์ผ ์† id์™€ ๋น„๊ต๋ฅผ ํ•  ๋•Œ ์—„์ฒญ๋‚œ ์• ๋ฅผ ๋จน์€์ ์ด์žˆ๋‹ค.filter๋ฅผ ์ด์šฉํ•ด์„œ ๊ฑธ๋Ÿฌ๋‚ด๋ ค๋Š” ํ•จ์ˆ˜๋ฅผ ์ž‘์„ฑํ–ˆ๋Š”๋ฐ ์ฝ˜์†”์— ๊ฐ™์€ ๊ฐ’์ด ์ฐํžˆ๋Š”๋Œ€๋„ ๋ถˆ๊ตฌํ•˜๊ณ filterํ•จ์ˆ˜

2020๋…„ 6์›” 19์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

Promise and async/await

The code written in Javascript is executed in synchronously while, nowadays, more and more asynchronous functions need to be used.Therefore, we should

2020๋…„ 6์›” 6์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ ์—”์ง„ ๊ทธ๋ฆฌ๊ณ  ์‹คํ–‰ ๋ฐฉ์‹

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๋Š” ๋ฐฉ์‹๊ณผ ๋น„๋™๊ธฐ ํ•จ์ˆ˜์— ๋Œ€ํ•ด์„œ๋Š” ์–ด๋–ค ๊ณผ์ •์ด ์ผ์–ด๋‚˜๋Š”์ง€ ์•Œ์•„๋ณด๊ธฐ.

2020๋…„ 6์›” 6์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ ๋ฆฌ์•กํŠธ ๊ทธ๋ฆฌ๊ณ  ํ”„๋ก ํŠธ์—”๋“œ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ชฉ์ ๊ณผ ์ด์œ , ๊ทธ๋ฆฌ๊ณ  ๋ฆฌ์•กํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ  ๋” ๋‚˜์•„๊ฐ€ ํ”„๋ก ํŠธ์—”๋“œ์˜ ๋ณธ์งˆ์ ์ธ ํ•˜๋Š” ์ผ

2020๋…„ 6์›” 5์ผ
ยท
1๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

Promise ํŒจํ„ด์œผ๋กœ ๊ณ„ํšํ•˜๊ณ  Promiseํ•œํ…Œ ๊ฐ์‹œ๋ฐ›๊ธฐ

Promise ํŒจํ„ด์€ ํ•จ์ˆ˜ ์‹คํ–‰์„ ์ˆœ์„œ๋Œ€๋กœ ๋ณด์žฅ๋ฐ›์ง€ ๋ชปํ•˜๋Š” ํ•จ์ˆ˜ ์‹คํ–‰์— ๋Œ€ํ•œ ๋ฐฉํ•™ ๊ณ„ํšํ‘œ์ด๋‹ค. ๊ทธ๋ฆฌ๊ณ  Promise๋Š” ๊ทธ๊ฑธ ๊ฐ์‹œํ•˜๋ฉฐ ํ•˜๋‚˜ํ•˜๋‚˜ ์„ฑ๊ณต์ธ์ง€ ์‹คํŒจ์ธ์ง€ ํŒ๋ณ„ํ•˜์—ฌ ์•Œ๋ ค์ฃผ๋Š” ์–ด๋จธ๋‹ˆ๋‹ค.

2020๋…„ 6์›” 4์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท