profile
๐Ÿ™Œ๊ฟˆ๊พธ๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž ์‹ ์€์ˆ˜์ž…๋‹ˆ๋‹น๐Ÿ™Œ
ํƒœ๊ทธ ๋ชฉ๋ก
์ „์ฒด๋ณด๊ธฐ (33)๋ฉ‹์Ÿ์ด์‚ฌ์ž์ฒ˜๋Ÿผ ํ”„๋ก ํŠธ์—”๋“œ์Šค์ฟจ(14)reactjs(11)js(10)corejs(6)ReactHooks(6)CSS(5)this(2)setting(2)CRA(2)๋น„๋™๊ธฐ(2)๋ฉด์ ‘(2)frontend(2)ํด๋กœ์ €(2)section(1)cleancode(1)VSC(1)promise(1)๊นŠ์€๋ณต์‚ฌ(1)๊ฐ€์ƒํด๋ž˜์Šค(1)๋Ÿฐํƒ€์ž„(1)ํ† ์Šค(1)์ œ๋กœ์ดˆ(1)ํ˜ธ์ด์ŠคํŒ…(1)transform(1)๊ฐ€์ƒ์š”์†Œ(1)ํ”„๋กœ๋ฏธ์Šค(1)๋ถˆ๋ณ€๊ฐ์ฒด(1)nodejs(1)์„ฑ๋Šฅ์ตœ์ ํ™”(1)์‹คํ–‰์ปจํ…์ŠคํŠธ(1)ํ”„๋ก ํŠธ์—”๋“œ(1)await(1)useState(1)NaN(1)nullish(1)async(1)๋„คํŠธ์›Œํฌ(1)JavaScript(1)์„œ๋ฒ„์‚ฌ์ด๋“œ๋ฆฌ์•กํŠธ(1)webpack(1)์ฝœ๋ฐฑํ•จ์ˆ˜(1)margin(1)CS(1)์–•์€๋ณต์‚ฌ(1)๊ธฐ๋ณธ์„ ํƒ์ž(1)key(1)useContext(1)useMemo(1)useReducer(1)useRef(1)ํ•จ์ˆ˜(1)์ค‘์†Œ๊ธฐ์—…(1)๊ฐ€๋ณ€๊ฐ’(1)์„ ํƒ์ž(1)html(1)์ธํ„ด(1)useCallback(1)Context API(1)Margin collapsing(1)useLayoutEffect(1)CSR(1)SSR(1)๋ Œ๋”๋ง(1)Propery size images(1)์†์„ฑ์„ ํƒ์ž(1)CDN(1)Lazy Initialization(1)์ด๋ฏธ์ง€ CDN(1)word-break(1)์žฌ์กฐ์ •(1)word-wrap(1)์กฐ๊ฑด๋ถ€๋ Œ๋”๋ง(1)lighthosue(1)isNaN(1)Falsy(1)JSX(1)Number.isNaN(1)SLASH21(1)ํด๋กœ์ €ํ™œ์šฉ(1)typescript(1)thisBinding(1)์ปดํฌ๋„ŒํŠธ๋ฆฌ์ŠคํŠธ(1)React.memo(1)๋ถˆ๋ณ€๊ฐ’(1)ํšŒ๊ณ (1)์ฝœ๋ฐฑ์ง€์˜ฅ(1)position(1)article(1)
post-thumbnail

๋‚ด๊ฐ€ ์ง์ ‘ ํ”„๋กœ์ ํŠธ์— ์ ์šฉํ•ด๋ณธ, ์ด๋ฏธ์ง€ CDN์„ ์‚ฌ์šฉํ•ด ์„ฑ๋Šฅ์ตœ์ ํ™”ํ•˜๊ธฐ (feat. Properly size images)

Lighthouse๋Š” ๊ตฌ๊ธ€์—์„œ ์ œ๊ณตํ•˜๋Š” ์›น ํŽ˜์ด์ง€ ํ’ˆ์งˆ ๊ฐœ์„ ์„ ์œ„ํ•œ ์˜คํ”ˆ ์†Œ์Šค์ด๋‹ค. ์‹ค์ œ ๋‚ด๊ฐ€ ์ง„ํ–‰ํ•˜๊ณ  ์žˆ๋Š” ํ”„๋กœ์ ํŠธ๋ฅผ light houseํˆด๋กœ ์„ฑ๋Šฅ ๋ถ„์„ํ–ˆ์„ ๋•Œ์˜ ํ™”๋ฉด์„ ์บก์ณํ•ด์™”๋‹ค. npm run build ๋ช…๋ น์–ด๋กœ ๊ฒฝ๋Ÿ‰ํ™”๋œ js ํŒŒ์ผ๋กœ ์›น์‚ฌ์ดํŠธ ์„ฑ๋Šฅ์„ ๋ถ„์„ํ–ˆ์„ ๋•Œ

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

