์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

React + GPT API๋กœ AIํšŒ๊ณ ๋ก ์„œ๋น„์Šค ๊ฐœ๋ฐœ (์›๋ฐ์ด ํด๋ž˜์Šค)

1์‹œ๊ฐ„์•ˆ์— ๋๋‚ด๋Š” React๊ธฐ๋ฐ˜์˜ GPT AI์„œ๋น„์Šค ๊ฐ•์˜ ์ˆ˜๊ฐ• ํ›„ ๋‚˜๋งŒ์˜ AI GPT SASS ์†”๋ฃจ์…˜์„ ๋งŒ๋“ค์–ด ๋ณด์„ธ์š”.

(4.9) ์ˆ˜๊ฐ•ํ‰ 38๊ฐœ

์ˆ˜๊ฐ•์ƒ 2,102๋ช…

๋‚œ์ด๋„ ์ดˆ๊ธ‰

์ˆ˜๊ฐ•๊ธฐํ•œ ๋ฌด์ œํ•œ

ํ† ์ดํ”„๋กœ์ ํŠธ
ํ† ์ดํ”„๋กœ์ ํŠธ
gpt
gpt
api
api
ํ† ์ดํ”„๋กœ์ ํŠธ
ํ† ์ดํ”„๋กœ์ ํŠธ
gpt
gpt
api
api
๋‚ ๊ฐœ ๋‹ฌ๋ฆฐ ๋™์ „

๊ฐ•์˜ ์ถ”์ฒœํ•˜๊ณ  ์„ฑ์žฅ๊ณผ ์ˆ˜์ต์„ ๋งŒ๋“ค์–ด ๋ณด์„ธ์š”!

๋‚ ๊ฐœ ๋‹ฌ๋ฆฐ ๋™์ „

๋งˆ์ผ€ํŒ… ํŒŒํŠธ๋„ˆ์Šค

๊ฐ•์˜ ์ถ”์ฒœํ•˜๊ณ  ์„ฑ์žฅ๊ณผ ์ˆ˜์ต์„ ๋งŒ๋“ค์–ด ๋ณด์„ธ์š”!

๋จผ์ € ๊ฒฝํ—˜ํ•œ ์ˆ˜๊ฐ•์ƒ๋“ค์˜ ํ›„๊ธฐ

๋จผ์ € ๊ฒฝํ—˜ํ•œ ์ˆ˜๊ฐ•์ƒ๋“ค์˜ ํ›„๊ธฐ

4.9

5.0

moonni99

33% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

๋ฌด๋ฃŒ ๊ณต์œ  ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

5.0

๊น€๋ฏผํ˜ธ

33% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

1. ์งง๊ฒŒ ์š”์•ฝํ•ด์„œ ๋“ฃ๋Š” ๋А๋‚Œ์ž…๋‹ˆ๋‹ค. 2. ์ „์ฒด์ ์ธ ๋ถ€๋ถ„๋“ค์„ ์กฐ๊ธˆ์”ฉ ๋‹ค๋ฃจ๊ณ  ์žˆ๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. 3. 1์‹œ๊ฐ„์— ์ „๋ฐ˜์ ์ธ ๋‚ด์šฉ์„ ๋‹ค๋ฃจ์–ด์„œ ๊ฐ€๋ณ๊ฒŒ ๋ณด๊ธฐ ์ข‹์„ ๋“ฏ ํ•ฉ๋‹ˆ๋‹ค.

5.0

parkang

100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

์‰ฝ๊ณ  ๊ฐ„๊ฒฐํ•˜๊ฒŒ ์„ค๋ช…ํ•ด ์ฃผ์…จ๋„ค์š” ์†๋„๊ฐ€ ์กฐ๊ธˆ ๋น ๋ฅธ๊ฐ์ด ์žˆ๊ธด ํ•˜์ง€๋งŒ, ๋ฆฌ์•กํŠธ๋ฅผ ์•ˆ ํ•ด๋ณธ ์‚ฌ๋žŒ๋„ ์ดํ•ดํ•˜๊ธฐ ์‰ฌ์› ์Šต๋‹ˆ๋‹ค. ๋„ˆ๋ฌด ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

์ˆ˜๊ฐ• ํ›„ ์ด๋Ÿฐ๊ฑธ ์–ป์„ ์ˆ˜ ์žˆ์–ด์š”

  • ChatGPT Prompt

  • ์›น๊ฐœ๋ฐœ (๊ธฐ์ดˆ)

  • React ( Vite, Styled-component, Antd )

  • GPT API ์—ฐ๋™

GPT API๋ฅผ ์ด์šฉํ•˜์—ฌ ๋งŒ๋“œ๋Š”
React ๊ธฐ๋ฐ˜ AI ์„œ๋น„์Šค ๐Ÿ’ป

