๊ธฐ์ด๋ถํฐ ๋ฐฐ์ฐ๋ Next YTMusic ํด๋ก ์ฝ๋ฉ (with next.js 14, UI ๋ง์คํฐ)
React, Next.JS 14, TailwindCss, RadixUI, Shadcn, zustand ์ผ๋ก YoutubeMusic ์น์ฌ์ดํธ๋ฅผ ํด๋ก ํฉ๋๋ค. NextJS ๊ธฐ์ด๋ถํฐ UI ์ค์ ์ผ๋ก ์นํ๋ก ํธ ๊ธฐ์ด๋ฅผ ๋ง์คํฐ ํ ์ ์์ด์.!
์๊ฐ์ 454๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ
- ๋ฏธํด๊ฒฐ
isLoading ๊ฐ์ด ๋ฐ๋๋ ์์ (๋์ ์์)์ด ๊ถ๊ธํฉ๋๋ค.
12.9๊ฐ์์isLoading์ด useState๋ก ์ ์ธํ ๋ณ์๊ฐ ์๋๋ฐ๋ ๋ก๋ฉ ์ปดํฌ๋ํธ์์ ์ฌ์ ๋ฒํผ์ผ๋ก ๋ค
๋ณด๋ ธ๋ณด๋ ธ
ใป
6๋ฌ ์
0
60
3
- ํด๊ฒฐ
4.6๊ฐ ์ด๊ธฐ ๋ก๋ฉ ์๋ ์ผ์ด์ค ๋น๊ต
4.6๊ฐ ์ด๊ธฐ ๋ก๋ฉ ์๋ ์ผ์ด์ค ๋น๊ต ์ธ๊ฐ์ง ์ผ์ด์ค๋ฅผ ์ ์ด์ฃผ์ จ๋๋ฐ case1, case3์ด ๊ฐ์ ๊ฑด๊ฐ์?์ ๊ฐ ์ดํด๋ฅผ ๋ชปํ ๊ฑด๊ฐ ์ถ์ด์ ์ธ ๋ฒ ๋๋ ค๋ดค๋๋ฐ ๊ฐ์ ๋ณด์ฌ
react์ธํฐ๋ํฐ๋ธ-์นํด๋ก ์ฝ๋ฉnext.jstailwindcsszustand๋ณด๋ ธ๋ณด๋ ธ
ใป
6๋ฌ ์
0
74
2
- ํด๊ฒฐ
Sidebar & Header ์ปดํฌ๋ํธ ๋ฑ ๋ ์ด์์ ์ค์ ๋ฐฉ์
๊ฐ์์์ ๋ ์ด์์์ ๋ด๋นํ๋ Sidebar, Header ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค๋ Props์ผ๋ก children์ ๋ฐ๊ณ ๋ ๋๋ง ํ๋ ๋ฐฉ์์ผ๋ก ๋ง๋ค์๋๋ฐ ์ด๋ ๊ฒ ๋ง๋ ์ด์ ๊ฐ ์์๊น์?์ง๊ธ๊น์ง ์งํํ๊ฑธ ๊ณ์ธต๋ณ๋ก ์๊ฐํด๋ณด๋ฉด<
react์ธํฐ๋ํฐ๋ธ-์นํด๋ก ์ฝ๋ฉnext.jstailwindcsszustand์ ์ฌ์
ใป
7๋ฌ ์
0
72
3
- ๋ฏธํด๊ฒฐ
๋ฌธ์๋๋ฆฝ๋๋ค.
์๋ ํ์ธ์? ๊ถ๊ธํ๊ฒ์ด ์์ต๋๋ค.๋ณดํต React๋ก csr์ ๋ง๋ค์ด ๋ฐฐํฌํ๋๋ฐ next.js๋ก SSR ํ์ด์ง ์์ด CSR app์ ๋ง๋ค์ด ์น์๋ฒ(NGINX)์ ๋ฐฐํฌ
react์ธํฐ๋ํฐ๋ธ-์นํด๋ก ์ฝ๋ฉnext.jslovelove
ใป
์ผ ๋ ์
0
115
3
- ๋ฏธํด๊ฒฐ
Vercel signup์ด ์๋์,, ๊ณ์ ์ ๊นํ๋ธ ๊ณ์ ์ ์ถ๊ฐ ์ธ์ฆ์ด ํ์ํ๋ค๋ฉฐ registration@vercel.com์ ๋ฌธ์๋ฅผ ํ๋ผ๊ณ ํ๋ค์,,, ์ด๋ด๋ ์งํ์ ์ด์ฐํด์ผํ ๊น์,,,
Vercel signup์ด ์๋์,, ๊ณ์ ์ ๊นํ๋ธ ๊ณ์ ์ ์ถ๊ฐ ์ธ์ฆ์ด ํ์ํ๋ค๋ฉฐ registr
react์ธํฐ๋ํฐ๋ธ-์นํด๋ก ์ฝ๋ฉnext.jstailwindcsszustandverceltngus5232
ใป
์ผ ๋ ์
1
87
2
- ๋ฏธํด๊ฒฐ
์๋ฌ, ๋ก๋ฉ ๋ด์ฉ ํ์ด์ง๋ฅผ ๋ชจ๋ ํ์ด์ง์ ๋ค ๋ง๋๋ ์ด์ ๊ฐ ๋ฐ๋ก ์๋์?
์๋ฌ๋ ๋ก๋ฉ์ ์ ์ญ์ ์ผ๋ก ์ํ๋ก ๋ด์ ์๋ฌ๋ ๋ก๋ฉ์ ๋์ฐ๋๊ฒ ์๋, ํ์ด์ง๋ณ๋ก ์ ๋ถ ๋ค ๋ณต๋ถ์ผ๋ก ๋ฃ๋ ์ด์ ๊ฐ ๋ฐ๋ก ์๋์..? ์ผ๋จ ๋ฐ๋ผํด๋ณด๊ณ ์๊ธด ํ๋ฐ, ๋ญ๊ฐ ์ข ์๋๊ฒ ๊ฐ์์ ์ง๋ฌธ ๋๋ฆฝ๋๋คใ ใ
react์ธํฐ๋ํฐ๋ธ-์นํด๋ก ์ฝ๋ฉnext.jstailwindcsszustandJunho
ใป
์ผ ๋ ์
2
135
3
- ๋ฏธํด๊ฒฐ
3.2, 3.3 ํ๋ฉด์ ์๋ฌด๊ฒ๋ ๋์ค์ง ์๊ณ ์์ต๋๋ค!
<img src="https://cdn.inflearn.com/public/files/posts/2e6bfed0-e28f-44d9-a0a5-88e1f0f6a5e6/e06f833c-a03c-4356-9f45-1f2773912402.png" media-type="img"
react์ธํฐ๋ํฐ๋ธ-์นํด๋ก ์ฝ๋ฉnext.jstailwindcsszustandJunho
ใป
0
179
3
- ํด๊ฒฐ
์ฝ๋๊ฐ ์ ๊ทธ๋ฐ์ง ๋ชจ๋ฅด๊ฒ ๋๋ฐ, ์ด๋ด๋ ์ด๋ป๊ฒ ๊ณต๋ถํด์ผํ๋์?
7.4 PlayListCarousel - 1โ ๊ฐ์์ 6๋ถ 15์ด๋ฅผ ๋ณด์๋ฉด,๋ถ๋ถ์ด ์๋๋ฐ์.left-[-45px]์ ํด์ผ ํ์ดํ๊ฐ ๋ณด์ด๊ฒ ๋๋๋ฐ,
react์ธํฐ๋ํฐ๋ธ-์นํด๋ก ์ฝ๋ฉnext.jstailwind-csszustand๋ฐ์์
ใป
1
199
3
- ๋ฏธํด๊ฒฐ
๊ฐ์์ธ ๋ณต์กํ ui ์ ๋ ฅํผ ๊ด๋ จ ์ง๋ฌธ ์์ต๋๋ค
<img src="https://cdn.inflearn.com/public/files/posts/d7b96f4e-0d59-4676-add9-0678e4fad70b/40d1bc79-d687-47d0-ab0b-f4566bacb495.png" media-type="img"
react์ธํฐ๋ํฐ๋ธ-์นํด๋ก ์ฝ๋ฉnext.jstailwind-csszustandํ์์ค
ใป
1
199
2
- ํด๊ฒฐ
npx๋ yarn์ด๋ ๊ฐ์ด ์จ๋ ๋๋์?
ํ๋ก์ ํธ ์ธํ ํ ๋๋ yarn์ ์ฐ์ จ๋๋ฐ์.shadcn์์ avatar ์ค์นํ ๋๋ npx์ ์ฐ์ ์์.๊ฐ์ด ์จ๋ ๋ฌธ์ ๊ฐ ์๋์?
react์ธํฐ๋ํฐ๋ธ-์นํด๋ก ์ฝ๋ฉnext.jstailwind-csszustand๋ฐ์์
ใป
0
413
2
- ํด๊ฒฐ
article / section ํ๊ทธ์ ๊ดํด
article ๊ณผ section tag ๋ฅผ ์์ฃผ ์ฌ์ฉํ์๋๋ฐ, ํน์ ์ด๋ค ๊ธฐ์ค์ผ๋ก ์ฌ์ฉํ์๋์?
react์ธํฐ๋ํฐ๋ธ-์นํด๋ก ์ฝ๋ฉnext.jstailwind-csszustandfemaster1
ใป
0
162
1
- ํด๊ฒฐ
์นดํ ๊ณ ๋ฆฌ ๋ณ๊ฒฝ ์ ์ด๋ฏธ์ง ๋ก๋ฉ
์นดํ ๊ณ ๋ฆฌ ๊ด๋ จ ๊ฐ์๋ฅผ ์๊ฐ ์ค์ ๋๋ค. ์นดํ ๊ณ ๋ฆฌ ๋ณ๊ฒฝ ์ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋ณ๊ฒฝ๋๋ ๋ถ๋ถ์ด ์๋๋ฐ์ํด๋น ๋ถ๋ถ์ด ์ด๋ฏธ์ง ๋ก๋ฉ(๋ณ๊ฒฝ?)์ด ๋งค์ฐ ๋ฆ๊ฒ ๋๋๋ผ๊ตฌ์ํด๋น ๋ถ๋ถ ๊ฐ์ ํด๋ณด๋ ค๋ฉด ์ด๋ค ๊ฒ์ ์๋ํด๋ณด๋ฉด ์ข์๊น์?</p
react์ธํฐ๋ํฐ๋ธ-์นํด๋ก ์ฝ๋ฉnext.jstailwind-csszustandfemaster1
ใป
1
176
2
- ๋ฏธํด๊ฒฐ
next zustand ์ฌ์ฉ ์ ๋ฌธ์
next zustand ์ธํ ์, provider ๋ฅผ ์ฌ์ฉํด์ผํ๋ค๋ ๊ธ์ด ์์ด์์.ํ์ฌ ๊ฐ์์ฒ๋ผ ์ดํ์ ์๋น์ค ๊ฐ๋ฐ ์ ์ฌ์ฉํด๋ ์ด์๊ฐ ์๋ ๋ถ๋ถ์ผ๊น์?<a target="_blank" rel="noopener noreferrer nofoll
react์ธํฐ๋ํฐ๋ธ-์นํด๋ก ์ฝ๋ฉnext.jstailwind-csszustandfemaster1
ใป
0
456
2
- ํด๊ฒฐ
component ํ์ผ์์๋ tsxํ์ผ์ด ์๋๋ผ jsx ํ์ผ์ ์ฐ๋ ์ด์ ๋ฅผ ์ ์ ์์๊น์?
4.5 loading.error์์์... component ํด๋์ ๋ฃ๋ ErrorMessage์ LoadingBar ํ์ผ์ tsx๊ฐ ์๋๋ผ jsxํ์ผ์ ์ฐ๋ ์ด์ ๋ฅผ ์๊ณ ์ถ์ต๋๋ค
react์ธํฐ๋ํฐ๋ธ-์นํด๋ก ์ฝ๋ฉnext.jstailwind-csszustanda001914
ใป
1
166
2
- ํด๊ฒฐ
versel ์ ํตํ ๋ฐฐํฌ๋ฅผ ํ๋ ๊ฒ๊ณผ (ํ์๋ฒ + ํด๋ผ์ฐ๋ ํ๋์ด ํ๋ก์)๋ฅผ ํ๋ ๊ฒ์ ๋น๊ตํด์ฃผ์ค ์ ์๋์?
์๋ ํ์ธ์. ์ฐ์ ์๊ฐ๋ถํฐ ๋๋ฆฌ์๋ฉด ์ ๋ FE ๊ฐ๋ฐ์๋ ๊ทธ์ชฝ์ ์ง๋งํ๋ ๊ฒ์ ์๋๊ณ ๋ฐฑ์๋๋ฅผ ์ ์ผ๋ก ํ๊ณ ์๊ณ ์ง์์ ํ์๋ฒ์ ์ ๊ฐ์ธ ์๋น์ค๋ฅผ ๋ฐฐํฌํ ๋ชฉ์ ์ผ๋ก ํด๋น ๊ฐ์๋ฅผ ์๊ฐํ๊ฒ ๋์์ต๋๋ค
react์ธํฐ๋ํฐ๋ธ-์นํด๋ก ์ฝ๋ฉnext.jsversel๋ฐฐํฌk8sdankim
ใป
1
143
1
- ํด๊ฒฐ
์ ์๋ ์ฃ์กํ๋
Supabase, Next ํ ์คํ ์์ํ๊ธฐ (feat. ์ํ๋ฒ ์ด์ค OAuth, nextjs 14) ๊ฐ์์ฟ ํฐ ๋ ์์๊น์ ใ ใ <span style="
react์ธํฐ๋ํฐ๋ธ-์นํด๋ก ์ฝ๋ฉnext.jstailwind-csszustandfoxball
ใป
1
143
1
- ํด๊ฒฐ
๊น push๊ฐ ์๋์ ssh๋ฅผ ํ์ฐธํด๋ฉ๊ณ ์์ต๋๋ค. ใ ใ
The authenticity of host 'github.com (20.200.245.247)' can't be
react์ธํฐ๋ํฐ๋ธ-์นํด๋ก ์ฝ๋ฉnext.jstailwind-csszustandfoxball
ใป
1
129
1
- ํด๊ฒฐ
Chapter 7 ์์ ํ๋ฉด์ด ์๋ณด์ ๋๋ค.
Chapter 7 (์น์ 8) ๊ฐ์ฅ ์ฒซ ๋ฒ์งธ ๊ฐ์๋ ๋ณด์ด๋๋ฐ ์ดํ๋ถํฐ๋ ๊ฐ์ ์์์ด ๋์ค์ง๊ฐ ์๋ค์
react์ธํฐ๋ํฐ๋ธ-์นํด๋ก ์ฝ๋ฉnext.jstailwind-csszustand์์ฑ์ ์์
ใป
0
235
2
- ํด๊ฒฐ
์ค๋ฅ๋ฐ์ ๋ฌธ์ ์ ๋๋ค.
import { IoPlaySkipBackSharp, IoPlaySkipForwardSharp } from "react-icons/io5"; import { PlayerSlider } from "..
react์ธํฐ๋ํฐ๋ธ-์นํด๋ก ์ฝ๋ฉnext.jstailwind-csszustandEunwoo
ใป
1
218
1
- ํด๊ฒฐ
์ง๋ฌธ์์ต๋๋ค.
๊ฐ ํ์ด์ง๋ง๋ค loading๊ณผ error.tsx๋ฅผ ๊ฐ๊ฐ ์ฃผ๊ณ ์๋๋ฐ ๊ทธ๋ฅroot์ loading.tsx error.tsx๋ฅผ ํ๋๋ง ๋ฌ์ ๊ณต์ ํ๋ ๋ฐฉ์์ ์๋๋์? ๊ฐ ํ์ด์ง๋ง๋ค ๋ฐ๋ก ๋ ์ด์ ๊ฐ ๋ญ๊ฐ์? ํ์ ์์๋ la
react์ธํฐ๋ํฐ๋ธ-์นํด๋ก ์ฝ๋ฉnext.jstailwind-csszustandEunwoo
ใป
1
163
1