CRA์—†์ด React + TypeScript ํ”„๋กœ์ ํŠธ Setting (with ์ œ๋กœ์ดˆ๋‹˜)

๋“ค์–ด๊ฐ€๊ธฐ์ „ React์™€ Typescript๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•˜๊ธฐ์ „, ์ œ๋กœ์ดˆ๋‹˜์˜ sleact ๊ฐ•์˜๋ฅผ ๋“ฃ๊ณ  ๋‚ด๊ฐ€ ์ƒ๊ฐ๋ณด๋‹ค ๊ธฐ์ดˆ๊ฐ€ ๋งŽ์ด ๋ถ€์กฑํ•˜๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค. ๊ทธ๋ž˜์„œ CRA๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•๊ณผ ๊ทธ ๊ณผ์ • ์†์—์„œ ๋‚ด๊ฐ€ ์•Œ๊ฒŒ ๋œ ๊ฒƒ๋“ค์„ ์ •๋ฆฌํ•˜๊ณ 

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

ํ† ์Šค ์‹ค๋ฌด์—์„œ ๋ฐ”๋กœ ์“ฐ๋Š” Frontend Clean Code ์ •๋ฆฌ

ํ”„๋กœ์ ํŠธ๋ฅผ ํ•˜๋ฉฐ ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ํด๋ฆฐํ•˜๊ฒŒ ์งค ์ˆ˜ ์žˆ๋Š” ์ง€ ๊ณ ๋ฏผ์ด ๋งŽ์•˜๋‹ค. ๊ทธ๋ž˜์„œ ์—ฌ๋Ÿฌ ๋ธ”๋กœ๊ทธ ๊ธ€์„ ์ฐพ์•„๋ณด๋ฉฐ ๊ณต๋ถ€๋ฅผ ํ•˜๋‹ค๊ฐ€ ํ† ์Šค์—์„œ ๋‚˜์˜จ ์˜์ƒ์„ ๋ณด๊ณ  ์ •๋ฆฌ๋ฅผ ํ•ด๋ณธ๋‹ค. ์‚ฌ์‹ค ์˜์ƒ์„ ๋ณด๋ฉด ์ดํ•ด๋Š” ๊ฐ€๋Š”๋ฐ, ์‹ค์ œ ๋‚ด ์ฝ”๋“œ์— ์ ์šฉํ•˜๋Š” ์ผ์€ ์‰ฝ์ง€ ์•Š์€ ๊ฒƒ๊ฐ™๋‹ค. ๊ทธ๋ž˜๋„ ๋‚˜์ค‘์— ๊ฒฝ๋ ฅ์ด ์Œ“

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

์„œ๋ฒ„์‚ฌ์ด๋“œ ๋ฆฌ์•กํŠธ ๊ฐ€๋ณ๊ฒŒ ์‹œ์ž‘ํ•ด๋ณด๊ธฐ

1. CSR๊ณผ SSR 1) CSR CSR(ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง)์€ ๋ธŒ๋ผ์šฐ์ €์—์„œ JavaScript๋ฅผ ํ†ตํ•ด ๋™์ ์œผ๋กœ ํŽ˜์ด์ง€๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๋ฐฉ์‹ >1. ๊ป๋ฐ๊ธฐ ๋ฟ์ธ html ํŒŒ์ผ์„ ๋‹ค์šด๋กœ๋“œ bundle.js ๋‹ค์šด๋กœ๋“œ ๋ฐ ์‹คํ–‰ ์ถ”๊ฐ€ ๋ฐ์ดํ„ฐ(users.json)๋ฅผ ๋‹ค์šด๋กœ๋“œํ•˜์—ฌ

2023๋…„ 8์›” 25์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

๋‚ด๊ฐ€ 8๊ฐœ์›” ๊ฐ„ ์ค‘์†Œ๊ธฐ์—…์—์„œ ์ผํ•˜๋ฉฐ ๋Š๋‚€ ๊ฒƒ๋“ค (feat - ๋‹ค์–‘ํ•œ ํŒ€์›๋“ค๊ณผ ์ž‘์—…ํ•  ๋•Œ ํŒ)

