ํ”ผ๋“œ๋กœ ๋Œ์•„๊ฐ€๊ธฐ
I Built an AI-Powered Eco Impact Calculator for My University ๐ŸŒ
Dev.toDev.to
Backend

Angular์™€ Gemini API ๊ธฐ๋ฐ˜์˜ ํ™˜๊ฒฝ ์˜ํ–ฅ ๋ถ„์„ ์‹œ์Šคํ…œ ์„ค๊ณ„

I Built an AI-Powered Eco Impact Calculator for My University ๐ŸŒ

Andy Aguirre2026๋…„ 4์›” 20์ผ2๋ถ„beginner

AI ์š”์•ฝ

Context

์‚ฌ์šฉ์ž์˜ ํ™˜๊ฒฝ ํ–‰๋™ ๋ฐ์ดํ„ฐ๋ฅผ ์ •๋Ÿ‰ํ™”ํ•˜์—ฌ ์ง€์† ๊ฐ€๋Šฅ์„ฑ ์ง€ํ‘œ๋ฅผ ์‚ฐ์ถœํ•˜๋Š” ์‹œ์Šคํ…œ ํ•„์š”์„ฑ ๋Œ€๋‘. ์ •์ ์ธ ๊ณ„์‚ฐ ๋ฐฉ์‹์„ ๋„˜์–ด AI ๊ธฐ๋ฐ˜์˜ ๊ฐœ์ธํ™”๋œ ์ธ์‚ฌ์ดํŠธ ์ œ๊ณต์„ ์œ„ํ•œ ํ™•์žฅ ๊ฐ€๋Šฅํ•œ Full-stack ๊ตฌ์กฐ ์„ค๊ณ„.

Technical Solution

  • Angular ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ํ†ตํ•œ ์‚ฌ์šฉ์ž ์ž…๋ ฅ ๋ฐ์ดํ„ฐ์˜ ํšจ์œจ์  ์ˆ˜์ง‘ ๋ฐ ์ƒํƒœ ๊ด€๋ฆฌ
  • Express API ์„œ๋ฒ„๋ฅผ ๋งค๊ฐœ๋กœ ํ•œ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง ๋ถ„๋ฆฌ์™€ ๋ฐ์ดํ„ฐ ํ๋ฆ„ ์ œ์–ด
  • MongoDB Atlas ๋„์ž…์„ ํ†ตํ•œ ๋น„์ •ํ˜• ํ™˜๊ฒฝ ๋ฐ์ดํ„ฐ์˜ ์œ ์—ฐํ•œ ์ €์žฅ ๋ฐ ์ง‘๊ณ„ ๊ตฌ์กฐ ํ™•๋ณด
  • Google Gemini API ์—ฐ๋™์„ ํ†ตํ•œ ์ •์  ์ถ”์ฒœ ๋ฉ”์‹œ์ง€์˜ ๋™์  AI ์ธ์‚ฌ์ดํŠธ ์ „ํ™˜ ์„ค๊ณ„
  • Vercel๊ณผ Render์˜ ๋ถ„๋ฆฌ ๋ฐฐํฌ๋ฅผ ํ†ตํ•œ Frontend์™€ Backend์˜ ๋…๋ฆฝ์  ์Šค์ผ€์ผ๋ง ํ™˜๊ฒฝ ๊ตฌ์ถ•
  • CORS ์„ค์ • ๋ฐ ํ™˜๊ฒฝ ๋ณ€์ˆ˜ ๊ด€๋ฆฌ๋ฅผ ํ†ตํ•œ ๊ฐœ๋ฐœ-์šด์˜ ํ™˜๊ฒฝ ๊ฐ„์˜ ๋ฐฐํฌ ์ •ํ•ฉ์„ฑ ํ•ด๊ฒฐ

์‹ค์ฒœ ํฌ์ธํŠธ

1. ์™ธ๋ถ€ AI API ์—ฐ๋™ ์‹œ ์ •์  ์‘๋‹ต์„ ๋™์  ์ธ์‚ฌ์ดํŠธ๋กœ ์ „ํ™˜ํ•˜๋Š” ๋ฐ์ดํ„ฐ ํŒŒ์ดํ”„๋ผ์ธ ์„ค๊ณ„ ๊ฒ€ํ† 

2. Frontend์™€ Backend ๋ถ„๋ฆฌ ๋ฐฐํฌ ์‹œ CORS ์ •์ฑ… ๋ฐ ๋ผ์šฐํŒ… ์„ค์ •(404 ์—๋Ÿฌ ๋“ฑ) ์‚ฌ์ „ ๊ฒ€์ฆ

3. ์‚ฌ์šฉ์ž ํ–‰๋™ ํŒจํ„ด ๋ถ„์„์„ ์œ„ํ•œ ๋น„์ •ํ˜• ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค(NoSQL) ์Šคํ‚ค๋งˆ ์œ ์—ฐ์„ฑ ํ™•๋ณด

ํƒœ๊ทธ

#Full-stack#REST API#MongoDB Atlas#Angular#Google Gemini
์›๋ฌธ ์ฝ๊ธฐ