React ์๋ฒฝ ๋ง์คํฐ: ๊ธฐ์ด ๊ฐ๋ ๋ถํฐ ๋ฆฐ์บ๋ฒ์ค ํ๋ก์ ํธ๊น์ง
React๋ฅผ ์ฒ์ ๋ฐฐ์ฐ์๋์? ์ด ๊ฐ์๋ก ํ๋๋ก ๋ฆฌ์กํธ ๊ธฐ์ด๋ฅผ ๋ค์ง๊ณ , ๋ฆฐ์บ๋ฒ์ค ํ๋ก์ ํธ๋ฅผ ํตํด ์ค๋ฌด ๊ฒฝํ์ ์์๋ณด์ธ์. ๊ทธ๋ฌ๋ฉด ์์ ์๊ฒ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ก ์ทจ์ ํ ์ ์์ด์!
์๊ฐ์ 871๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ
- ๋ฏธํด๊ฒฐ
์คํ?
2 ํด์ฆ ๊ฐ์์์ ์ค๋ช ๋ Create React App(CRA)๊ณผ Bit์ ๋น๊ต ์ค, Bit์ ํน์ง์ผ๋ก ์ธ๊ธ๋ ๊ฒ์ ๋ฌด์
reactReact-Contextreact-routertailwindcssreact-querykrug
ใป
21์ผ ์
0
29
1
- ๋ฏธํด๊ฒฐ
๋ญํ๋ ์ฌ์ญค๋ด๋ ๋ ๊น์?
์๋ ํ์ธ์๋ณต์ตํ๋ฌ ๋ค์ด์์ต๋๋ค.๊ทธ๋์ ๋ ์ฝ๋ฉ๋.. ๋ญํ๋ ์ฌ์ญค๋ด๋..<p style="text-
reactReact-Contextreact-routertailwindcssreact-querybluescreen
ใป
4๋ฌ ์
0
70
1
- ๋ฏธํด๊ฒฐ
์๋ ํ์ธ์ ์ง๋ฌธ์ด ์์ต๋๋ค.
์๋ ํ์ธ์ ๊ฐ์๋ฅผ ๋๋ฌด ์ ๋ณด๊ณ ์์ต๋๋ค. ๊ฐ์๋ฅผ ๋ณด๋ค๊ฐ ๋ฌธ๋ ๊ถ๊ธํ์ ์ด ์๋๋ฐ ํ๋ก ํธ์๋ ์ทจ์ ์ ์ํด์ ์ด๋์ ๋๋ก ์๊ณ ์์ด์ผ ๋๋์ง ๊ทธ๋ฆฌ๊ณ ์ด๋๊น์ง ๊ณต๋ถ๋ฅผ ํ๊ณ ํ์ฌ๋ฅผ ์ง์์ ํด์ผ๋๋์ง ๊ถ๊ธํ๋๋ผ๊ตฌ์. ๋ญ๊ฐ ์๋ฒฝํ
reactReact-Contextreact-routertailwindcssreact-query๋ถ๋๋ฌ์ด ์กฑ์ ๋น
ใป
4๋ฌ ์
0
55
2
- ๋ฏธํด๊ฒฐ
์ง๋ฌธ : ์ญ์ ๋ฒํผ ์๊ท๋จผํธ (id)
๊ฐ์๊ธฐ ์ดํด๊ฐ.. .์ด๊ฒ ์ .. ใ กใ ก;;; <img src="https://cdn.inflearn.com/public/files/po
reactReact-Contextreact-routertailwindcssreact-query์์ฑ์ ์์
ใป
4๋ฌ ์
0
50
1
- ๋ฏธํด๊ฒฐ
Tailwind ๋ฒ์ ํ์ธ
Tailwind ๋ฒ์ ํ์ธ <img src="https://cdn.inflearn.com/public/files/posts/b538e78f-10ee-4881-9ed6-09b8872c5213/
reactReact-Contextreact-routertailwindcssreact-querybluescreen
ใป
4๋ฌ ์
0
62
1
- ๋ฏธํด๊ฒฐ
align-items ์ ๋ ฌ
๋งค๋ฒ ๊ฐ์๋ฅผ ๋ณด๋ฉด์ ๋ฐ๋ผ ํ๋๋ฐ๋งค๋ฒ ๊ฐ์ ๊ฐ์๋ฅผ ๋ณต์ต์ ํด๋..ํ์..css ํ์ผ ์๋ฌด๋ฆฌ ๋๋ ค๋ค ๋ด๋..
reactReact-Contextreact-routertailwindcssreact-querybluescreen
ใป
4๋ฌ ์
0
50
2
- ๋ฏธํด๊ฒฐ
vite ๋ช ๋ น์ด๋ก ํ๋ก์ ํธ๋ฅผ ๋ง๋ค์์ต๋๋ค. (vscode)
vite ๋ช ๋ น์ด๋ก ํ๋ก์ ํธ ์์ฑ๋ (ํ์ฅ ํ๋ก๊ทธ๋จ ๋ฏธ์ค์น)<p style="text-alig
reactReact-Contextreact-routertailwindcssreact-querybluescreen
ใป
4๋ฌ ์
0
79
1
- ๋ฏธํด๊ฒฐ
31. ๊ฐ์ฒด ์ ๋ฐ์ดํธ ํ๊ธฐ - 10:15 ์ง๋ฌธ
์๋ ํ์ธ์, ํ์์ ์ง์ฝ๋ฉ๋ ๊ฐ์ ์ ๋ฃ๊ณ ์์ต๋๋ค.setForm์์ ์ค๋ธ์ ํธ๋ก title๋ง ์ ๋ฐ์ดํธ ํด์ฃผ๋๋ผ๋ ๊ธฐ์กด์ description ๊ฐ์ ์ด๋ป๊ฒ ๊ทธ๋๋ก
reactReact-Contextreact-routertailwindcssreact-queryJaehyeon Lee
ใป
4๋ฌ ์
1
55
2
- ๋ฏธํด๊ฒฐ
๊ฐ์๊ต์, ๋ด์ฉ ์ธ์ฉํด์ ๋ธ๋ก๊ทธ ๊ธ ์์ฑ
ํด๋น๊ฐ์์ ๊ต์ ๋ด์ฉ๊ณผ ๊ฐ์๋ฅผ ๋ณด๋ฉฐ ์ดํดํ ๋ถ๋ถ์ ๋ธ๋ก๊ทธ์ ์ ๋ฆฌํด์ ๊ธ์ ์จ๋ ๋๋์ง ๊ถ๊ธํฉ๋๋ค!
reactReact-Contextreact-routertailwindcssreact-queryseungheon lee
ใป
5๋ฌ ์
1
80
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์์ฑ์ ์์
ใป
5๋ฌ ์
1
74
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ใ ใ
ใป
5๋ฌ ์
0
76
3
- ํด๊ฒฐ
AI์ CSS ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๊ถํฉ
์๋ ํ์ธ์.CSS ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ํ ๋น๊ต ์ค๋ช ๊น์ง ๋๋ฌด ๊ฐ์ฌํฉ๋๋ค.์์ผ๋ก AI Agent<
reactReact-Contextreact-routertailwindcssreact-query์ถฉ์ ์ค
ใป
7๋ฌ ์
0
95
1
- ๋ฏธํด๊ฒฐ
onClick ์ด๋ฒคํธ์ ํจ์ ๋๊ธธ ๋
์๋ ํ์ธ์ ๊ฐ์ฌ๋. ๊ฐ์ ์ ๋ฃ๊ณ ์์ต๋๋ค. ๋ฐฐ์ด ์ ๋ฐ์ดํธํ๊ธฐ 1ํ ๊ฐ์ ๋ณด๊ณ ์๋๋ฐ ๊ถ๊ธํ ์ ์ด ์์ต๋๋ค. <
reactr11s
ใป
7๋ฌ ์
0
66
1
- ๋ฏธํด๊ฒฐ
๋ฆฐ์บ๋ฒ์ค ๊ธฐ๋ฅ ๊ตฌํ์ ์ ๋ชปํ๋์.... ๊ตฌํํ๊ณ ์ถ์ต๋๋ค...
์ ๋ฐฐํฌ์ ์ ๊ธฐ๋ฅ ๋ค ๊ตฌํํ๊ณ ํ๋๋ฐ, ๋ฐฐํฌํ๋ฉด ์ด๋ฐ ๊ธฐ๋ฅ์ ๋ชป ์ฐ๊ณ , ์ถ๊ฐ๋ก ํ์ด์ด๋ฒ ์ด์ค ๋ฑ์ ์ฌ์ฉํด์ผ๋ง ๊ฐ๋ฅํ๊ฐ์....์ ๋ฐฉ๋ฒ์ด ์๋์?<p styl
reactReact-Contextreact-routertailwindcssreact-query์ฃผ๋ณ๊ท
ใป
8๋ฌ ์
0
101
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์ฃผ๋ณ๊ท
ใป
9๋ฌ ์
0
72
1
- ๋ฏธํด๊ฒฐ
Object.assign ๋ฌธ๋ฒ
function create(baseURL, options) { const instance = axios.create( Object.assign({ // baseURL: base
reactReact-Contextreact-routertailwindcssreact-query์ฃผ๋ณ๊ท
ใป
9๋ฌ ์
0
64
1
- ๋ฏธํด๊ฒฐ
react-router ์ ํ ๊ธฐ๋ฅ ์ํจ
lean-canvas ํ๋ก์ ํธ ์์ฑ๋ถํฐ react-router-dom ์ค์นํ๊ธฐ๊น์ง ์ค๊ฐ์ค๊ฐ ๋ณด์ด๋ package.json ์ ๋ณด๊ณ ์ ๋ถ ๋ฒ์ ์ ๋ง์ท๋๋ฐ,react
reactReact-Contextreact-routertailwindcssreact-query์์ฑ์ ์์
ใป
9๋ฌ ์
0
53
1
- ๋ฏธํด๊ฒฐ
react-router-dom@6.25.1
์ ๋ชฉ๊ณผ ๊ฐ์ด npm i react-router-dom@6.25.1๋ก ํด์ package.json ์๋</
reactReact-Contextreact-routertailwindcssreact-query์์ฑ์ ์์
ใป
9๋ฌ ์
0
47
1
- ๋ฏธํด๊ฒฐ
React Router ์ต์ ์คํ
react router ์ฌ์ดํธ์์ ์ต์ ์คํ์ ๋ํ ํํ ๋ฆฌ์ผ์ ๋ณด๋ฉด, framework mode, data mode, declarative mode 3๊ฐ์ง๋ก ๋๋
reactReact-Contextreact-routertailwindcssreact-query์ฃผ๋ณ๊ท
ใป
9๋ฌ ์
0
207
1
- ๋ฏธํด๊ฒฐ
Immer ์์ filter, map ์ฌ์ฉ
์ง๋๊ฐ์์์ useImmer์์ ํ์ฉํ updateํจ์์์๋ push, splice์ ๊ฐ์ ํ์ฌ์ ๊ฐ์ฒด๋ฅผ ๋ณํ์ํค๋ api๋ฅผ ํ์ฉํ์์ต๋๋ค.๊ทธ๋์ immer ๊ฐ
reactReact-Contextreact-routertailwindcssreact-query์ฃผ๋ณ๊ท
ใป
9๋ฌ ์
0
54
1