๋‚˜๋Š” 22๋…„๋„์— ์•ฝ 8๊ฐœ์›” ๋™์•ˆ ์ค‘์†Œ๊ธฐ์—…์—์„œ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋กœ ์ผํ•œ ์ ์ด ์žˆ๋‹ค. ํ•™๊ต์—์„œ ์ง„ํ–‰ํ•˜๋Š” ํ˜„์žฅ์‹ค์Šต ํ”„๋กœ๊ทธ๋žจ์ด ์žˆ๋Š”๋ฐ ์ง€์›์„ ํ•˜๊ฒŒ ๋˜์—ˆ๊ณ  ์šด์ด ์ข‹๊ฒŒ ํ•ฉ๊ฒฉ๋˜์–ด ์ผํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค. ์ฒ˜์Œ์— ํ•ฉ๊ฒฉํ–ˆ์„ ๋•Œ๋Š” ๋ฌด์ฒ™์ด๋‚˜ ๊ธฐ๋ปค๋‹ค. ๊ทธ๋ƒฅ ์ด๋ ฅ์„œ ๊ฒฝํ—˜์‚ฌํ•ญ์— ํ•œ ์ค„ ์ฑ„์šธ ์ˆ˜ ์žˆ๊ฒŒ ๋˜

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

React ๋ Œ๋”๋ง ์ตœ์ ํ™” (feat-useCallback, React.memo)

useMemo๋Š” ํŠน์ • ๊ฒฐ๊ณผ๊ฐ’์„ ์žฌ์‚ฌ์šฉ ํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๋ฐ˜๋ฉด, useCallback์€ ํŠน์ • ํ•จ์ˆ˜๋ฅผ ์ƒˆ๋กœ ๋งŒ๋“ค์ง€ ์•Š๊ณ  ์žฌ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์„๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.์ฒซ ๋ฒˆ์งธ ์ธ์ž์—๋Š”ํ•จ์ˆ˜๋ฅผ, ๋‘ ๋ฒˆ์งธ ์ธ์ž์—๋Š” ์˜์กด์„ฑ ๋ฐฐ์—ด(deps)์„ ์ „๋‹ฌํ•œ๋‹ค. ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ ์•ˆ์— ํ•จ์ˆ˜๊ฐ€ ์„ ์–ธ๋˜์–ด์žˆ์„ ๋•Œ ์ด

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

๐Ÿ“‘ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž ๋ฉด์ ‘์ค€๋น„(2)

ํด๋กœ์ €๋Š” ์ค‘์ฒฉ๋œ ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•ด ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋ฉฐ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ๋๋‚˜๋„ ๋ณ€์ˆ˜์— ์ ‘๊ทผ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ฃผ๋Š” ๊ธฐ๋Šฅ. ์ฃผ์˜ํ•ด์•ผํ• ์ : ๋ฉ”๋ชจ๋ฆฌ ๋ˆ„์ˆ˜ํ˜ธ์ด์ŠคํŒ…์€ ๋ณ€์ˆ˜๋‚˜ ํ•จ์ˆ˜ ์„ ์–ธ์ด ์Šค์ฝ”ํ”„์˜ ์ตœ์ƒ๋‹จ์œผ๋กœ ๋Œ์–ด์˜ฌ๋ ค์ง„ ๊ฒƒ ๊ฐ™์€ ํ˜„์ƒ, ์„ ์–ธ ์ด์ „์— ๋ณ€์ˆ˜๋‚˜ ํ•จ์ˆ˜์— ์ ‘๊ทผํ•˜๋ ค๊ณ  ํ•  ๋•Œ ์˜ค๋ฅ˜๊ฐ€ ๋‚˜์ง€ ์•Š

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

๐Ÿ“‘ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž ๋ฉด์ ‘์ค€๋น„(1)

