JSCODE Logo
JSCODE 박재성JSCODE 제이온JSCODE 시니
과외유튜브블로그후기
완강 후기 이벤트블로그 리뷰 이벤트AWS SAA 합격 후기 이벤트
회사명 : JSCODE대표 : 박재성사업자 등록번호 : 244-22-01557통신판매업 : 제 2023-인천미추홀-0381 호

서울특별시 구로구 경인로 20가길 11(오류동, 아델리아)

Copyright ⓒ 2026 JSCODE - 최상위 현업 개발자들의 프로그래밍 교육 All rights reserved.

이용약관개인정보처리방침

AI로 웹사이트 만들고 애드센스 수익화하기

나만의 자동화 시스템 설계하기

프롤로그 : 왜 나만의 웹사이트를 만들어야 하는가
실제로 광고 수익화에 성공한 웹사이트 소개
웹사이트를 만들기 전에 고려해야 할 것

구조와 개발 환경 이해하기

서비스 구조 4가지 패턴 정리 (①~ ④)
이번에 만들 예제(날씨 기반 옷차림 추천 사이트 아키텍처)
개발 환경 세팅

프론트엔드 서버리스 기능 구현하기

v0로 초기 화면 설계 및 개선
v0 결과물을 Cursor 프로젝트로 이식
OPEN API 선정(WeatherAPI)
Supabase Edge Function 구현 & WeatherAPI 연동
Cloudflare 환경변수, Supabase 키 설정
Cursor로 최종 UI/UX 다듬기 (API 기반 데이터 표시)
← 블로그 목록으로 돌아가기

Supabase Edge Function 구현 & WeatherAPI 연동

JSCODE 모던크루소
JSCODE 모던크루소
2026. 03. 15.
author
JSCODE 모던크루소
category
AI 수익화
createdAt
Dec 30, 2025 12:38 PM
isPublic
isPublic
series
AI로 웹사이트 만들고 애드센스 수익화하기
slug
adsense-with-ai-supabase
type
post
updatedAt
Mar 15, 2026 09:00

Supabase Edge Function 구현 & WeatherAPI 연동

OPEN API를 제공하는 사이트는 스펙 문서도 함께 제공합니다.
직접 스펙을 들여다볼 필요 없이 Cursor에게 작업을 위임합니다.
또한, 우리가 추후에 사용할 서버리스 기능을 제공하는 supabase edge function을 위한 코드 작성을 요청합니다.
notion image
notion image
 

supabase 세팅하기

supabase 회원가입 후 프로젝트를 생성해줍니다.
notion image
notion image
edge functions에 들어가서, Secrets에 WeatherAPI.com에서 발급받았던 API KEY를 넣어줍니다.
notion image
notion image
 
Functions에서는 Cursor가 만들어준 Supabase Edge function을 그대로 복사붙여넣기 해주고 배포해줍니다.
notion image
notion image
notion image
notion image
cursor한테 우리의 FE가 OPEN API를 호출할 수 있도록 하는 endpoint를 알려주고 그에 맞게 코드 수정을 요청합니다.
notion image
 
📎
이 글은 2시간 만에 AI로 애드센스 수익형 웹사이트 만들기 강의의 수업 자료 중 일부입니다.