์š”์ฆ˜ ํ”„๋ก ํŠธ๋Š” React๊ฐ€ ๋Œ€์„ธ๋ผ๋˜๋ฐ, 1์‹œ๊ฐ„๋งŒ์— ์“ธ๋งŒํ•œ ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค์–ด ๋ณผ ์ˆ˜๋Š” ์—†์„๊นŒ์š”? 

GPT API ๋ฅผ ์ด์šฉํ•ด์„œ React ๊ธฐ๋ฐ˜์˜ AI ์„œ๋น„์Šค - ์‹ฌ๋ฆฌ ์ƒ๋‹ด์‚ฌ GPT, AI ํšŒ๊ณ ๋ก์„ ๋งŒ๋“ค์–ด๋ด…๋‹ˆ๋‹ค.
๋‹จ ํ•œ ์‹œ๊ฐ„๋งŒ์—, ๋ฌด๋ฃŒ๋กœ ์ตœ์‹  ๊ธฐ์ˆ ์„ ํ™œ์šฉํ•ฉ๋‹ˆ๋‹ค!


์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค.

์›น ๊ธฐ๋ฐ˜์˜
GPT ์„œ๋น„์Šค๋ฅผ
๋งŒ๋“ค๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ

์›น ๊ฐœ๋ฐœ์„
ํฅ๋ฏธ๋กญ๊ฒŒ
์‹œ์ž‘ํ•˜๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ

๋ฆฌ์•กํŠธ ๊ฐœ๋ฐœ์„
๋ง›๋ณด๊ณ 
์‹ถ์€ ์‚ฌ๋žŒ

 

์ด ๊ฐ•์˜๋ฅผ ํ†ตํ•ด ๋ฐฐ์šธ ์ˆ˜ ์žˆ๋Š” ๊ฒƒ

  • React ๊ธฐ๋ฐ˜์˜ ์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ œ์ž‘
  • Chat GPT์˜ ํ”„๋กฌํ”„ํŠธ๋ฅผ ๊ฐœ๋ฐœ ์„œ๋น„์Šค์™€ ์—ฐ๋™
  • React ๊ฐœ๋ฐœ ์ „๋ฐ˜์˜ ๊ณผ์ •์„ ํ•™์Šต. ( ์ด๋ฒคํŠธ, ์ž…๋ ฅ์ฒ˜๋ฆฌ, ์Šคํƒ€์ผ๋ง, API ์—ฐ๋™ ) 

๊ฐ•์˜ ํŠน์ง• โœจ

  • ์‹ค์Šต ์œ„์ฃผ๋กœ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ฉ๋‹ˆ๋‹ค. 
  • ๊ธด ์„ค๋ช…์—†์ด ๋ฐ”๋กœ ์„œ๋น„์Šค๋ฅผ ์ œ์ž‘ํ•˜๋Š”๋ฐ ํ•„์š”ํ•œ ๊ฐœ๋…๋งŒ ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค. 
  • ๊ฐ„๋‹จํ•œ ์„œ๋น„์Šค ๊ธฐํš๊ณผ GPT Prompt์„ ์ด์šฉํ•ด์„œ Backend API๋ฅผ ์ œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.
  • ๋ฆฌ์•กํŠธ๋ฅผ ๋ชฐ๋ผ๋„ ๊ฐ„๋‹จํ•œ ์›น์ง€์‹์„ ๊ธฐ๋ฐ˜์œผ๋กœ ์„œ๋น„์Šค๋ฅผ ์ œ์ž‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 

ํ•™์Šต ๋‚ด์šฉ ๐Ÿ“š

๋งŒ๋“ค์–ด๋ณผ ์„œ๋น„์Šค! ๋ฏธ๋ฆฌ๋ณด๊ธฐ

  • 1. ์‚ฌ์šฉ์ž๊ฐ€ ์˜ค๋Š˜ ์žˆ๋˜ ์ผ์„ ์ ์Šต๋‹ˆ๋‹ค.
  • 2. ์‹ฌ๋ฆฌ์ƒ๋‹ด์‚ฌ GPT๊ฐ€, ๊ธ€์„ ์™„์„ฑํ•ด ์ค๋‹ˆ๋‹ค.
  • 3. ์‹ฌ๋ฆฌ๋ถ„์„๊ณผ ์กฐ์–ธ๊นŒ์ง€ ํ•ด๋“œ๋ ค์š”. 

 


์˜ˆ์ƒ ์งˆ๋ฌธ Q&A ๐Ÿ’ฌ

Q. GPT API ํ˜ธ์ถœ์€ ์œ ๋ฃŒ ์ธ๊ฐ€์š”?
A. ์ฒ˜์Œ ํšŒ์›๊ฐ€์ž…ํ•˜๋ฉด ๋ฌด๋ฃŒ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ํฌ๋ ˆ๋”ง์„ ์ค๋‹ˆ๋‹ค. ๊ทธ ๊ธฐ๊ฐ„์ด ๋๋‚˜๋ฉด ๊ฒฐ์ œ๊ฐ€ ํ•„์š”ํ•ด์š”.