๊ต‰์žฅํžˆ ์˜ค๋žœ๋งŒ์— ๋ธ”๋กœ๊ทธ ํฌ์ŠคํŒ…์„ ํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค. ๊ฑฐ์˜ 3์ฃผ๋ผ๋Š” ์‹œ๊ฐ„๋™์•ˆ ํ”„๋กœ์ ํŠธ์— ๋ชฐ๋‘ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์—, ๋ธ”๋กœ๊ทธ๋ฅผ ์“ฐ์ง€ ๋ชปํ–ˆ๋‹ค. ํ”„๋กœ์ ํŠธ ๊ธฐ๊ฐ„๋™์•ˆ ๊ฒช์€ ๋ฌธ์ œ๋‚˜ ํ•ด๊ฒฐ๋ฐฉ์•ˆ์€ ์ฐจ์ฐจ ๋ธ”๋กœ๊ทธ์— ํฌ์ŠคํŒ… ํ•  ์˜ˆ์ •์ด๋‹ค. ์˜ค๋Š˜์€ ๋ฉ‹์‚ฌ ์‹œ๊ฐ„์— ๋ฉด์ ‘ ์ค€๋น„ ๊ฐ•์˜ ๋“ค์€ ๊ฒƒ์„ ์ •๋ฆฌ ํ•ด๋ณด์•˜๋‹ค. ๋ฉ‹์‚ฌ ํ”„

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

React hook์˜ ๋ชจ๋“  ๊ฒƒ(6) (Context์™€ useContext)

์ „์—ญ์ƒํƒœ๊ด€๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ, ํŠน์ • ์ปดํฌ๋„ŒํŠธ์—์„œ์˜ state ๋ณ€ํ™”๋ฅผ ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ์—๊ฒŒ ์ „๋‹ฌํ•˜๊ธฐ ์œ„ํ•ด ์—ฌ๋Ÿฌ์ฐจ๋ก€ props๋ฅผ ์ „๋‹ฌํ•ด์•ผํ•จ (์ด๋ฅผ props drilling ์ด๋ผ๊ณ  ๋ถ€๋ฆ„)context๋ฅผ ์ด์šฉํ•˜๋ฉด ๋‹จ๊ณ„๋งˆ๋‹ค ์ผ์ผ์ด props๋ฅผ ๋„˜๊ฒจ์ฃผ์ง€ ์•Š๊ณ ๋„ ์ปดํฌ๋„ŒํŠธ ํŠธ๋ฆฌ

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

React hook์˜ ๋ชจ๋“  ๊ฒƒ(5) (useReducer)

๋“ค์–ด๊ฐ€๊ธฐ์ „, ๋ณดํ†ต ์ „์—ญ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•  ๋•Œ๋Š” useContext ํ›…์„ ์“ฐ๊ธฐ๋ณด๋‹ค๋Š” Recoil์„ ์ผ์—ˆ๊ณ , ์ƒํƒœ ๊ฐ™์€ ๊ฒฝ์šฐ๋Š” useReducer ํ›… ๋Œ€์‹ ์— useState๋ฅผ ๋งŽ์ด ์„ ํƒํ•ด์„œ ์ผ์—ˆ๋‹ค. ์„ ํƒํ•  ๋•Œ ํฐ ์ด์œ ๋Š” ์—†์—ˆ๋‹ค(๊ทธ๋ƒฅ ๋งŽ์ด ์จ๋ดค๋˜ ๊ฒƒ ์ผ์„ ๋ฟ..) ๊ทธ๋ž˜์„œ ์ด๋ฒˆ์—

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

React hook์˜ ๋ชจ๋“  ๊ฒƒ(4) (useState - lazy initialization)

1) useState์™€ lazy initialization https://yceffort.kr/2020/10/IIFE-on-use-state-of-react

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

React hook์˜ ๋ชจ๋“  ๊ฒƒ(3) (useLayoutEffect)

Render: DOM Tree ๋ฅผ ๊ตฌ์„ฑํ•˜๊ธฐ ์œ„ํ•ด ๊ฐ ์—˜๋ฆฌ๋จผํŠธ์˜ ์Šคํƒ€์ผ ์†์„ฑ์„ ๊ณ„์‚ฐํ•˜๋Š” ๊ณผ์ • (Render ์ž์ฒด๊ฐ€ ํ™”๋ฉด์„ ๋‹ค์‹œ ๊ทธ๋ฆฌ๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, Virtual Dom์„ ๊ทธ๋ฆผ์œผ๋กœ์จ ์–ด๋–ค ๋ถ€๋ถ„์„ ๋ฐ”๊ฟ”์•ผํ• ์ง€ ๊ณ„์‚ฐํ•˜๋Š” ๊ณผ์ •์ž„)Paint: ์‹ค์ œ ์Šคํฌ๋ฆฐ์— Layout์„ ํ‘œ์‹œํ•˜๊ณ 

2023๋…„ 5์›” 30์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

React hook์˜ ๋ชจ๋“  ๊ฒƒ(2) (useMemo)

