Next.js ์๋ฒฝ ๋ง์คํฐ (v15): ๋ ธ์ ๊ธฐ๋ฐ ๊ฐ๋ฐ์ ๋ธ๋ก๊ทธ ๋ง๋ค๊ธฐ (with ์ปค์AI)
์ต์ Next.js v15 App Router๋ฅผ ํ์ตํ๋ฉฐ ๋ ธ์ ๊ธฐ๋ฐ์ ์ค์ฉ์ ์ธ ๊ฐ๋ฐ์ ๋ธ๋ก๊ทธ๋ฅผ ํจ๊ป ๊ตฌ์ถํ๋ ๊ฐ์์ ๋๋ค. ์ถ๊ฐ๋ก ์ปค์ AI ํ์ฉ๋ฒ ๋ฑ ๋ค์ํ ์ธ์ฌ์ดํธ๋ ์ป์ ์ ์์ต๋๋ค.
์๊ฐ์ 348๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ
๋ค๋ฅธ ์๊ฐ์๋ค์ด ์์ฃผ ๋ฌผ์ด๋ณด๋ ์ง๋ฌธ์ด ๊ถ๊ธํ์ ๊ฐ์?
- ๋ฏธํด๊ฒฐ
rehype-sanitize ์ค์น์ ํ์์ฑ
Rehype-sanitize๋ฅผ ์ฌ์ฉํ๋ฉด ์ด๋ป๊ฒ ์ค์ ์ ํ๋ , ์ ๋ํ ํ์ฉ์ ์ค์ ํ๋ , '๋ฐ์ค'์ ๊ธ๋ ์์์ ๋ํ ๊ฒฐ๊ณผ๊ฐ ์ ๋๋ก ์ด๋ฃจ์ด์ง์ง ์์ต๋๋ค. ํญ์ ์๋ต๋์ด ๋ฐ์ค์ณ๋ ๋ถ๋ถ์ ์ญ์ ๋๋ ๊ฒฐ๊ณผ๋ฅผ ๋ณ์ต
react๋ธ๋ก๊ทธnext.jscursorcursorai์ฃผ๋ณ๊ท
ใป
2๋ฌ ์
0
60
2
- ๋ฏธํด๊ฒฐ
Notion API-DB ์ฐ๊ฒฐ์ด ์๋ผ์
๋ ธ์ API ํตํฉํด์ APIํค ์ ๋๋ก ์ ๋ ฅํ๊ณ , ๋ธ๋ก๊ทธํ ํ๋ฆฟ ๋ฐ์ดํฐ๋ฒ ์ด์ค์์ ๋งํฌ ์คํํ๊ณ , ๊ทธ ๋งํฌ์์ ์ฌ์ดํธ์ฃผ์๋ ์ฟผ๋ฆฌ์คํธ๋ง ๋ค ๋ ๋ฆฌ๊ณ ID ๋ถ๋ถ๋ง ์ ๋๋ก ์
react๋ธ๋ก๊ทธnext.jscursorcursorai์ค์คํด
ใป
5๋ฌ ์
0
376
2
- ๋ฏธํด๊ฒฐ
private folders ์ ์ ์ญ ํด๋
ํ๋ก์ ํธ ๊ฐ๋ฐ ์ค์, src/components ํด๋์ ์ฌ์ฌ์ฉํ ๊ฒ๋ค์ ๋ง๋ค์ด์ ์ฌ์ฉํ๋ ๊ฒ๊ณผ, src/app/_components ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ๋ฐฐ์ ๋๋ฐ, ๋์ ์ฌ์ฉ์ฑ ์ฐจ์ด๊ฐ ์๋์? ๊ตณ์ด ์ด ๋ ๊ธฐ๋ฅ์ ๋ ๋ค ์ฌ
react๋ธ๋ก๊ทธnext.jscursorcursoraiJunho
ใป
5๋ฌ ์
0
52
2
- ๋ฏธํด๊ฒฐ
ํด์ฆ ์ง๋ฌธ ํ์ด ์ค๋ฅ
<img src="https://cdn.inflearn.com/public/files/posts/5f1f9814-0fcb-45c6-9404-fe88fe58927d/31fb358c-2aa5-4c3b-8fc4-74f7417c6a0b.png" media-type="img"
react๋ธ๋ก๊ทธnext.jscursorcursoraiJunho
ใป
5๋ฌ ์
0
70
2
- ๋ฏธํด๊ฒฐ
Streaming ๊ด๋ จํด์ ๋ฌธ์๋๋ฆฝ๋๋ค.
Stream์ ๊ตฌํํ ๋ posts, tags ์ ๋ณด๋ฅผ ์๋ฒ์ฌ์ด๋์์ ํธ์ถํ๊ณ promises ๋ฅผ ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ์ ๋๊ฒจ use ํ ์ผ๋ก ๋ฐ๋๋ฐ์. <p style="text-align: l
react๋ธ๋ก๊ทธnext.jscursorcursoraiํ์ํ์
ใป
6๋ฌ ์
0
62
2
- ๋ฏธํด๊ฒฐ
ISR ๋งค์ปค๋์ฆ์ ๋ํ ๊ถ๊ธ์ฆ
์๋ฝํ์ธ์. ๋ช์ผ ์ ๊ตฌ๋งคํ๊ณ ์ด๊ฐํ๊ณ ์๋ ๊ฐ๋ฐ์์ ๋๋ค. ISR ๋งค์ปค๋์ฆ์ ๋ํ ๊ถ๊ธ์ฆ์ด ์๋๋ฐ์. <p s
react๋ธ๋ก๊ทธnext.jscursorcursoraiํ์ํ์
ใป
6๋ฌ ์
0
56
2
- ๋ฏธํด๊ฒฐ
cursor AI ํ๋ก์ ํธ ๋ฃฐ ๊ด๋ จ ์ง๋ฌธ ๋๋ฆฝ๋๋ค.
์๋ ํ์ธ์ ๊ฐ์ฌ๋! ๊ฐ์ ํญ์ ์ฌ๋ฐ๊ฒ ์ ๋ณด๊ณ ์์ต๋๋ค.๋ค๋ฆ์ด ์๋๋ผ cursor AI๊ฐ ์์์ ๋ฒ์ ๊ณผ
react๋ธ๋ก๊ทธnext.jscursorcursorai๋๋ค
ใป
6๋ฌ ์
0
249
2
- ๋ฏธํด๊ฒฐ
params ์ Promise ๊ฐ์ฒด ํ์ ์ด ์ง์ ๋์ด์ผ ํ๋ ์ด์ ? ์ต์ ?
์๋ ํ์ธ์! ๊ฐ์ 5:15์ด ๋ถํฐ์ ์ค๋ช ์ ์กฐ๊ธ๋ง ๋ ์์ธํ ์ค๋ช ํด์ฃผ์๋ฉด ๊ฐ์ฌํ ๊ฒ ๊ฐ์์์!"์ด๋ฌํ ํ๋์ฆ๋ ํ๋ผ๋ฏธ์ค๋ก ๊ฐ์ ธ์์ผ๊ฒ ์ฃ ์ฐ๋ฆฌ๊ฐ ์ต์ ์ ์ฌ์ฉํ๊ณ ์๊ธฐ
react๋ธ๋ก๊ทธnext.jscursorcursorai์ฃผ๋ณ๊ท
ใป
6๋ฌ ์
0
66
1
- ๋ฏธํด๊ฒฐ
streaming ํ์ด์ง ๋ณด์ ํ์
์๋ ํ์ธ์, ์ ํ์ตํ๊ณ ์๋ ํ์์ ๋๋ค. ๊ฐ์ ๋ฐ๋ผ๊ฐ๋ฉด์, streaming ํํธ๋ ๋ค ์ ์ฉ์ ํ์ต๋๋ค. ์๊ฐ ํญ์์ ํ ํญ์ผ๋ก ์ด๋ ์์
react๋ธ๋ก๊ทธnext.jscursorcursorai์ฃผ๋ณ๊ท
ใป
6๋ฌ ์
1
47
2
- ๋ฏธํด๊ฒฐ
remark-gfm
remark-gfm ์ค์น ์ดํ ๋ชจ๋ css ๊ฐ ๋ง๊ฐ์ง๊ณ ๊ธ์์ ์ด๋ฏธ์ง๋ง ๋ ๋๋ง ๋๋๋ฐ ๋ญ๊ฐ ๋ฌธ์ ์ผ๊น์? global css ์์ import ํ๊ฒ๋ ์๋๊ณ ์์๊ณผ ๊ฐ์ด Plugin ์ผ๋ก ํ์ด์.<p style="
react๋ธ๋ก๊ทธnext.jscursorcursorai์ฃผ๋ณ๊ท
ใป
6๋ฌ ์
0
87
2
- ๋ฏธํด๊ฒฐ
๋งํฌ์ ํํธ ๊ฐ๋ ์ฑ ํฅ์ ๋ฐฉ๋ฒ
<img src="https://cdn.inflearn.com/public/files/posts/1b00747d-276b-4b99-b1ab-f4ea9850d956/a0adfaf4-e19c-423d-8cbb-8e9c40ec38ca.png" media-type="img"
react๋ธ๋ก๊ทธnext.jscursorcursorai์ฃผ๋ณ๊ท
ใป
6๋ฌ ์
0
50
2
- ๋ฏธํด๊ฒฐ
Next.js ๋ธ๋ก๊ทธ ๊ฒฐ๊ณผ๋ฌผ ๊ณต์ ์ด๋ฒคํธ ์งํ ์ฌ๋ถ
์๋ ํ์ธ์, ์ ์๋. ์์ง ๋์ค์ฝ๋์ Next.js ๋ธ๋ก๊ทธ ๊ฒฐ๊ณผ๋ฌผ ๊ณต์ ํ๋ฉด ์ค์ฉ์ ์ธ ๋ธ๋ก๊ทธ ์์ค์ฝ๋ ๋ฐ์ ์ ์๋ ์ด๋ฒคํธ ์งํํ๊ณ ์๋์?<
react๋ธ๋ก๊ทธnext.jscursorcursorai์ฐ๋ ๊ธฐ
ใป
6๋ฌ ์
0
60
1
- ๋ฏธํด๊ฒฐ
๋ธ๋ก๊ทธ PostCard ์ด๋ฏธ์ง ์๋จ ์ฌ๋ฐฑ
<img src="https://cdn.inflearn.com/public/files/posts/9fd41b27-b337-4afd-b8ee-8302dcd2201f/89b2b944-a78f-402d-9e64-11f2cc076cae.png" media-type="img"
react๋ธ๋ก๊ทธnext.jscursorcursorai์ฃผ๋ณ๊ท
ใป
6๋ฌ ์
0
57
3
- ๋ฏธํด๊ฒฐ
flex-col ๊ณผ space-y-6 ์ฐจ์ด
space-y-6๊ณผ flex-col ๋ก gap-6(๋๋ gap-y-6)์ ์ฃผ๋ ๋ฐฉ์์ ์ฐจ์ด๋ฅผ ๋ชจ๋ฅด๊ฒ ์ด์๋
react๋ธ๋ก๊ทธnext.jscursorcursorai์ฃผ๋ณ๊ท
ใป
6๋ฌ ์
0
95
1
- ๋ฏธํด๊ฒฐ
์ปดํ์ผ ์๋ฌ ๋ฐ ์์กด์ฑ ์ถฉ๋ ๋ฌธ์
์๋ ํ์ธ์, ์งํํ๋ค๊ฐ ์ฌ๋ฌ ์ด์๊ฐ ๋ฐ์ํด์ ํ ๋ฒ์ ๋ฌถ์ด ์ฌ์ญค๋ณด๊ณ ์ ํฉ๋๋ค!์ค๋ฅ๊ฐ ๊ณ์ ๋ฐ์ํด์ ๊ฐ์ฌ๋ ์ฝ๋๋ ๋ณด์๋๋ฐ๋ ์ ๋ชจ๋ฅด๊ฒ ์ต๋๋ค.<p style
react๋ธ๋ก๊ทธnext.jscursorcursorai์ฐ๋ ๊ธฐ
ใป
7๋ฌ ์
0
85
2
- ๋ฏธํด๊ฒฐ
TypeError: Invalid URL
์๋ ํ์ธ์,1) ๊ฐ์ฌ๋ ๊น์ฝ๋์์ ์ฝ๋ cloneํด์ ๊ฐ์ ธ์จ ํ2) ๋ ธ์ ํ๊ฒฝ ๋ณ์ ์ธํ <p st
react๋ธ๋ก๊ทธnext.jscursorcursorai์์ฑ์ ์์
ใป
7๋ฌ ์
0
146
2
- ๋ฏธํด๊ฒฐ
์ธ์ 6์ ํด์ฆ 5๋ฒ ์ ๋ต ์ต์ ๋ ์บ์น์ฌ ์๋๊ฐ์?
<img src="https://cdn.inflearn.com/public/files/posts/68c3f38d-8eba-46f0-a28b-66a9374e6e19/564e3ecf-df0a-406c-9e6d-12ca2f094813.png" media-type="img"
react๋ธ๋ก๊ทธnext.jscursorcursoraiJmob
ใป
7๋ฌ ์
1
63
2
- ๋ฏธํด๊ฒฐ
์์ธ ํ์ด์ง 404 ์๋ฌ ๋ฐ์
์๋ ํ์ธ์, ์ง์ฝ๋ฉ๋.๋๋ถ์ ์ฌ๋ฐ๋ ์์ ๋ฃ๊ณ ์์ต๋๋ค. :) <p style="text
react๋ธ๋ก๊ทธnext.jscursorcursorai์์ฑ์ ์์
ใป
7๋ฌ ์
0
90
2
- ๋ฏธํด๊ฒฐ
์คํ์ผ์ด ์ ์ฉ ์๋๋ ๋ฌธ์
<img src="https://cdn.inflearn.com/public/files/posts/596b8c86-d0d9-4882-bc28-b6d2c8f7a6b0/da54e43c-b8d0-465a-b176-fe433134f00d.png" media-type="img"
react๋ธ๋ก๊ทธnext.jscursorcursorai์์ฑ์ ์์
ใป
7๋ฌ ์
0
80
2
- ๋ฏธํด๊ฒฐ
cursorAI์ rule ์์ฑ ์ rule type์ด ์ ๋์ค๋ ํ์ ๋ฐ์
์๋ ํ์ธ์,cursor์์ ์ค์ > rules & memories ์ ํ<p style
react๋ธ๋ก๊ทธnext.jscursorcursorai์ฐ๋ ๊ธฐ
ใป
7๋ฌ ์
0
158
3






