Vibe Coding_조코딩_1주차

2026-03-11 22:30~00:10
1주차 분량 수강

프론트엔드

언어 3개만 알면 모두 가능

• HTML : 뼈대
• CSS : 꾸며주기
• JavaScript : 액션 부여/이벤트 설정

개발 환경 세팅

메모장 index.html

임시 백엔드(프론트엔드 실습을 위한)

1. 내 컴퓨터 서버로 공개하기
2. 외부 서버 빌리기
   방법 1) CloudFlare에 index.html 파일 업로드 하여 배포
   방법 2) Firebase Studio
   - 오른쪽 사이드바에서 웹브라우저로 열어줘 프롬프트 입력
   - 혹은 터미널에서 바로 AI 사용 가능
   Gemini CLI 다운로드 코드를 터미널에 붙여넣기
   : npm install -g @google/gemini-cli

단계 정리

Firebase Studio에서 작업한 것(LLM을 장착한)
Github로 버전 관리 후
CloudFlare에서 바로 배포

백엔드

외부 서비스 활용

1. Formspree

• 제휴 제안 - 데이터베이스 없이도 온라인 폼(문의하기, 설문조사 등)을 쉽게 만들고 관리할 수 있게 해주는 서비스
• 메일 보내는 기능을 백엔드 구현 없이 외부 서비스를 활용

2. DISQUSS

• 댓글 서비스 제공
• 새로운 웹사이트 만들기 후 나온 코드 복붙해서 Firebase 터미널 창에서 gemini에게 댓글 기능 달아달라고 부탁

3. Teachable Machine

• 쉽고 빠르게 머신러닝 모델을 학습시킬 수 있는 웹 기반 도구
• 학습시킨 모델을 추출 가능하고 해당 모델은 자동으로 클라우드에 올라가 제공됨