useMemo์—์„œ memo๋Š” memoization์„ ๋œปํ•˜๋Š”๋ฐ ์ด๋Š” ๊ทธ๋Œ€๋กœ ํ•ด์„ํ•˜๋ฉด โ€˜๋ฉ”๋ชจ๋ฆฌ์— ๋„ฃ๊ธฐโ€™๋ผ๋Š” ์˜๋ฏธ์ด๋ฉฐ ์ปดํ“จํ„ฐ ํ”„๋กœ๊ทธ๋žจ์ด ๋™์ผํ•œ ๊ณ„์‚ฐ์„ ๋ฐ˜๋ณตํ•ด์•ผ ํ•  ๋•Œ, ์ด์ „์— ๊ณ„์‚ฐํ•œ ๊ฐ’์„ ๋ฉ”๋ชจ๋ฆฌ์— ์ €์žฅํ•จ์œผ๋กœ์จ ๋™์ผํ•œ ๊ณ„์‚ฐ์˜ ๋ฐ˜๋ณต ์ˆ˜ํ–‰์„ ์ œ๊ฑฐํ•˜์—ฌ ํ”„๋กœ๊ทธ๋žจ ์‹คํ–‰ ์†๋„๋ฅผ ๋น ๋ฅด๊ฒŒ

2023๋…„ 5์›” 29์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

React hook์˜ ๋ชจ๋“  ๊ฒƒ(1) (useRef)

์ „์—๋Š” useState, useEffect๋กœ ๊ฑฐ์˜ 99ํ”„๋กœ์˜ ์ฝ”๋”ฉ์„ ํ–ˆ์—ˆ์ง€๋งŒ, ์ด์ œ๋Š” ์กฐ๊ธˆ ๋‹ฌ๋ผ์ ธ์•ผํ•˜์ง€ ์•Š์„๊นŒ ํ•˜์—ฌ useRef, useMemo, useLayoutEffect ๋“ฑ์˜ ํ›…๋“ค์„ ์ •๋ฆฌํ•˜๋Š” ํฌ์ŠคํŠธ๋ฅผ ์ž‘์„ฑํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค. useRef ํ•จ์ˆ˜๋Š” current ์†์„ฑ์„ ๊ฐ€์ง€

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

JSX, ์ปดํฌ๋„ŒํŠธ ๋ฆฌ์ŠคํŠธ(feat. key, ์žฌ์กฐ์ •), ์กฐ๊ฑด๋ถ€๋ Œ๋”๋ง

JSX๋ž€ JavaScript XML์˜ ์•ฝ์ž๋กœ, ๋ฆฌ์•กํŠธ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ํŠน์ˆ˜ํ•œ ๋ฌธ๋ฒ•. JSX๋Š” HTML๊ณผ ๋งค์šฐ ์œ ์‚ฌํ•˜์ง€๋งŒ ์—„์—ฐํžˆ ๋‹ค๋ฅธ ์–ธ์–ด์ด๋ฉฐ, JavaScript ์ฝ”๋“œ์—์„œ ๋งˆ์น˜ HTML์„ ์‚ฌ์šฉํ•ด UI์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ ๊ฐ™์€ ํŽธ๋ฆฌํ•œ ๊ฐœ๋ฐœ ๊ฒฝํ—˜์„ ์ œ๊ณต๋ชจ๋“  ํ”„๋กœํผํ‹ฐ ์ด๋ฆ„์€ ์นด

2023๋…„ 5์›” 20์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

์—ฌ๋Ÿฌ๊ฐ€์ง€ ํด๋กœ์ € ํ™œ์šฉ์‚ฌ๋ก€

ํด๋กœ์ €๋ž€ ์–ด๋–ค ํ•จ์ˆ˜A์—์„œ ์„ ์–ธํ•œ ๋ณ€์ˆ˜a๋ฅผ ์ฐธ์กฐํ•˜๋Š” ๋‚ด๋ถ€ํ•จ์ˆ˜B๋ฅผ ์™ธ๋ถ€๋กœ ์ „๋‹ฌํ•  ๊ฒฝ์šฐ A์˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ์ข…๋ฃŒ๋œ ์ดํ›„์—๋„ ๋ณ€์ˆ˜a๊ฐ€ ์‚ฌ๋ผ์ง€์ง€ ์•Š๋Š” ํ˜„์ƒ๊ณ ์ฐจํ•จ์ˆ˜ : ํ•จ์ˆ˜๋ฅผ ์ธ์ž๋กœ ๋ฐ›๊ฑฐ๋‚˜ ๋˜๋Š” ํ•จ์ˆ˜๋ฅผ ๋ฐ˜ํ™˜ํ•จ์œผ๋กœ์จ ์ž‘๋™ ํ•˜๋Š” ํ•จ์ˆ˜์ •๋ณด์€๋‹‰: ์–ด๋–ค ๋ชจ๋“ˆ์˜ ๋‚ด๋ถ€๋กœ์ง์— ๋Œ€ํ•ด ์™ธ๋ถ€๋กœ์˜

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