Q. ์ฝ”๋“œ๋ฅผ ๋†“์ณค์–ด์š”.
A. ๊นƒํ—ˆ๋ธŒ์— ๊ณต๊ฐœ๋œ ์†Œ์Šค์ฝ”๋“œ๋ฅผ ๊ฐ€์ ธ๋‹ค ์“ฐ์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.!

github : https://github.com/dodokyo/gpt-diary-service 

 


์ˆ˜๊ฐ• ์ „ ์ฐธ๊ณ  ์‚ฌํ•ญ ๐Ÿ“ข

์‹ค์Šต ํ™˜๊ฒฝ

  • M1 Mac Book Air ํ™˜๊ฒฝ์—์„œ ์‹ค์Šต์„ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค. 

์„ ์ˆ˜ ์ง€์‹ ๋ฐ ์œ ์˜์‚ฌํ•ญ

  • ์•ฝ๊ฐ„์˜ HTML/CSS/JS ์ง€์‹์„ ๋ฐ”ํƒ•์œผ๋กœ ๊ฐ•์˜ ์ œ์ž‘.
  • ๋ˆˆ์น˜๊ฐ€ ์ข‹์€ ์‚ฌ๋žŒ์€ ์—†์–ด๋„ ์ˆ˜๊ฐ• ๊ฐ€๋Šฅ! 

์ง€์‹๊ณต์œ ์ž ์†Œ๊ฐœ โœ’๏ธ

IT ์„œ๋น„์Šค ๋Œ€๊ธฐ์—…์— ์›น๊ฐœ๋ฐœ์ž๋กœ ์žฌ์ง์ค‘ ์ž…๋‹ˆ๋‹ค.!
์ฝ”๋”ฉ ๋ฃจํŒก์ด๋ผ๋Š” Youtube ์ฑ„๋„์„ ์šด์˜ํ•˜๊ณ  ์žˆ์–ด์š”.

  • ์ฃผ์ œ : ์ทจ์—… / ์›น๊ฐœ๋ฐœ ๊ฐ•์˜ 

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

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

  • ์ฒ˜์Œ ๋ฆฌ์•กํŠธ๋ฅผ ์žฌ๋ฐŒ๊ฒŒ ๋ฐฐ์šฐ๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ

  • GPT๊ธฐ๋ฐ˜์˜ ๋‚˜๋งŒ์˜ ์›น์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ

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

  • ์•ฝ๊ฐ„์˜ HTML/CSS/JS ๊ธฐ๋ณธ

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

4,157

๋ช…

์ˆ˜๊ฐ•์ƒ

175

๊ฐœ

์ˆ˜๊ฐ•ํ‰

94

๊ฐœ

๋‹ต๋ณ€

4.8

์ 

๊ฐ•์˜ ํ‰์ 

5

๊ฐœ

๊ฐ•์˜

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

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

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

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

๋”๋ณด๊ธฐ

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

์ „์ฒด

12๊ฐœ โˆ™ (59๋ถ„)

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

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

38๊ฐœ

4.9

38๊ฐœ์˜ ์ˆ˜๊ฐ•ํ‰

  • ํ™ฉ์œ ๋ฏผ๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
    ํ™ฉ์œ ๋ฏผ

    ์ˆ˜๊ฐ•ํ‰ 2

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

    33% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

    • ์กฐ๋Œ€์ผ๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
      ์กฐ๋Œ€์ผ

      ์ˆ˜๊ฐ•ํ‰ 2

      โˆ™

      ํ‰๊ท  ํ‰์  4.5

      5

      67% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

      • ํ˜„์„ฑ๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
        ํ˜„์„ฑ

        ์ˆ˜๊ฐ•ํ‰ 5

        โˆ™

        ํ‰๊ท  ํ‰์  3.6

        4

        100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

        ์ข€ ๋” ๊นŠ์€ ์ดํ•ด๋ฅผ ํ•˜๊ณ  ์‹ถ์—ˆ๋Š”๋ฐ ๊ฒ‰ํ•ก๊ธฐ๋งŒ ํ•˜๋Š” ๋А๋‚Œ์ด๋„ค์—ฌ.

        • moonni99๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
          moonni99

          ์ˆ˜๊ฐ•ํ‰ 3

          โˆ™

          ํ‰๊ท  ํ‰์  5.0

          5

          33% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

          ๋ฌด๋ฃŒ ๊ณต์œ  ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

          • 1027.bmy๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
            1027.bmy

            ์ˆ˜๊ฐ•ํ‰ 1

            โˆ™

            ํ‰๊ท  ํ‰์  5.0

            5

            33% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

            ๋„๋„(์ฝ”๋”ฉ๋ฃจํŒก)๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜

            ์ง€์‹๊ณต์œ ์ž๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

            ๋น„์Šทํ•œ ๊ฐ•์˜

            ๊ฐ™์€ ๋ถ„์•ผ์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

            ๋ฌด๋ฃŒ