ํ ์ ํฌ๊ธฐ๋ก ์๋ผ ๋จน๋ ๋ฆฌ์กํธ(React.js) : ๊ธฐ์ด๋ถํฐ ์ค์ ๊น์ง
๊ฐ๋ ๋ถํฐ ๋ ํนํ ํ๋ก์ ํธ๊น์ง ํจ๊ป ๋ค๋ค๋ณด๋ฉฐ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ฆฌ์กํธ๋ฅผ ์ด ๊ฐ์๋ก ํ ๋ฒ์ ๋๋ด์. ํ์ต์ ์งง๊ฒ, ์์ฉ์ ๊ธธ๊ฒ 18์๊ฐ ๋ถ๋์ All-in-one ๊ฐ์!
์๊ฐ์ 14,589๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ
- ๋ฏธํด๊ฒฐ
์ต์ ํ ๊ด๋ จ ์ง๋ฌธ์์ต๋๋ค (useMemo ๋ฑ)
์๋ ํ์ธ์ ์ต์ ํ ๊ด๋ จํด์ ์ง๋ฌธ์ด ์์ต๋๋คReact 19๋ฒ์ ๋ถํฐ "babel-plugin-react-c
react์ข ์ค
ใป
ํ๋ฃจ ์
0
19
3
- ํด๊ฒฐ
ํ๋ก๋ฐ์ด๋ ์ปดํฌ๋ํธ์ ์์น๋ ์ด๋ค ๊ธฐ์ค์ธ๊ฐ์?
๊ฐ์์์๋ ๋ฆฌํด๋ฌธ ๋ด์ TodoStateContext.Provider ์ปดํฌ๋ํธ๊ฐ ์์์ ์๊ณ ์์์ผ๋ก TodoDispatchContext.Provider์ปดํฌ๋ํธ๊ฐ ์๋์ ์
javascriptreactnode.js์ํ์
ใป
3์ผ ์
1
38
3
- ํด๊ฒฐ
Date ๊ฐ์ฒด์ ๊ด๋ จํ์ฌ ์ง๋ฌธ๋๋ฆฝ๋๋ค.
๐จ ํ๋ ) ์ง๋ฌธํ์๊ธฐ ์ ์ ๊ผญ ์ฝ์ด์ฃผ์ธ์ (10์ด ์์)<
javascriptreactnode.js์ด์ง๋ฏผ
ใป
8์ผ ์
0
55
2
- ํด๊ฒฐ
์ฟ ํฐ์ด ์ ๋ค์ด์์ ๋ฌธ์ ๋๋ฆฝ๋๋ค.
๐จ ํ๋ ) ์ง๋ฌธํ์๊ธฐ ์ ์ ๊ผญ ์ฝ์ด์ฃผ์ธ์ (10์ด ์์)<
๊ฐ์์ฟ ํฐ์์ฑ์ ์์
ใป
8์ผ ์
0
34
2
- ํด๊ฒฐ
๋ฆฌ์กํธ ๊ฐ์ ํ ๊ต์ฌ ์ง๋ฌธ
๋ฆฌ์กํธ ๊ฐ์ ํ ๊ต์ฌ ์ง๋ฌธ์ด ์์ต๋๋ค. ์ค์น๋ฅผ ์์ ์ฑ ๋ฒ์ ์ CRA๋ก ์ค์น๋ฅผ ํ๋๋ฐ<p
javascriptreactnode.jsymckh1005
ใป
11์ผ ์
0
39
2
- ๋ฏธํด๊ฒฐ
์์ ์ฝ๋๊ฐ ์๋์์!
<a target="_blank" rel="noopener noreferrer nofollow" href="https://winterlood.notion.site/a873435b477f433ea04a359f89380cc
javascriptreactnode.js์ ๋ฌผํ๊ธฐ-์ข์๋ธ๋ฃจํ์ฐ์ค
ใป
19์ผ ์
0
58
2
- ๋ฏธํด๊ฒฐ
select a variant ์ ํ์์ javascript์ javascript+react compiler ์ค ๋ฌด์์ ์ ํํด์ผํ๋์? com
npm create vite@latest๋ฅผ ํ๊ณ react๋ฅผ ์ ํ ํ๋๋ฐ ๊ทธ ํ์ ๊ฐ์์์๋ javascript, javascript+swc ์ต์ ์ด ์๋๋ฐ javascript+react compiler๋ผ๋ ์ต์ ์ด ์ถ๊ฐ
javascriptreactnode.js์ ๋ฌผํ๊ธฐ-์ข์๋ฆฌํธ
ใป
ํ ๋ฌ ์
0
63
2
- ํด๊ฒฐ
onMouseEnter ๊ด๋ จ ๋ฌธ์ ๋๋ฆฝ๋๋ค
์๋ ํ์ธ์์ด๋ฒคํธ ํธ๋ค๋ฌ ์ค์ตํ๋๋ฐ onMouseEnter ๊ฐ ์ ์คํ์ด ์ ๋ผ์ ๋ฌธ์๋๋ฆฝ๋๋ค. ๋ฒํผ์ ๋ง์ฐ์ค๋ฅผ ๋๋ฉด ์ฝ์์ด ์ถ๋ ฅ๋๋ค๊ณ ํ์ จ๋๋ฐ<img sr
javascriptreactnode.js์ ๋ฌผํ๊ธฐ-์ข์๋ง๋๋ฝ
ใป
ํ ๋ฌ ์
0
62
3
- ํด๊ฒฐ
๋ฐฐ์ด์ ๋ ๋๋ง ๊ด๋ จ ์ง๋ฌธ ๋๋ฆฝ๋๋ค.
๊ฐ์ฌ๋๊ป์ {number} , {undefined} ์ด๋ฐ ๊ฒ๋ค์ ์์๋ก ๋ณด์ฌ์ฃผ๋ฉด์ ์ด๋ค๊ฑด ๋ ๋๋ง๋๊ณ ์ด๋ค๊ฑด ์ค๋ฅ๋ ์ ๋์ง๋ง ๋ ๋๋ง ๋์ง ์๋๋ค ์๊ธฐ๋ฅผ ํด์ฃผ์ จ๋๋ฐ์<p style="text-align: left"
javascriptreactnode.js๋ง๋๋ฝ
ใป
ํ ๋ฌ ์
0
55
2
- ๋ฏธํด๊ฒฐ
2:40์ด refObj๋ฅผ ์ฝ์๋ก ์ถ๋ ฅ์ ์ค๋ฅ๊ฐ ๋ฐ์ํฉ๋๋ค.
// ๊ฐ๋จํ ํ์๊ฐ์ ํผ // 1. ์ด๋ฆ // 2. ์๋ ์์ผ // 3. ๊ตญ์ // 4. ์๊ธฐ์๊ฐ import { useState , useRef} from "react"; con
javascriptreactnode.jsrumi du
ใป
ํ ๋ฌ ์
0
82
2
- ๋ฏธํด๊ฒฐ
TS, ๋ฆฌ์กํธ ๊ฐ์์ค์ ๋ญ ๋จผ์ ์๊ฐํ๋๊ฒ ์ข์๊น์?
๐จ ํ๋ ) ์ง๋ฌธํ์๊ธฐ ์ ์ ๊ผญ ์ฝ์ด์ฃผ์ธ์ (10์ด ์์)<
javascriptreactnode.jstypescriptcadenzza
ใป
ํ ๋ฌ ์
0
92
2
- ํด๊ฒฐ
useCallback ์ ์ฉํ onCreate, onUpdate, onDelete ํจ์..
AI ๋ต๋ณ์ผ๋ก ํด๊ฒฐ๋์ต๋๋ค!๊ฐ์ ์ ๋ชฉ์ฒ๋ผ ๋ง ๊ทธ๋๋ก ์ฌ์์ฑ ๋ฐฉ์ง์๊ตฐ์..!๋ง์ดํธ ์ ์์ฑ๋ ํจ์๋ฅผ ์ฌ์ฌ์ฉ
javascriptreactnode.jsonus
ใป
ํ ๋ฌ ์
0
53
1
- ํด๊ฒฐ
vs code ์๋์์ฑ๊ด๋ จ ๋ฌธ์
์๋ ํ์ธ์module.exports ๋ require ๋ฑ์ node js ๊ด๋ จ ๊ธฐ๋ฅ์ ์์ฑํ๋๋ฐ ์๊พธ ์๋์์ฑ์ ์ํด์ ๋ค๋ฅธ ๊ธ์๋ก ๋ฐ๋๋ค์<p style
javascriptreactnode.js๋ง๋๋ฝ
ใป
ํ ๋ฌ ์
0
65
2
- ๋ฏธํด๊ฒฐ
91๊ฐ useEffect๋ด์์ ์ํ๋ณํํจ์ ํธ์ถ์ ๋ฐ์ํ๋ ์๋ฌ
Error: Calling setState synchronously within an effect can trigger cascading renders<
javascriptreactnode.js๊น๊น
ใป
ํ ๋ฌ ์
0
104
2
- ํด๊ฒฐ
87๊ฐ ํํฐ ํจ์ ์ง๋ฌธ
getMonthlyData() ํจ์์ ํจํด์ด ๊ฐ์ง๋ ์ฅ์ ์ด ์๋์ง ๊ถ๊ธํฉ๋๋ค.sql์ด๋ผ๋ฉด date ํ์ ์ ์ธ๋ฑ์ค๋ฅผ ๊ฑธ์ด๋์๋ ์๊ธฐ ๋๋ฌธ์ ํฌ๊ธฐ ๋น๊ต๋ฅผ ํ๋๊ฒ ๋ฉ๋
javascriptreactnode.js๊น๊น
ใป
ํ ๋ฌ ์
0
50
2
- ํด๊ฒฐ
useRef, useState count ๋น๊ต
์๋ ํ์ธ์ ๊ฐ์ฌ๋!๊ฐ์์์ useRef๋ ๊ฐ์ด ๋ณ๊ฒฝ๋์์ ๋ ๋ฆฌ๋ ๋๋ง์ ๋ฐ์์ํค์ง ์์ผ๋ฏ๋ก ๊ฐ์ด๋ DOM ์์๋ฅผ ์ฐธ๊ณ ํ๊ณ ์ถ์ ๋ ์ฌ์ฉํ๋ค๊ณ ํ์ จ๋๋ฐ์.<
javascriptreactnode.jsonus
ใป
ํ ๋ฌ ์
0
39
2
- ํด๊ฒฐ
์๋๋ค๊ณ ํ๋ ์ด์ ๊ฐ ๋ฌด์์ด์๋์ง ๋ชจ๋ฅด๊ฒ ์ต๋๋ค
์์ 8๋ถ 57์ด์ onClick ์ด๋ฒคํธ์ ๊ฒฐ๊ณผ๊ฐ์ ๋ฃ์ผ๋ฉด ์๋๋ค๊ณ ๋ฐฐ์ ๋๋ฐ ๊ทธ๊ฒ ์ด๋์์ ๊ทธ๋ฌ๋์ง ๊ธฐ์ต์ด ์๋ฉ๋๋ค ใ ใ
javascriptreactnode.jslogipick
ใป
ํ ๋ฌ ์
0
50
2
- ํด๊ฒฐ
85๊ฐ์์ ๊ฐ์ฒด๋ฅผ ์ ํด๋์ค๋ก ๋ง๋ค์ด์ new ํ์ง ์๋๊ฑด์ง ๊ถ๊ธํฉ๋๋ค.
๊ฐ์ฒด ๋ฆฌํฐ๋ด๋ก ๋ฃ๋๊ฒ๋ณด๋ค ์ธ์คํด์ค๋ฅผ ๋ฃ๋๊ฒ ๋ ์ข์ ๋ณด์ด๋๋ฐ, ํน์ ์ด๊ฒ ์ํฐํจํด์ธ๊ฐ์?
javascriptreactnode.js๊น๊น
ใป
ํ ๋ฌ ์
0
52
2
- ํด๊ฒฐ
ํฌ๋๋ฆฌ์คํธ ์ค์ต์ ์ถฉ์คํ ์งํํ ์ํ์์ ๊ฐ์ ์ผ๊ธฐ์ฅ ์ค์ต์ ๋ฐ๋ผํ ํ์๊ฐ ์์๊น์?
ํ์ด์ง ๋ผ์ฐํ ์ ๋ํด์ ์ถฉ๋ถํ ์ดํดํ๊ณ 84๊ฐ ์ดํ๋ก๋ ํฌ๋๋ฆฌ์คํธ ์ค์ต์ ๋ต์ต์ด ๋ ๊ฒ ๊ฐ์์ ์ง๋ฌธํฉ๋๋ค.์ถ๊ฐ๋ ๋ด์ฉ์ด ์์ผ๋ฉด ์ค์ต์ ๋ฐ๋ผํ๊ฒ ์ง๋ง, ์ด๋ฏธ ํ๋ ๋ด์ฉ
javascriptreactnode.js๊น๊น
ใป
ํ ๋ฌ ์
0
37
2
- ํด๊ฒฐ
83๊ฐ css ์ง๋ฌธ์ ๋๋ค
์๋ ์ฝ๋๋ก ์ถฉ๋ถํ๋ฐ .header-center { width: 50%; font-size: 24px; justify-content: cente
javascriptreactnode.js๊น๊น
ใป
ํ ๋ฌ ์
0
42
2