๋“œ๋””์–ด ์ •ํ™•ํžˆ ์•Œ๊ฒŒ๋œ ํด๋กœ์ €์™€ ํด๋กœ์ € ์›๋ฆฌ

ํด๋กœ์ €๋Š” ํ•จ์ˆ˜์™€ ๊ทธ ํ•จ์ˆ˜๊ฐ€ ์„ ์–ธ๋  ๋‹น์‹œ์˜ lexical environment์˜ ์ƒํ˜ธ๊ด€๊ณ„์— ๋”ฐ๋ฅธ ํ˜„์ƒEnvironmentReference(ER): ์‹๋ณ„์ž์— ๋Œ€ํ•œ ์ •๋ณดOuterEnvironmentReference(์™ธ๋ถ€์ •๋ณด): ํ˜„์žฌ ํ˜ธ์ถœ๋œ ํ•จ์ˆ˜๊ฐ€ ์„ ์–ธ๋  ๋‹น์‹œ์˜ Lexcial

2023๋…„ 5์›” 13์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

JavaScript ๋น„๋™๊ธฐ(2) promise, async, await

1. async, await 1) async, await์ด๋ž€? async์™€ await๋Š” ๊ฐ€์žฅ ์ตœ๊ทผ์— ๋‚˜์˜จ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ํŒจํ„ด์œผ๋กœ, ๊ธฐ์กด์˜ ์ฝœ๋ฐฑํ•จ์ˆ˜์™€ ํ”„๋กœ๋ฏธ์Šค ์˜ ๋‹จ์ ์„ ๋ณด์™„ํ•œ ๋ฌธ๋ฒ• 2) Promise ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ์•Œ์•„๋ณด๋Š” Promise๋ฌธ๋ฒ•์˜ ๋‹จ์  Promise์˜ˆ์ œ

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

Node์™€ ๋Ÿฐํƒ€์ž„์— ๋Œ€ํ•ด + CRA๋กœ ๋ฆฌ์•กํŠธํ”„๋กœ์ ํŠธ ์ƒ์„ฑํ•˜๊ธฐ

1. Node.js 1) ๋…ธ๋“œJS๋Š” ๋Ÿฐํƒ€์ž„์„ ์ œ๊ณต ๋…ธ๋“œJS๋Š” ํฌ๋กฌ์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์ธ V8์„ ์‚ฌ์šฉํ•˜์—ฌ ์ž‘์„ฑ๋œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋ฅผ ์ปดํŒŒ์ผ ํ•  ์ˆ˜ ์žˆ๋Š” ํ™˜๊ฒฝ์ธ ๋Ÿฐํƒ€์ž„์„ ์ œ๊ณต 2) ๋Ÿฐํƒ€์ž„ ํ™˜๊ฒฝ? ๋Ÿฐํƒ€์ž„ํ™˜๊ฒฝ: ์ปดํ“จํ„ฐ๊ฐ€ ํ˜„์žฌ ์‹คํ–‰์ค‘์ธ OS์™€ ๋ณ„๊ฐœ๋กœ ํ”„๋กœ์„ธ์Šค๋‚˜ ํ”„๋กœ๊ทธ๋žจ์„ ์œ„

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

CSS ์†์„ฑ์„ ํƒ์ž ์ •๋ฆฌ

1) [attribute] 2) [attribute="value"] ์†์„ฑ๊ฐ’์— "value"๋งŒ ์žˆ๋Š” ์š”์†Œ ์„ ํƒ ์˜ˆ) [class="apple"] 3) [attribute~="value"] ์†์„ฑ๊ฐ’์œผ๋กœ "value"๋ฅผ ๊ฐ€์ง„ ์š”์†Œ ์„ ํƒ ์—ฌ๋Ÿฌ๊ฐœ์˜ ์†์„ฑ๊ฐ’์„ ๊ฐ€์กŒ๋‹คํ•ด๋„ "

2023๋…„ 5์›” 3์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท