ํ ์ ํฌ๊ธฐ๋ก ์๋ผ ๋จน๋ ๋ฆฌ์กํธ(React.js) : ๊ธฐ์ด๋ถํฐ ์ค์ ๊น์ง
๊ฐ๋ ๋ถํฐ ๋ ํนํ ํ๋ก์ ํธ๊น์ง ํจ๊ป ๋ค๋ค๋ณด๋ฉฐ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ฆฌ์กํธ๋ฅผ ์ด ๊ฐ์๋ก ํ ๋ฒ์ ๋๋ด์. ํ์ต์ ์งง๊ฒ, ์์ฉ์ ๊ธธ๊ฒ 18์๊ฐ ๋ถ๋์ All-in-one ๊ฐ์!
์๊ฐ์ 14,905๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ
- ๋ฏธํด๊ฒฐ
useEffect์ lifecycle๋ฌธ์
useEffect ๊ฐ ํน์ ๋ณ์๊ฐ์ ์ถ์ ํ๋ค๊ฐ ๋ฐ๋๋ฉด ์คํ๋๋ ํจ์๋ฅผ ๋ฑ๋กํ๋ ๊ธฐ๋ฅ์ด๋ผ๊ณ ๋ฐฐ์ ๋๋ฐ deps ์์กด์ฑ๋ฐฐ์ด์๋ค๊ฐ state ๋ง ๋ฃ์์ ์๋๊ฑด๊ฐ์? ์๋๋ฉด props ๋ useRef ๋ณ์
javascriptreactnode.js๊ณต๋ถํ๋์ด
ใป
14์ผ ์
0
35
2
- ํด๊ฒฐ
ํ๋ก ํธ์๋ ํ์ต ์์ค ๋ฌธ์
์๋ ํ์ธ์.ํ๋ก ํธ์๋ ์ง๋ฌด๋ก ์ทจ์ ํ๊ธธ ํฌ๋งํด ๊ฐ์ฌ๋์ React,
javascriptreactnode.js@V
ใป
16์ผ ์
0
47
2
- ๋ฏธํด๊ฒฐ
๋ฆฌ์กํธ ์ฑํฐ๋ณ ์ฝ๋์์ eslint ์ค์ ํ์ผ์ด ์์ด์
<a target="_blank" rel="noopener noreferrer nofollow" href="https://winterlood.notion.site/a873435b477f433ea04a359f89380cc
javascriptreactnode.js๊ณต๋ถํ๋์ด
ใป
19์ผ ์
0
53
2
- ๋ฏธํด๊ฒฐ
๋ฐ์ดํฐ ๋ก๋ฉ์ค ํ๋ฉด๋ง ๊ณ์ ๋์์!!
vercel์ ๋ฐฐํฌ ํ production ๋งํฌ๋ก ์ ์ํ๋ฉด ๋ฐ์ดํฐ ๋ก๋ฉ์ค ํ๋ฉด๋ง ๋์ต๋๋ค. ์ฝ๋ ํ๋ฒ ํ์ธ ๋ถํ๋๋ ค์! vercel ์ฃผ์<b
javascriptreactnode.js์ ์ฐ๊ฒฝ
ใป
ํ ๋ฌ ์
0
57
2
- ํด๊ฒฐ
ํผ๋ธ๋ฆฌ์ ์ผ๊ฒฝ์ฐ ์ด๋์ ๋ ์์ค๊น์ง ๊ฐ์๋ฅผ ๋ค์ด์ผํ ๊น์
์๋ ํ์ธ์ ํผ๋ธ๋ฆฌ์ ๋ก ์ทจ์ ์ ์ํด ๊ณต๋ถ์ค์ ๋๋ค.์๋ฐ์คํฌ๋ฆฝ๊ธฐ์ด ์ต๋ํ์ ๋ฆฌ์ํธ ๊ณต๋ถ๋ฅผ ์ด์ ์ฒ์ ์์ํ๋๋ฐ์. ํ๋ก ํธ์ค๋๊ฐ๋ฐ์๋ก ๊ฐ๊ฑด ์๋๋ผ์<p style
javascriptreactnode.jsukekeke
ใป
ํ ๋ฌ ์
0
83
2
- ๋ฏธํด๊ฒฐ
์ดํ์ ์ปค๋ฆฌํ๋ผ ๋ฌธ์
ํ๋ก ํธ์๋๋ฅผ ๊ณต๋ถํ๋ ค๊ณ ํ๋ ๋ฐฑ์๋ ๊ฐ๋ฐ์์ ๋๋ค. js -> react -> next.js ์์์ ๋ฐํ ์ ํ์ต๋ฐฉ์์ ์ ์๊ฒ ์กฐ๊ธ ์ง๋ฃจํด์</s
javascriptreactnode.jsjungo
ใป
ํ ๋ฌ ์
0
103
2
- ๋ฏธํด๊ฒฐ
์ค์ฌํ๊ฒฝ ์ค์ ์์ saveํ console.log ๋ถ๋ถ์ด ์๋ก๊ณ ์นจ์ด ์๋๋ํ์์ ๋๋ค.
์ค์ฌํ๊ฒฝ ์ค์ ์์ saveํ console.log ๋ถ๋ถ์ด ์๋ก๊ณ ์นจ์ด ์๋๋ํ์์ ๋๋ค.์ค์ ์ด ์๋ชป๋์๋์ง... F5๋ก ์๋ก๊ณ ์นจ์ ํ๋ฉด ๋ณ๊ฒฝ์ด์์ง๋ง SAVE ๋๋ ๋
javascriptreactnode.jsforyousa
ใป
2๋ฌ ์
0
53
2
- ํด๊ฒฐ
์ต์ ํ ๊ด๋ จ ์ง๋ฌธ์์ต๋๋ค (useMemo ๋ฑ)
์๋ ํ์ธ์ ์ต์ ํ ๊ด๋ จํด์ ์ง๋ฌธ์ด ์์ต๋๋คReact 19๋ฒ์ ๋ถํฐ "babel-plugin-react-c
react์ข ์ค
ใป
2๋ฌ ์
0
86
3
- ํด๊ฒฐ
ํ๋ก๋ฐ์ด๋ ์ปดํฌ๋ํธ์ ์์น๋ ์ด๋ค ๊ธฐ์ค์ธ๊ฐ์?
๊ฐ์์์๋ ๋ฆฌํด๋ฌธ ๋ด์ TodoStateContext.Provider ์ปดํฌ๋ํธ๊ฐ ์์์ ์๊ณ ์์์ผ๋ก TodoDispatchContext.Provider์ปดํฌ๋ํธ๊ฐ ์๋์ ์
javascriptreactnode.js์ํ์
ใป
2๋ฌ ์
1
82
3
- ํด๊ฒฐ
Date ๊ฐ์ฒด์ ๊ด๋ จํ์ฌ ์ง๋ฌธ๋๋ฆฝ๋๋ค.
๐จ ํ๋ ) ์ง๋ฌธํ์๊ธฐ ์ ์ ๊ผญ ์ฝ์ด์ฃผ์ธ์ (10์ด ์์)<
javascriptreactnode.js์ด์ง๋ฏผ
ใป
2๋ฌ ์
0
87
2
- ํด๊ฒฐ
์ฟ ํฐ์ด ์ ๋ค์ด์์ ๋ฌธ์ ๋๋ฆฝ๋๋ค.
๐จ ํ๋ ) ์ง๋ฌธํ์๊ธฐ ์ ์ ๊ผญ ์ฝ์ด์ฃผ์ธ์ (10์ด ์์)<
๊ฐ์์ฟ ํฐ์์ฑ์ ์์
ใป
2๋ฌ ์
0
62
2
- ํด๊ฒฐ
๋ฆฌ์กํธ ๊ฐ์ ํ ๊ต์ฌ ์ง๋ฌธ
๋ฆฌ์กํธ ๊ฐ์ ํ ๊ต์ฌ ์ง๋ฌธ์ด ์์ต๋๋ค. ์ค์น๋ฅผ ์์ ์ฑ ๋ฒ์ ์ CRA๋ก ์ค์น๋ฅผ ํ๋๋ฐ<p
javascriptreactnode.jsymckh1005
ใป
2๋ฌ ์
0
60
2
- ๋ฏธํด๊ฒฐ
์์ ์ฝ๋๊ฐ ์๋์์!
<a target="_blank" rel="noopener noreferrer nofollow" href="https://winterlood.notion.site/a873435b477f433ea04a359f89380cc
javascriptreactnode.js์ ๋ฌผํ๊ธฐ-์ข์๋ธ๋ฃจํ์ฐ์ค
ใป
3๋ฌ ์
0
78
2
- ๋ฏธํด๊ฒฐ
select a variant ์ ํ์์ javascript์ javascript+react compiler ์ค ๋ฌด์์ ์ ํํด์ผํ๋์? com
npm create vite@latest๋ฅผ ํ๊ณ react๋ฅผ ์ ํ ํ๋๋ฐ ๊ทธ ํ์ ๊ฐ์์์๋ javascript, javascript+swc ์ต์ ์ด ์๋๋ฐ javascript+react compiler๋ผ๋ ์ต์ ์ด ์ถ๊ฐ
javascriptreactnode.js์ ๋ฌผํ๊ธฐ-์ข์๋ฆฌํธ
ใป
3๋ฌ ์
0
110
2
- ํด๊ฒฐ
onMouseEnter ๊ด๋ จ ๋ฌธ์ ๋๋ฆฝ๋๋ค
์๋ ํ์ธ์์ด๋ฒคํธ ํธ๋ค๋ฌ ์ค์ตํ๋๋ฐ onMouseEnter ๊ฐ ์ ์คํ์ด ์ ๋ผ์ ๋ฌธ์๋๋ฆฝ๋๋ค. ๋ฒํผ์ ๋ง์ฐ์ค๋ฅผ ๋๋ฉด ์ฝ์์ด ์ถ๋ ฅ๋๋ค๊ณ ํ์ จ๋๋ฐ<img sr
javascriptreactnode.js์ ๋ฌผํ๊ธฐ-์ข์๋ง๋๋ฝ
ใป
3๋ฌ ์
0
93
3
- ํด๊ฒฐ
๋ฐฐ์ด์ ๋ ๋๋ง ๊ด๋ จ ์ง๋ฌธ ๋๋ฆฝ๋๋ค.
๊ฐ์ฌ๋๊ป์ {number} , {undefined} ์ด๋ฐ ๊ฒ๋ค์ ์์๋ก ๋ณด์ฌ์ฃผ๋ฉด์ ์ด๋ค๊ฑด ๋ ๋๋ง๋๊ณ ์ด๋ค๊ฑด ์ค๋ฅ๋ ์ ๋์ง๋ง ๋ ๋๋ง ๋์ง ์๋๋ค ์๊ธฐ๋ฅผ ํด์ฃผ์ จ๋๋ฐ์<p style="text-align: left"
javascriptreactnode.js๋ง๋๋ฝ
ใป
3๋ฌ ์
0
73
2
- ๋ฏธํด๊ฒฐ
2:40์ด refObj๋ฅผ ์ฝ์๋ก ์ถ๋ ฅ์ ์ค๋ฅ๊ฐ ๋ฐ์ํฉ๋๋ค.
// ๊ฐ๋จํ ํ์๊ฐ์ ํผ // 1. ์ด๋ฆ // 2. ์๋ ์์ผ // 3. ๊ตญ์ // 4. ์๊ธฐ์๊ฐ import { useState , useRef} from "react"; con
javascriptreactnode.jsrumi du
ใป
3๋ฌ ์
0
114
2
- ๋ฏธํด๊ฒฐ
TS, ๋ฆฌ์กํธ ๊ฐ์์ค์ ๋ญ ๋จผ์ ์๊ฐํ๋๊ฒ ์ข์๊น์?
๐จ ํ๋ ) ์ง๋ฌธํ์๊ธฐ ์ ์ ๊ผญ ์ฝ์ด์ฃผ์ธ์ (10์ด ์์)<
javascriptreactnode.jstypescriptcadenzza
ใป
3๋ฌ ์
0
138
2
- ํด๊ฒฐ
useCallback ์ ์ฉํ onCreate, onUpdate, onDelete ํจ์..
AI ๋ต๋ณ์ผ๋ก ํด๊ฒฐ๋์ต๋๋ค!๊ฐ์ ์ ๋ชฉ์ฒ๋ผ ๋ง ๊ทธ๋๋ก ์ฌ์์ฑ ๋ฐฉ์ง์๊ตฐ์..!๋ง์ดํธ ์ ์์ฑ๋ ํจ์๋ฅผ ์ฌ์ฌ์ฉ
javascriptreactnode.jsonus
ใป
3๋ฌ ์
0
71
1
- ํด๊ฒฐ
vs code ์๋์์ฑ๊ด๋ จ ๋ฌธ์
์๋ ํ์ธ์module.exports ๋ require ๋ฑ์ node js ๊ด๋ จ ๊ธฐ๋ฅ์ ์์ฑํ๋๋ฐ ์๊พธ ์๋์์ฑ์ ์ํด์ ๋ค๋ฅธ ๊ธ์๋ก ๋ฐ๋๋ค์<p style
javascriptreactnode.js๋ง๋๋ฝ
ใป
3๋ฌ ์
0
118
2






