ํผ๋๋ก ๋์๊ฐ๊ธฐ
Dev.toBackend
์๋ฌธ ์ฝ๊ธฐ
Angular์ Gemini API ๊ธฐ๋ฐ์ ํ๊ฒฝ ์ํฅ ๋ถ์ ์์คํ ์ค๊ณ
I Built an AI-Powered Eco Impact Calculator for My University ๐
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) ์คํค๋ง ์ ์ฐ์ฑ ํ๋ณด