React ์๋ฒฝ ๋ง์คํฐ: ๊ธฐ์ด ๊ฐ๋ ๋ถํฐ ๋ฆฐ์บ๋ฒ์ค ํ๋ก์ ํธ๊น์ง
React๋ฅผ ์ฒ์ ๋ฐฐ์ฐ์๋์? ์ด ๊ฐ์๋ก ํ๋๋ก ๋ฆฌ์กํธ ๊ธฐ์ด๋ฅผ ๋ค์ง๊ณ , ๋ฆฐ์บ๋ฒ์ค ํ๋ก์ ํธ๋ฅผ ํตํด ์ค๋ฌด ๊ฒฝํ์ ์์๋ณด์ธ์. ๊ทธ๋ฌ๋ฉด ์์ ์๊ฒ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ก ์ทจ์ ํ ์ ์์ด์!
์๊ฐ์ 813๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ
- ๋ฏธํด๊ฒฐ
๋ญํ๋ ์ฌ์ญค๋ด๋ ๋ ๊น์?
์๋ ํ์ธ์๋ณต์ตํ๋ฌ ๋ค์ด์์ต๋๋ค.๊ทธ๋์ ๋ ์ฝ๋ฉ๋.. ๋ญํ๋ ์ฌ์ญค๋ด๋..<p style="text-
reactReact-Contextreact-routertailwindcssreact-querybluescreen
ใป
2๋ฌ ์
0
46
1
- ๋ฏธํด๊ฒฐ
์๋ ํ์ธ์ ์ง๋ฌธ์ด ์์ต๋๋ค.
์๋ ํ์ธ์ ๊ฐ์๋ฅผ ๋๋ฌด ์ ๋ณด๊ณ ์์ต๋๋ค. ๊ฐ์๋ฅผ ๋ณด๋ค๊ฐ ๋ฌธ๋ ๊ถ๊ธํ์ ์ด ์๋๋ฐ ํ๋ก ํธ์๋ ์ทจ์ ์ ์ํด์ ์ด๋์ ๋๋ก ์๊ณ ์์ด์ผ ๋๋์ง ๊ทธ๋ฆฌ๊ณ ์ด๋๊น์ง ๊ณต๋ถ๋ฅผ ํ๊ณ ํ์ฌ๋ฅผ ์ง์์ ํด์ผ๋๋์ง ๊ถ๊ธํ๋๋ผ๊ตฌ์. ๋ญ๊ฐ ์๋ฒฝํ
reactReact-Contextreact-routertailwindcssreact-query๋ถ๋๋ฌ์ด ์กฑ์ ๋น
ใป
2๋ฌ ์
0
45
2
- ๋ฏธํด๊ฒฐ
์ง๋ฌธ : ์ญ์ ๋ฒํผ ์๊ท๋จผํธ (id)
๊ฐ์๊ธฐ ์ดํด๊ฐ.. .์ด๊ฒ ์ .. ใ กใ ก;;; <img src="https://cdn.inflearn.com/public/files/po
reactReact-Contextreact-routertailwindcssreact-query์์ฑ์ ์์
ใป
2๋ฌ ์
0
43
1
- ๋ฏธํด๊ฒฐ
Tailwind ๋ฒ์ ํ์ธ
Tailwind ๋ฒ์ ํ์ธ <img src="https://cdn.inflearn.com/public/files/posts/b538e78f-10ee-4881-9ed6-09b8872c5213/
reactReact-Contextreact-routertailwindcssreact-querybluescreen
ใป
2๋ฌ ์
0
51
1
- ๋ฏธํด๊ฒฐ
align-items ์ ๋ ฌ
๋งค๋ฒ ๊ฐ์๋ฅผ ๋ณด๋ฉด์ ๋ฐ๋ผ ํ๋๋ฐ๋งค๋ฒ ๊ฐ์ ๊ฐ์๋ฅผ ๋ณต์ต์ ํด๋..ํ์..css ํ์ผ ์๋ฌด๋ฆฌ ๋๋ ค๋ค ๋ด๋..
reactReact-Contextreact-routertailwindcssreact-querybluescreen
ใป
2๋ฌ ์
0
45
2
- ๋ฏธํด๊ฒฐ
vite ๋ช ๋ น์ด๋ก ํ๋ก์ ํธ๋ฅผ ๋ง๋ค์์ต๋๋ค. (vscode)
vite ๋ช ๋ น์ด๋ก ํ๋ก์ ํธ ์์ฑ๋ (ํ์ฅ ํ๋ก๊ทธ๋จ ๋ฏธ์ค์น)<p style="text-alig
reactReact-Contextreact-routertailwindcssreact-querybluescreen
ใป
2๋ฌ ์
0
67
1
- ๋ฏธํด๊ฒฐ
31. ๊ฐ์ฒด ์ ๋ฐ์ดํธ ํ๊ธฐ - 10:15 ์ง๋ฌธ
์๋ ํ์ธ์, ํ์์ ์ง์ฝ๋ฉ๋ ๊ฐ์ ์ ๋ฃ๊ณ ์์ต๋๋ค.setForm์์ ์ค๋ธ์ ํธ๋ก title๋ง ์ ๋ฐ์ดํธ ํด์ฃผ๋๋ผ๋ ๊ธฐ์กด์ description ๊ฐ์ ์ด๋ป๊ฒ ๊ทธ๋๋ก
reactReact-Contextreact-routertailwindcssreact-queryJaehyeon Lee
ใป
2๋ฌ ์
1
45
2
- ๋ฏธํด๊ฒฐ
๊ฐ์๊ต์, ๋ด์ฉ ์ธ์ฉํด์ ๋ธ๋ก๊ทธ ๊ธ ์์ฑ
ํด๋น๊ฐ์์ ๊ต์ ๋ด์ฉ๊ณผ ๊ฐ์๋ฅผ ๋ณด๋ฉฐ ์ดํดํ ๋ถ๋ถ์ ๋ธ๋ก๊ทธ์ ์ ๋ฆฌํด์ ๊ธ์ ์จ๋ ๋๋์ง ๊ถ๊ธํฉ๋๋ค!
reactReact-Contextreact-routertailwindcssreact-queryseungheon lee
ใป
3๋ฌ ์
1
58
2
- ๋ฏธํด๊ฒฐ
์ด๋ฏธ์ง๊ฐ ์ถ๋ ฅ๋์ง ์์์
<img src="https://cdn.inflearn.com/public/files/posts/7e478dc6-5fe5-4e52-af76-388ed2d8d779/9f669ca6-0b94-43f5-b90d-e02eb6489337.webp" media-type="img"
reactReact-Contextreact-routertailwindcssreact-query์์ฑ์ ์์
ใป
4๋ฌ ์
1
61
2
- ๋ฏธํด๊ฒฐ
๊ฐ์์ ๋ง๋ค์ด์ง ์ฝ๋๊ฐ ๋ฌ๋ผ์
<img src="https://cdn.inflearn.com/public/files/posts/6a3e6085-d0a4-4090-baf0-b1cbd94344b1/1e7a4565-a9be-4a82-8894-c34e2ffed44e.webp" media-type="img"
reactReact-Contextreact-routertailwindcssreact-queryใ ใ
ใป
4๋ฌ ์
0
65
3
- ํด๊ฒฐ
AI์ CSS ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๊ถํฉ
์๋ ํ์ธ์.CSS ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ํ ๋น๊ต ์ค๋ช ๊น์ง ๋๋ฌด ๊ฐ์ฌํฉ๋๋ค.์์ผ๋ก AI Agent<
reactReact-Contextreact-routertailwindcssreact-query์ถฉ์ ์ค
ใป
5๋ฌ ์
0
81
1
- ๋ฏธํด๊ฒฐ
onClick ์ด๋ฒคํธ์ ํจ์ ๋๊ธธ ๋
์๋ ํ์ธ์ ๊ฐ์ฌ๋. ๊ฐ์ ์ ๋ฃ๊ณ ์์ต๋๋ค. ๋ฐฐ์ด ์ ๋ฐ์ดํธํ๊ธฐ 1ํ ๊ฐ์ ๋ณด๊ณ ์๋๋ฐ ๊ถ๊ธํ ์ ์ด ์์ต๋๋ค. <
reactr11s
ใป
6๋ฌ ์
0
57
1
- ๋ฏธํด๊ฒฐ
๋ฆฐ์บ๋ฒ์ค ๊ธฐ๋ฅ ๊ตฌํ์ ์ ๋ชปํ๋์.... ๊ตฌํํ๊ณ ์ถ์ต๋๋ค...
์ ๋ฐฐํฌ์ ์ ๊ธฐ๋ฅ ๋ค ๊ตฌํํ๊ณ ํ๋๋ฐ, ๋ฐฐํฌํ๋ฉด ์ด๋ฐ ๊ธฐ๋ฅ์ ๋ชป ์ฐ๊ณ , ์ถ๊ฐ๋ก ํ์ด์ด๋ฒ ์ด์ค ๋ฑ์ ์ฌ์ฉํด์ผ๋ง ๊ฐ๋ฅํ๊ฐ์....์ ๋ฐฉ๋ฒ์ด ์๋์?<p styl
reactReact-Contextreact-routertailwindcssreact-query์ฃผ๋ณ๊ท
ใป
7๋ฌ ์
0
91
1
- ๋ฏธํด๊ฒฐ
notes ์์ ์ฝ๊ธฐ ์ค๋ฅ
<img src="https://cdn.inflearn.com/public/files/posts/1a8ac4ff-12c2-4856-8020-1824a981e167/9b65e2e1-c234-4d25-81b9-e1ee8d8423e5.png" media-type="img"
reactReact-Contextreact-routertailwindcssreact-query์ฃผ๋ณ๊ท
ใป
7๋ฌ ์
0
59
1
- ๋ฏธํด๊ฒฐ
Object.assign ๋ฌธ๋ฒ
function create(baseURL, options) { const instance = axios.create( Object.assign({ // baseURL: base
reactReact-Contextreact-routertailwindcssreact-query์ฃผ๋ณ๊ท
ใป
7๋ฌ ์
0
56
1
- ๋ฏธํด๊ฒฐ
react-router ์ ํ ๊ธฐ๋ฅ ์ํจ
lean-canvas ํ๋ก์ ํธ ์์ฑ๋ถํฐ react-router-dom ์ค์นํ๊ธฐ๊น์ง ์ค๊ฐ์ค๊ฐ ๋ณด์ด๋ package.json ์ ๋ณด๊ณ ์ ๋ถ ๋ฒ์ ์ ๋ง์ท๋๋ฐ,react
reactReact-Contextreact-routertailwindcssreact-query์์ฑ์ ์์
ใป
7๋ฌ ์
0
48
1
- ๋ฏธํด๊ฒฐ
react-router-dom@6.25.1
์ ๋ชฉ๊ณผ ๊ฐ์ด npm i react-router-dom@6.25.1๋ก ํด์ package.json ์๋</
reactReact-Contextreact-routertailwindcssreact-query์์ฑ์ ์์
ใป
7๋ฌ ์
0
41
1
- ๋ฏธํด๊ฒฐ
React Router ์ต์ ์คํ
react router ์ฌ์ดํธ์์ ์ต์ ์คํ์ ๋ํ ํํ ๋ฆฌ์ผ์ ๋ณด๋ฉด, framework mode, data mode, declarative mode 3๊ฐ์ง๋ก ๋๋
reactReact-Contextreact-routertailwindcssreact-query์ฃผ๋ณ๊ท
ใป
7๋ฌ ์
0
175
1
- ๋ฏธํด๊ฒฐ
Immer ์์ filter, map ์ฌ์ฉ
์ง๋๊ฐ์์์ useImmer์์ ํ์ฉํ updateํจ์์์๋ push, splice์ ๊ฐ์ ํ์ฌ์ ๊ฐ์ฒด๋ฅผ ๋ณํ์ํค๋ api๋ฅผ ํ์ฉํ์์ต๋๋ค.๊ทธ๋์ immer ๊ฐ
reactReact-Contextreact-routertailwindcssreact-query์ฃผ๋ณ๊ท
ใป
7๋ฌ ์
0
49
1
- ๋ฏธํด๊ฒฐ
vite ์ค์น์ ๋ํด ์ง๋ฌธ์์ต๋๋ค.
์๋ ํ์ธ์ vite๋ฅผ ์ค์นํด์ ๋ฆฌ์กํธ๋ฅผ ์ ์ฌ์ฉํ๋ค๊ฐ ์ต๊ทผ vite๋ฅผ ์ค์นํ๊ณ npm run dev๋ก ์คํ์ ํ๋ ์๋ ์ด๋ฏธ์ง์ ๊ฐ์ ์๋ฌ๊ฐ ๊ณ์ ๋๋๋ผ๊ตฌ์. ์ฐพ์๋ณด๋ ๋ฒ์ ๊ณผ ๊ด๋ จ์ด ๋์ด ์๋๊ฑฐ ๊ฐ์๋ฐ ์๋ฌด๋ฆฌ ์ฐพ์๋ด๋
reactReact-Contextreact-routertailwindcssreact-query๋ถ๋๋ฌ์ด ์กฑ์ ๋น
ใป
7๋ฌ ์
0
69
2






