ํ์คํ ๋ฆฌ์กํธ ๋ผ์ด๋ธ์ฝ๋ฉ - ๊ฐ๋จํ ์ผํ๋ชฐ ๋ง๋ค๊ธฐ
๊ฐ๋ฐ๋ถํฐ ๋ฐฐํฌ๊น์ง! ํ๋์ ์๋น์ค๋ฅผ ์์ฑํ๊ธฐ ์ํ ํ๋ํ ์ฌ์ ์ ์ฌ๊ณผ์์ด ๋ณด์ฌ๋๋ฆฝ๋๋ค. ์ฒ์ ์จ๋ณด๋ ๊ธฐ์ ๋ค์ ์๋ฉ ๋์ ํ์ฌ ์ข์ถฉ์ฐ๋ ์ฐ๋นํํํ๋ฉด์๋ ์ด๋ป๊ฒ๋ ํค์ณ๋๊ฐ ์ ์์ด์!
์๊ฐ์ 1,284๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ
- ํด๊ฒฐ
Gnb ๋ค๋ฅธ ์์ฑ๋ฒ
์๋์ฐ ํ๊ฒฝ & vite-plugin-next-router๋ฅผ ์์ฐ์๋ถ์ ํํ์ฌ,Gnb๋ฅผ ๋ง๋์ค๋ ค๋ฉด <BrowserRo
react-routergnb์ด์ฌ์ค
ใป
0
330
1
- ํด๊ฒฐ
placeimg.com๋ 23๋ 6์์ ์ข ๋ฃํ๋ค์.
๊ฒฝ๋ก : src > mocks > handler.ts ๊ฐ์์์ mock_products์ imageUrl ์<a target="_blank" rel="noopener noreferrer nofollow" h
placeimg์ด์ฌ์ค
ใป
2
687
1
- ํด๊ฒฐ
์ฅ๋ฐ๊ตฌ๋ ๋ด๊ธฐ ๋ฒํผ ๋๋ฅด๋ฉด 404์๋ฌ๊ฐ ๋น๋๋ค
<img src="https://cdn.inflearn.com/public/files/posts/bb56a337-34dc-4263-a8a9-2ede7d3098db/แแ ณแแ ณแ แ ตแซแแ ฃแบ2024-01-16แแ ฉแแ ฎ9.35.11.png" alt="แแ ณแแ ณแ แ ตแซแแ ฃแบ 202
reactfirebasegraphql์ด์์
ใป
0
229
1
- ํด๊ฒฐ
[useRoutes, React-Query ์ค๋ฅ ํด๊ฒฐ๋ฐฉ๋ฒ] No QueryClient set, use QueryClientProvider to set one ์๋ฌ ๋์๋ ๋ถ ๋ณด์ธ์ !!!
<img src="https://cdn.inflearn.com/public/fil
reactfirebasegraphqlreact-queryhyorish03
ใป
4
1,158
2
- ๋ฏธํด๊ฒฐ
๊นํ๋ธ์์ ์ ์๋๊ป์ ์ฌ๋ฆฌ์ ํ์ผ ๋ฐ์,, ์คํ์์ผ๋ณด๋ คํ์ผ๋ ์๋ฉ๋๋ค
yarn devํ๋ฉด ์ฌ์ดํธ ๋ ์ผํ๋๋ฐ;; ์ ์๋ ๊ฐ์??
reactfirebasegraphqlksw
ใป
0
331
1
- ๋ฏธํด๊ฒฐ
์ํ๋ชฉ๋กํ์ด์ง๋ง๋ค๊ธฐ์์ ... ๋งํ๋๋ค..
์ ์๋~!! ์ํ๋ชฉ๋กํ์ด์ง๊ฐ ์๋น๋๋ค ใ ใ ๋ญ ์๋ชปํ๊ฑธ๊น์?? <img src="https://cdn.inflearn.com/public/files/posts/9bf8d43d-396c-409b-8361-5e
reactfirebasegraphqlksw
ใป
0
384
1
- ๋ฏธํด๊ฒฐ
๊ฐ์ ์์ ๊ณผ ์ง๊ธ์์ ์ด ๊ฝค ๋ฌ๋ผ์ง๊ฒ ์๋๊ฑฐ ๊ฐ์์
์ ๋ฐ์ดํธ ํด์ฃผ์๋ฉด ์ ๋ง ๊ฐ์ฌํฉ๋๋ค ใ ใ
reactfirebasegraphqlksw
ใป
0
484
1
- ํด๊ฒฐ
์ํ๋ชฉ๋ก ๋ถ๋ฌ์ค๊ธฐ, ์ฅ๋ฐ๊ตฌ๋ ์ญ์ ์๋ฌ ์ง๋ฌธ ๋๋ฆฝ๋๋ค
firebase ์ฐ๋ ํ client์ server ์คํํ์ฌ ๊ตฌ๋ ์ค ์ค๋ฅ ๋ฐ์ํ์ฌ ์ง๋ฌธ ๋๋ฆฝ๋๋ค.<img src="https://cdn.inflearn.com/public/files/posts/5a0e3c65-ba12-4261-ab58-8afcd9c
reactfirebasegraphql4562sky
ใป
0
393
1
- ํด๊ฒฐ
graphqlFetcher ๊ด๋ จ ์๋ฌ์ , data ๊ฐ์ฒด ์ ์ ๋์ง ์๋ ์ค๋ฅ ์ง๋ฌธ ๋๋ฆฝ๋๋ค
์๋ ํ์ธ์. msw ๊ฐ์๋ฅผ ๋ฃ๋ ์ค์ ํด๊ฒฐ๋์ง ์๋ ๋ฌธ์ ๊ฐ ์์ด์ ์ง๋ฌธ ๋จ๊น๋๋ค.<img src="https://cdn.inflearn.com/public/files/posts/b9f27f93-05bb-47ae-a145-fdeea9a69a84/id.png" alt
reactfirebasegraphql4562sky
ใป
0
550
2
- ํด๊ฒฐ
3๊ฐ routes.tsx ํ์ผ ์์ฑ ์๋์๋๋ถ!
import { lazy } from "react"; import GlobalLayout from "./src/pages/_layout"; const Index = lazy(() =>
3๊ฐroutes.tsx์ฃผ์ง์ฑ
ใป
7
562
1
- ํด๊ฒฐ
productdetail ๋ฐ์ดํฐ ์๋ถ๋ฌ์์ง๊ณ ์์ต๋๋ค.
<img src="https://cdn.inflearn.com/public/files/posts/d739a20a-d41b-41f3-84f3-d77db2ab1af4/แแ ณแแ ณแ แ ตแซแแ ฃแบ2023-09-13แแ ฉแแ ฎ10.51.27.png" alt="แแ ณแแ ณแ แ ตแซแแ ฃแบ 20
reactfirebasegraphqlGyeongdeok PARK
ใป
1
436
1
- ํด๊ฒฐ
query ์๋ฌ ๋ฐ์ํ์ต๋๋ค.
<img src="https://cdn.inflearn.com/public/files/posts/90d50421-7e61-46bf-8a84-87ed9e4c0900/แแ ณแแ ณแ แ ตแซแแ ฃแบ2023-09-10แแ ฉแแ ฎ6.58.08.png" alt="แแ ณแแ ณแ แ ตแซแแ ฃแบ 202
reactfirebasegraphql์์ฑ์ ์์
ใป
1
524
1
- ๋ฏธํด๊ฒฐ
react typescript vite ์ค์น์ ์ค๋ฅ ์ง๋ฌธ๋๋ฆฝ๋๋ค.
์ ๋ชฉ์ฒ๋ผ react typescript vite์ค์น๋ฅผ ํ๋ ค๊ณ ํฐ๋ฏธ๋์ yarn create vite๋ฅผ ์ ๋ ฅํ์ฌ ์ค์น๋ฅผ ํ์ต๋๋ค.์๋ ์ด๋ฏธ์ง์ ๊ฐ์ด typescript๋ฅผ ์ ํ ํ,<img src="https://cdn.inflearn.com
reacttypescriptvite์ํํ
ใป
0
1,765
2
- ํด๊ฒฐ
์น์ 1์ 1๊ฐ routes.tsx์์ ์๋ฌ๊ฐ ๋ฐ์ํฉ๋๋ค
์๋ ํ์ธ์. ์๋์ฐ ํ๊ฒฝ์์ ์์ ์ ๋ฃ๊ณ ์์ต๋๋ค.routes.tsx์์ \๋ฌธ์ ๊ฐ ๋ฐ์ํ์ฌ ์ด์ ์ ๋ต๋ณํด์ฃผ์ ๋ด์ฉ์ ํ ๋๋ก vite-plugin-next-react-router๋ฅผ ์ง์ฐ๊ณ ๊ฐ์๋ฅผ ๋ฐ๋ผ๊ฐ๋ ค๊ณ ํ๋๋ฐ,<img src="https://cdn
reactfirebasegraphqlhdot1223
ใป
0
797
2
- ํด๊ฒฐ
routes.tsx์์ ์ง๋ฌธ์ด ์์ต๋๋ค!
๋ผ์ฐ์ธ ํ์ผ์ ๋ณด๋ฉด ์ ์ผ ๋ฐ์ ์ฝ๋์์ pages ๋ฅผ ์ต์คํฌํธํด์ฃผ๋๋ฐ, ์ฐ๋๊ณณ์ด ์๋๋ผ๊ตฌ์...!ํน์ ์ด ์ฝ๋๊ฐ ๋ฐ๋์ ํ์ํ ๊ฒ์ธ์ง ๊ถ๊ธํด์ ์ง๋ฌธ ๋จ๊น๋๋ค:)<code class="lan
reactfirebasegraphqljj4783
ใป
1
565
1
- ๋ฏธํด๊ฒฐ
vite-plugin-next-react-router
vite-plugin-next-react-router ๋ค์ด๋ฐ๊ณ ๊ฐ์๋ฅผ ๋ฐ๋ผํ๋๋ฐ์.. routes.tsxํ์ผ์ด ์๋์ผ๋ก ์์ฑ์ด ๋์ง์์ต๋๋ค.๊ทธ๋ฐ๋ฐ ์ด์ํ๊ฒ ํ์ด์ง๊ฐ ์๋์ด๋์..์ด์ ๊ฐ ๋ญ๊น์..?vite.config.ts ๋ด์ฉ
reactfirebasegraphqlNuri Park
ใป
0
1,446
3
- ๋ฏธํด๊ฒฐ
grahpqlFetcher ์ค๋ช ๊ฐ๋ฅํ ๊น์
- ํ์ต ๊ด๋ จ ์ง๋ฌธ์ ๋จ๊ฒจ์ฃผ์ธ์. ์์ธํ ์์ฑํ๋ฉด ๋ ์ข์์! - ๋จผ์ ์ ์ฌํ ์ง๋ฌธ์ด ์์๋์ง ๊ฒ์ํด๋ณด์ธ์. - ์๋ก ์์๋ฅผ ์งํค๋ฉฐ ์กด์คํ๋ ๋ฌธํ๋ฅผ ๋ง๋ค์ด๊ฐ์. - ์ ๊น! ์ธํ๋ฐ ์๋น์ค ์ด์ ๊ด๋ จ ๋ฌธ์๋ 1:1 ๋ฌธ์ํ๊ธฐ๋ฅผ ์ด์ฉํด์ฃผ์ธ์.
reactfirebasegraphqloridori2705
ใป
1
486
1
- ๋ฏธํด๊ฒฐ
msw mocking enabled
์ ์ ๊ฒฝ์ฐ main.tsx ๋ app.tsx ๊ฐ ๋ถํ์ํ๋ค๊ณ ํ์ ์ layout_tsx ์ // if (import.meta.env.DEV) {
reactfirebasegraphql์ฌ์๋ง simmy
ใป
1
754
2
- ๋ฏธํด๊ฒฐ
[๊ธฐ์ ์ง๋ฌธ์๋]
- ํ์ต ๊ด๋ จ ์ง๋ฌธ์ ๋จ๊ฒจ์ฃผ์ธ์. ์์ธํ ์์ฑํ๋ฉด ๋ ์ข์์! - ๋จผ์ ์ ์ฌํ ์ง๋ฌธ์ด ์์๋์ง ๊ฒ์ํด๋ณด์ธ์. - ์๋ก ์์๋ฅผ ์งํค๋ฉฐ ์กด์คํ๋ ๋ฌธํ๋ฅผ ๋ง๋ค์ด๊ฐ์. - ์ ๊น! ์ธํ๋ฐ ์๋น์ค ์ด์ ๊ด๋ จ ๋ฌธ์๋ 1:1 ๋ฌธ์ํ๊ธฐ๋ฅผ ์ด์ฉํด์ฃผ์ธ์.
reactfirebasegraphqlYunFE
ใป
0
539
2
- ๋ฏธํด๊ฒฐ
products ๋ผ์ฐํ ์ ๋๋๋ฐ cart ๋ผ์ฐํ ์ ์๋๋ค์ ใ
<img src="https://cdn.inflearn.com/public/files/posts/2527b57d-db52-4332-81d0-42f7eca60120/แแ ณแแ ณแ แ ตแซแแ ฃแบ2023-05-17แแ ฉแแ ฎ9.25.55.png" alt="แแ ณแแ ณแ แ ตแซแแ ฃแบ 202
reactfirebasegraphql์ฌ์๋ง simmy
ใป
0
559
2







