Next + React Query๋ก SNS ์๋น์ค ๋ง๋ค๊ธฐ
๋ฆฌ์กํธ19 & ๋ฅ์คํธ15 & ๋ฆฌ์กํธ์ฟผ๋ฆฌ5 & Next Auth5 & MSW2 & socket.io4 & zustand ์คํ์ผ๋ก ํธ์ํฐ(X.com)์ ์ ์ฌํ SNS ์๋น์ค๋ฅผ ๋ง๋ค์ด๋ด ๋๋ค. ๋์ผ๋ก ๊ฒ์์์ง ์ต์ ํ๋ฅผ ์ํ SSR๊น์ง!
์๊ฐ์ 3,397๋ช
๋์ด๋ ์ค๊ธ์ด์
์๊ฐ๊ธฐํ ๋ฌด์ ํ

๋ค๋ฅธ ์๊ฐ์๋ค์ด ์์ฃผ ๋ฌผ์ด๋ณด๋ ์ง๋ฌธ์ด ๊ถ๊ธํ์ ๊ฐ์?
- ๋ฏธํด๊ฒฐ
์บก์ฒ๋ง๋ถ๋ถ ์ง๋ฌธ์์ต๋๋ค.
https://inf.run/h6CDM<p sty
reactnext.jsreact-querynext-authmswgogo
ใป
2๋ฌ ์
0
71
2
- ๋ฏธํด๊ฒฐ
๊น์ ์์ค์ฝ๋๋ฅผ ์ฐพ์ ์ ์์ต๋๋ค.
36๊ฐ์ ๋ณด๊ณ ์์ค์ฝ๋๋ฅผ ๊ฐ์ ธ์ค๋ ค๊ณ ํ๋๋ฐ ๊น์ src/app/(beforeLogin)/@modal/(.)i/flow/signup/page.tsxํ์ผ์ ์ ๋ฐ์ดํธํ
reactnext.jsreact-querynext-authmsw๊น์์
ใป
5๋ฌ ์
0
109
2
- ๋ฏธํด๊ฒฐ
useInfiniteQuery promise์ react use ์ฌ์ฉ์ ํ์ด์ง ๋ฌดํ ๋ก๋ฉ
๋ฆฌ์กํธ ์ฟผ๋ฆฌ์ suspense ์คํธ๋ฆฌ๋ฐ ๊ธฐ๋ฅ ๊ตฌํ ์ค ๋ฒ๊ทธ๊ฐ ๋ฐ์ํด ์ธ์ฌ์ดํธ๋ฅผ ์ป๊ณ ์ ์ง๋ฌธ๋๋ฆฝ๋๋ค.์์ ์ปดํฌ๋ํธ์์ useInfiniteQuery</c
reactnext.jsreact-querynext-authmsw๋ณ์ฌ์
ใป
6๋ฌ ์
0
95
1
- ๋ฏธํด๊ฒฐ
import ํ์ผ ๊ฒฝ๋ก๋ฅผ ์ฐพ์ง ๋ชป ํด์ ์๋ฌ๊ฐ ๋ฐ์ํฉ๋๋ค.
์๋ ํ์ธ์. ์๋ฌ๊ฐ ๋ฐ์ํด์ ์ง๋ฌธ๋๋ฆฝ๋๋ค.๊ฒฝ๋ก๋ ์๋ฌด๋ฆฌ ๋ด๋ ๋ง๊ฒ ์ด๊ฑฐ ๊ฐ์๋ฐ ์ฐพ์ง๋ฅผ ๋ชป ํฉ๋๋ค.<img src="https://cdn.inflearn.c
reactnext.jsreact-querynext-authmsw๊น์์
ใป
6๋ฌ ์
0
107
2
- ๋ฏธํด๊ฒฐ
css ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ถ์ฒ ๋ถํ๋๋ฆฝ๋๋ค
์๋ ํ์ธ์ ์ ๋ก์ด๋๊ฐ์์์๋ css module ์ฌ์ฉํ์ จ๊ณ , ์ ๊ทธ๊ฑธ ์ฌ์ฉํ์ จ๋์ง ์ด์ ๋ฅผ ๋ง์ํด ์ฃผ์ จ๋๋ฐ์์ ๋ tailwind๋ vanilla extrac
next.jstailwindvanilla-extractayaan
ใป
6๋ฌ ์
0
138
2
- ํด๊ฒฐ
ํ๋ก์ฐ ์ถ์ฒ ๋ชฉ๋ก์ด ๋น ๋ฐฐ์ด๋ก ๋ค์ด์ต๋๋ค.
์๋ ํ์ธ์. ํ๋ก์ฐ ์ถ์ฒ API๋ ํ๋ก์ ์๊ฐ ๋ง์ ์์ผ๋ก ์ต๋ 3๋ช ์ ๊ฐ์ ธ์ค๋๋ก ๋์ด ์๋ ๊ฒ์ผ๋ก ์๊ณ ์์ต๋๋ค.<p style="text-align:
reactnext.jsreact-querynext-authmsw๊ฐ๋ฏธ
ใป
7๋ฌ ์
0
129
1
- ํด๊ฒฐ
๊ฒ์๋ฌผ ์ ๋ก๋ ์ userId๊ฐ undefined๋ก ๋ค์ด๊ฐ๋ ์ค๋ฅ
์๋ ํ์ธ์.๊ฒ์๋ฌผ ์ ๋ก๋ ์์ฒญ ์ 500 Internal Server Error ์๋ฌ๊ฐ ๋ฐ์ํฉ๋
reactnext.jsreact-querynext-authmsw๊ฐ๋ฏธ
ใป
8๋ฌ ์
0
118
1
- ๋ฏธํด๊ฒฐ
useSuspenseQuery ์ฌ์ฉ ์ SSR 401 ์ด์ ๊ด๋ จ
์๋ ํ์ธ์ ๊ฐ์ฌ๋ ์ข์ ๊ฐ์ ์ ๋ฃ๊ณ ์์ต๋๋ค!useSuspenseQuery๋ฅผ ์ฌ์ฉ ์ค์ ๊ณ ๋ฏผ์ด ์๊ฒจ์ ์ง๋ฌธ ๋๋ฆฝ๋๋ค.<p style="text-a
reactnext.jsreact-querynext-authmswdubu777
ใป
8๋ฌ ์
0
167
1
- ๋ฏธํด๊ฒฐ
๋ฆฌ์กํธ ์ฟผ๋ฆฌ useinfinitequery ๋ฌดํ์คํฌ๋กค ๊ตฌํ ์ ํ์ด์ง๊ฐ ์ด๋ํ ๊ฒฝ์ฐ ๋ฐ์ดํฐ๊ฐ ๋ณด์กด๋๊ฒ ํ ์ ์๋์??
๋๋ณด๊ธฐ ๋ฒํผ ํด๋ฆญ ์ ํ์ด์ง ์ด๋ (page=1 -> page=2) + ๋ฌดํ์คํฌ๋กค ๊ตฌํ ๊ธฐ๋ฅ ๊ตฌํ์ด ํ์ํด์ ์๋์ ๊ฐ์ด ๊ตฌํํด๋ณด์๋๋ฐ ์ด์ฉ๋ ๋๊ณ ์ด์ฉ๋ ์๋๋๋ผ๊ตฌ์...<p style="text-alig
reactnext.jsreact-querynext-authmsw๋ณ์ฌ์
ใป
8๋ฌ ์
0
184
3
- ๋ฏธํด๊ฒฐ
ํด๋ง์ด ํ์์๋ ์ด์
ํด๋ง์ด ํ์์๋ ์๋๋ผ๊ณ ํ์ จ๋๋ฐ ๊ทธ ์ด์ ๊ฐ ๊ถ๊ธํฉ๋๋ค
reactnext.jsreact-querynext-authmswdev pple
ใป
8๋ฌ ์
0
93
2
- ๋ฏธํด๊ฒฐ
next Request Memoization๊ณผ react cache
next.js์์ ์ ๊ณตํ๋ Request Memoization ๊ธฐ๋ฅ์ ๊ฐ์ ์๋ํฌ์ธํธ ๊ฒฝ๋ก๋ก ์ฌ๋ฌ ๊ฐ์ ์์ฒญ์ด ๋ค์ด์์ ๋ ํ๋์ ์์ฒญ์ผ๋ก ์บ์ฑํด์ฃผ๋๊ฑธ๋ก ์๊ณ ์์ต๋๋ค. ์ด์ ๊ด๋ จํด์ 3๊ฐ์ง ๊ถ๊ธ์ฆ์ด ์์ต๋๋ค. <
reactnext.jsreact-querynext-authmsw๋ณ์ฌ์
ใป
8๋ฌ ์
0
106
2
- ๋ฏธํด๊ฒฐ
seo ์ต์ ํ ๊ธฐ์ค์ ๋ฐ์ดํฐ fetching์ธ๊ฐ์ ์๋ ๋ฐ์ดํฐ ๋ ๋๋ง์ธ๊ฐ์?
seo ๊ด๋ จํด์ ๊ถ๊ธํ๊ฒ ์์ต๋๋ค.seo ์ต์ ํ๋ผ๋๊ฒ ํฌ๋กค๋ง ๋ด์ด ์๋ฒ์์ ๋ ๋๋ง๋ html์ ํฌ๋กค๋งํ๊ณ ์ธ๋ฑ์ฑํ๋๊ฑธ๋ก ์๊ณ ์์ต๋๋ค. <p style="
reactnext.jsreact-querynext-authmsw๋ณ์ฌ์
ใป
8๋ฌ ์
0
83
2
- ๋ฏธํด๊ฒฐ
next.js ์๋ฒfetch ์๋ฌ fallback ui ๊ตฌํ ๋ฐฉ๋ฒ
next ๊ณต์๋ฌธ์๋ฅผ ์ดํด๋ณด๋ฉด ๋จ์ ์๋ฒ fetch (์๋ฒ์ก์ x) ๊ด๋ จ ์๋ฌ ํธ๋ค๋ง ๋ฐฉ๋ฒ์ ๋ฑํ ์๋์ ์๋ ๊ฒ ๊ฐ์ ์ง๋ฌธ๋๋ฆฝ๋๋ค.๋ง์ฝ SectionA, Secti
reactnext.jsreact-querynext-authmsw๋ณ์ฌ์
ใป
9๋ฌ ์
0
170
2
- ๋ฏธํด๊ฒฐ
ํ๋ ์์ํฌ ์ฌ๋ก ํ์ ๋ฒ
next 15, app router๋ฅผ ์์๊ฐ์๋ก ์ด์งธ.. ์ ์ทจํฅ์ ์๋ง๊ฑฐ๋ ์ ์๋น์ค์ ์ ์ฉํ๊ธฐ์ ๋ถ๋ฆฌํ ์ ๋ค์ด ๋ง์๋ฐ์ ์ ๋ง ๊ทธ๋ฐ๊ฑด์ง ๊ถ
reactnext.jsreact-querynext-authmswEric J
ใป
9๋ฌ ์
0
124
2
- ๋ฏธํด๊ฒฐ
ํํฐ์ต์ ์ด ๋ง์ ํ์ด์ง์์ ์๋ฒ fetch๋ฅผ ํ๋๊ฒ ๋ง๋๊ฑธ๊น์??
next ๊ณต์๋ฌธ์์์ ์๋ฒ fetch๋ฅผ ๊ถ์ฅํ๊ณ ์์ง๋งํํฐ์ต์ ์ด ๋ค์ ํฌ์ง๋ ํ์ด์ง์์๋ ์๋ฒ fetch๋ฅผ ํด์ผํ ๊น ์๋ฌธ์ ์ด ๋ญ๋๋ค.<p style="te
reactnext.jsreact-querynext-authmsw๋ณ์ฌ์
ใป
9๋ฌ ์
0
101
2
- ๋ฏธํด๊ฒฐ
์๋ฒ fetch suspense ๋ก ๊ฐ์ธ๊ณ ์๋ก๊ณ ์นจ ์ ์ ์ ๋น ํ๋ฉด์ด ๋ ธ์ถ๋ ํ fallback ui๊ฐ ๋ ธ์ถ๋ฉ๋๋ค.
autoexport default function Weekday() { return ( <Suspense fallback={<WeekdayBannerLoading
reactnext.jsreact-querynext-authmsw๋ณ์ฌ์
ใป
9๋ฌ ์
0
102
2
- ๋ฏธํด๊ฒฐ
template.tsx ๋ด ์๋ฒfetch ์๋ต๊ฐ๊ณผ ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ ์ํ๊ฐ ์ฑํฌ๊ฐ ๋ง์ง ์๋ ์ด์
์๋ ์ฝ๋์ ๊ฐ์ด template.tsx์์ ์๋ฒfetch ํ ์ฌ์ฉ์ฒ์ธ ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ๋ก props ๋๊ฒจ์ฃผ๋๋ก ์ธํ ํด๋์์ต๋๋ค. <code class="language-type
reactnext.jsreact-querynext-authmsw๋ณ์ฌ์
ใป
9๋ฌ ์
0
65
2
- ํด๊ฒฐ
Auth.js ์ฌ์ฉ ์ authorize ํจ์๊ฐ ํธ์ถ๋์ง ์์ต๋๋ค
์๋ ํ์ธ์. ๋จผ์ , Next.js ๋ฅผ ์ ๋ฌธํ์ง ์ผ๋ง ๋์ง ์์ ์ง๋ฌธ์ด ์ํด ์ ์๋ ์ ์ํด ๋ถํ๋๋ฆฝ๋๋ค..!ํ์ฌ msw ์ธํ ์ ์๋ฃ ํ๊ณ , Auth.js๋ ๊ณต์
reactnext.jsreact-querynext-authmsw๊ฐ๋ฏธ
ใป
10๋ฌ ์
0
131
2
- ๋ฏธํด๊ฒฐ
next.js ์์ ๋ก๊ทธ์ธ์ ๊ดํ์ฌ
์๋ ํ์ธ์ ์ ๋ก์ด๋, ๋ก๊ทธ์ธ ๊ด๋ จํด์ ์ด๋ ค์์ด ์์ด์ ์ง๋ฌธ๋๋ฆฝ๋๋ค. ํ์ฌ ์ฌ์ฉํ๊ณ ์๋ ๊ธฐ์ ์คํ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.<p style=
reactnext.jsreact-querynext-authmsw์ฐน์ฐน์ด
ใป
10๋ฌ ์
0
138
1
- ๋ฏธํด๊ฒฐ
Next์ route handler์ ๋ํ ์ง๋ฌธ์ด ์์ต๋๋ค.
์๋ ํ์ธ์ Next app router ๊ด๋ จํด์ ์ง๋ฌธ๋๋ฆฝ๋๋ค.ํ์ฌ ์ฌ์ด๋ํ๋ก์ ํธ์์ route handler๋ฅผ ์ ๊ทนํ์ฉํ๊ณ ์๋๋ฐ์.<p style="te
reactnext.jsreact-querynext-authmswkraf
ใป
10๋ฌ ์
0
101
2






