ํ™ˆ์œ ํŠœ๋ธŒ๋ธ”๋กœ๊ทธTop 10
๋‚ด ํ”„๋กœํ•„

๋ฐ๋ธŒํ—ˆ๋ธŒ ์•ˆ๋‚ด
์†Œ๊ฐœ์—…๋ฐ์ดํŠธ ์†Œ์‹

๋ฐ๋ธŒํ—ˆ๋ธŒ ์ปค๋ฎค๋‹ˆํ‹ฐ

React Project Tutorial ( Browser Automation ) - Next JS, Gemini AI and Stagehand ๐Ÿ”ฅ๐Ÿ”ฅ

RoadsideCoder

2025. 4. 9.

0ํšŒ

#frontend
#ai
  • Next.js, Gemini AI, Stagehand๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ธŒ๋ผ์šฐ์ € ์ž๋™ํ™” ํŠœํ† ๋ฆฌ์–ผ์„ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค. ๐Ÿ”ฅ
  • Stagehand๋Š” ๋ณต์žกํ•œ ์Šคํฌ๋ฆฝํŠธ ๋Œ€์‹  ์ž์—ฐ์–ด ๋ช…๋ น์œผ๋กœ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์ž๋™ํ™”ํ•ฉ๋‹ˆ๋‹ค. ๐Ÿ—ฃ๏ธ
  • Stagehand๋Š” 'act', 'extract', 'observe' ์„ธ ๊ฐ€์ง€ ์ฃผ์š” ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ๐Ÿ› ๏ธ
  • Browserbase๋Š” headless ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์ œ๊ณตํ•˜๋ฉฐ, Stagehand์™€ ํ†ตํ•ฉํ•˜์—ฌ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๐ŸŒ
  • Gemini API ํ‚ค๋ฅผ ์„ค์ •ํ•˜์—ฌ AI ๊ธฐ๋Šฅ์„ ํ™œ์šฉํ•ฉ๋‹ˆ๋‹ค. ๐Ÿ”‘
  • Zod ์Šคํ‚ค๋งˆ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ถ”์ถœ๋œ ๋ฐ์ดํ„ฐ์˜ ๊ตฌ์กฐ๋ฅผ ์ •์˜ํ•˜๊ณ  ์œ ํšจ์„ฑ์„ ๊ฒ€์‚ฌํ•ฉ๋‹ˆ๋‹ค. โœ…
  • Stagehand๋Š” Playwright์™€ ๊ฐ™์€ ๋„๊ตฌ๋ณด๋‹ค ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฝ๊ณ , ์ฝ”๋”ฉ ๊ฒฝํ—˜์ด ์—†๋Š” ์‚ฌ๋žŒ๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๐Ÿง‘โ€๐Ÿ’ป
  • Browserbase๋Š” ๋ฌด๋ฃŒ๋กœ ์‹œ์ž‘ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, headless ๋ธŒ๋ผ์šฐ์ € ์ง€์›์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ๐ŸŽ
  • Stagehand๋Š” ์˜คํ”ˆ ์†Œ์Šค์ด๋ฉฐ ๋ฌด๋ฃŒ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๐Ÿ”“
  • Stagehand๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์›น ํŽ˜์ด์ง€์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ถ”์ถœํ•˜๊ณ , ํผ์„ ์ฑ„์šฐ๊ณ , ์ž‘์—…์„ ์ž๋™ํ™”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๐Ÿค–

Recommanded Videos