์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
์ฑ„๋„ํ†ก ์•„์ด์ฝ˜
NEW

1์‹œ๊ฐ„๋งŒ์— Chat GPT ํด๋ก  with Cursor (์›๋ฐ์ด ํด๋ž˜์Šค)

Next.js + Cursor IDE ๋กœ ์ฑ— ํ”„๋กœ๊ทธ๋žจ์„ ํ•œ์‹œ๊ฐ„๋งŒ์— ๊ตฌํ˜„ํ•˜๋Š” ๋Šฅ๋ ฅ์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์–ด์š”.

Thumbnail

์ž…๋ฌธ์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[์›น ๊ฐœ๋ฐœ, ํ”„๋ก ํŠธ์—”๋“œ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • Chat Application MVP ์ œ์ž‘ with Cursor IDE

  • UI ํ”„๋กœํ†  ํƒ€์ดํ•‘ with Cursor IDE

  • ์ฝ”๋“œ๋ฆฌ๋ทฐ with Cursor IDE

1์‹œ๊ฐ„๋งŒ์— Chat GPT ํด๋ก  with Cursor (์›๋ฐ์ด ํด๋ž˜์Šค)


๐ŸŽฏ ์ด ๊ฐ•์˜์—์„œ ๋ฐฐ์šธ ๊ฒƒ

โœ” ChatGPT ํด๋ก  ๊ฐœ๋ฐœ โ€“ OpenAI API๋ฅผ ํ™œ์šฉํ•ด ์‹ค์ œ๋กœ ๋™์ž‘ํ•˜๋Š” AI ์ฑ—๋ด‡์„ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

โœ” Cursor ํ™œ์šฉ๋ฒ• โ€“ AI ๊ธฐ๋ฐ˜์˜ ์ฝ”๋“œ ์—๋””ํ„ฐ Cursor๋ฅผ ์‚ฌ์šฉํ•ด ๋น ๋ฅด๊ณ  ํšจ์œจ์ ์œผ๋กœ ๊ฐœ๋ฐœํ•˜๋Š” ๋ฒ•์„ ๋ฐฐ์›๋‹ˆ๋‹ค.

โœ” React + Next.js ๊ธฐ๋ณธ ๊ตฌ์กฐ โ€“ Chatbot UI๋ฅผ ๊ตฌ์ถ•ํ•˜๋ฉฐ ํ”„๋ก ํŠธ์—”๋“œ ๊ธฐ์ˆ ๊นŒ์ง€ ์ตํž™๋‹ˆ๋‹ค.

โœ” ์„œ๋ฒ„์™€ API ์—ฐ๋™ โ€“ OpenAI API๋ฅผ ๋ถˆ๋Ÿฌ์™€ ์‚ฌ์šฉ์ž ์ž…๋ ฅ์„ ์ฒ˜๋ฆฌํ•˜๋Š” ํ•ต์‹ฌ ๋กœ์ง์„ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.

โœ” ๋ฐฐํฌ๊นŒ์ง€ ์™„์„ฑ โ€“ ๋งŒ๋“  ์ฑ—๋ด‡์„ Vercel์— ๋ฐฐํฌํ•ด ์‹ค์ œ ์„œ๋น„์Šค์ฒ˜๋Ÿผ ๋™์ž‘ํ•˜๊ฒŒ ๋งŒ๋“ญ๋‹ˆ๋‹ค.


๐Ÿ’ก ์ด ๊ฐ•์˜๊ฐ€ ํ•„์š”ํ•œ ๋ถ„๋“ค

โœ… AI ์ฑ—๋ด‡์„ ์ง์ ‘ ๋งŒ๋“ค์–ด ๋ณด๊ณ  ์‹ถ์€ ๊ฐœ๋ฐœ์ž ๋ฐ ๊ธฐํš์ž

โœ… OpenAI API ํ™œ์šฉ๋ฒ•์„ ๋ฐฐ์šฐ๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ

โœ… ํ”„๋ก ํŠธ์—”๋“œ/๋ฐฑ์—”๋“œ ๊ธฐ๋ณธ ๊ฐœ๋…์„ ์ตํžˆ๊ณ  ์‹ถ์€ ์ดˆ๋ณด ๊ฐœ๋ฐœ์ž

โœ… ์‹ค์ „ ํ”„๋กœ์ ํŠธ ๊ฒฝํ—˜์ด ํ•„์š”ํ•œ ๋ถ€ํŠธ์บ ํ”„ ์ˆ˜๊ฐ•์ƒ & ์ทจ์—… ์ค€๋น„์ƒ

โœ… ๋น ๋ฅด๊ฒŒ MVP(์ตœ์†Œ ๊ธฐ๋Šฅ ์ œํ’ˆ)๋ฅผ ๊ฐœ๋ฐœํ•ด ๋ณด๊ณ  ์‹ถ์€ ์Šคํƒ€ํŠธ์—… ์ฐฝ์—…์ž

โ€‹

  • Cursor IDE๋ฅผ ํ™œ์šฉํ•ด์„œ ๋น ๋ฅด๊ฒŒ Web Application ์ œ์ž‘ (1์‹œ๊ฐ„๋งŒ์— 1ํ”„๋กœ์ ํŠธ)

    • AI Agent ๊ธฐ๋Šฅ์„ ์ด์šฉํ•œ ๋น ๋ฅธ ํ”„๋กœํ† ํƒ€์ดํ•‘ with cursor IDE


๐Ÿ’ก ๊ฒฐ๊ณผ ๋ฏธ๋ฆฌ ๋ณด๊ธฐ

Live Demo : https://clone-chat-gpt-cursor.vercel.app

๊ฐ•์˜ ์ˆ˜์—… ์ž๋ฃŒ : https://dodokyo.github.io/docs/free-lectures/chat-gpt-cursor/chat-gpt-cursor-1โ€‹

์‚ฌ์šฉํ•˜๋Š” ๊ธฐ์ˆ  ์Šคํƒ, ์„ ํ–‰์ง€์‹โ€‹

  • React, Typescript

  • Next.js AppRouter

  • TailwindCss

  • RadixUI

  • Shadcn

  1. Next.js AppRouter : https://nextjs.org/

  2. TailwindCSS : https://tailwindcss.com/

  3. Radix UI : https://www.radix-ui.com/

  4. Shadcn : https://ui.shadcn.com/docs/dark-mode/next

์ด๋Ÿฐ ๋‚ด์šฉ์„ ๋ฐฐ์›Œ์š”

์ˆ˜๊ฐ• ์ „ ์ฐธ๊ณ  ์‚ฌํ•ญ

์ฃผ์˜ ์‚ฌํ•ญ

  • ์ด ๊ฐ•์˜๋Š” AI Agent์™€ ํ•จ๊ป˜ํ•˜๋Š” ๊ฐ•์˜ ์ž…๋‹ˆ๋‹ค. ๊ฐ•์˜๋ฅผ ๋”ฐ๋ผ ํ•˜๋”๋ผ๋„ ๊ฒฐ๊ณผ๋ฌผ์ด ๋‹ค๋ฅผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์ด ๊ฐ•์˜๋ฅผ ์ˆ˜๊ฐ•ํ•˜์‹œ๋Š”๋ฐ Cursor IDE๋Š” ๋ฌด๋ฃŒ ๋ฒ„์ „ -> ์œ ๋ฃŒ ๋ฒ„์ „์ด ํ•„์š”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • GPT API์— ๋น„์šฉ ๋ฐœ์ƒ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • AI๋กœ 1์ผ 1ํ”„๋กœ์ ํŠธ ํ•˜๊ณ ์‹ถ์€ ์‚ฌ๋žŒ!

  • Next.js + AI Application ๋งŒ๋“ค๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • React

  • Next

  • Typescript

์•ˆ๋…•ํ•˜์„ธ์š”
๋„๋„(์ฝ”๋”ฉ๋ฃจํŒก)์ž…๋‹ˆ๋‹ค.

3,013

๋ช…

์ˆ˜๊ฐ•์ƒ

102

๊ฐœ

์ˆ˜๊ฐ•ํ‰

72

๊ฐœ

๋‹ต๋ณ€

4.7

์ 

๊ฐ•์˜ ํ‰์ 

5

๊ฐœ

๊ฐ•์˜

  • ํ”„๋ก ํŠธ ๊ฐœ๋ฐœ์ž๋กœ ๋„ค์นด๋ผ์ฟ ๋ฐฐ ์ค‘ ํ•˜๋‚˜์˜ IT์„œ๋น„์Šค ๊ธฐ์—…์— ์žฌ์งํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๐Ÿ˜€

  • ๐Ÿš€ SW๋งˆ์—์ŠคํŠธ๋กœ Expert ์ทจ์—… ๋ฉ˜ํ† ๋ง

  • ๐Ÿš€ Naver Boostcamp BE ๋ฉ˜ํ†  ๊ฒฝํ—˜

  • ๐Ÿš€ FE 7Code ๋กœ๋“œ๋งต ๊ฐ•์˜ ์ œ์ž‘

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

16๊ฐœ โˆ™ (56๋ถ„)

๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!

๋ฌด๋ฃŒ