803. 글로벌 마켓 모니터링 대시보드
글로벌 마켓 대시보드 — 로컬에서 만들기
- 자연어 지시(바이브코딩)만으로 데이터 수집 → 저장 → 화면까지, 내 PC에서 실제로 도는 웹 애플리케이션 한 개를 완성한다.
- 데이터 소스·기술 스택을 AI와 대화하며 추천받고 테스트로 검증한 뒤, 결론을
DESIGN.md한 장에 모아 Plan Mode로 개발에 들어가는 흐름을 익힌다. - RSS·API·스크래핑 수집, 유사 컬럼 통합, 클라이언트 사이드 필터의 개념을 실무 맥락에서 이해한다(GitHub·Render 배포는 2부에서 다룬다).
이 장의 학습 흐름
- 완성작을 먼저 본다 — 무엇을 만드는지, 어떤 화면이 나오는지 (사례)
- 사전 준비를 갖춘다 — 설치 SW·계정·사내 환경 점검 (이해)
- 데이터 소스와 기술을 AI와 정한다 — 추천 → 테스트 →
DESIGN.md(사례) - Plan Mode로 설계를 확정한다 — 누락된 결정을 되묻게 한다 (사례)
- 크롤러·DB·프론트엔드를 개발해 localhost에서 띄운다 — 여기까지가 1부(로컬 제작) (사례)
- 2부 안내 — 로컬에서 완성한 앱을 GitHub·Render로 공개 URL에 올리는 배포 과정은 2부에서 별도로 다룹니다.
- 준비물 — VS Code, 바이브코딩 도구(Claude Code 또는 Codex) 확장, Python 3.12+, Git, GitHub·Render 계정. 직접 만들 환경이 없으면 완성작 URL과 첨부 프롬프트로 따라 읽기.
완성작 미리보기
완성작학습 안내열어 보기. 본격적으로 만들기 전에 "무엇을 만드는지"를 눈으로 확인합니다. 아래 라이브 URL을 한 번 열어 우상단 REFRESH를 눌러 보고, 화면 구성을 머릿속에 그려 두십시오.
원자재 시세 · 글로벌 뉴스 · 해외 거래처 언급 — 종합상사·트레이딩 실무에 필요한 세 가지 정보를 하나의 대시보드에 통합한 웹 애플리케이션입니다. Python 백엔드 + 바닐라 HTML/JS 프론트엔드 + JSON 파일 DB로 구성됩니다. 1부에서는 이 앱을 내 PC(로컬)에서 만들어 띄우고, 2부에서 GitHub·Render로 누구나 접속하는 공개 URL에 배포합니다.
☑ CNBC
☐ Bloomberg
BRENT 98.23 +5.11
GOLD 2408 +0.42
COPP 4.51 -1.12
2. Vitol · 1
3. Mercuria · 1
주요 기능
01실시간 원자재 티커
WTI·Brent·금·구리·철광석 등 12개 핵심 원자재의 가격·등락률이 상단에 가로로 흐릅니다. Yahoo Finance v8 chart 엔드포인트에서 수집.
02글로벌 뉴스 카드 그리드
Reuters·CNBC·Bloomberg·WSJ·FT 등 주요 매체의 최신 헤드라인을 카드로 표시. 매체별 색·시간 표기.
03거래처 언급 자동 감지
Glencore·Trafigura·Rio Tinto 등 15개 거래처 키워드를 뉴스에서 자동 매칭. 매칭된 기사에 거래처 칩이 부착됩니다.
04다중 필터 · 검색
왼쪽 사이드바에서 카테고리·매체·거래처·날짜·텍스트 검색을 동시에 적용. 모든 필터링이 브라우저 안에서 즉시 처리.
05즉시 재수집(REFRESH)
우상단 REFRESH 버튼을 누르면 서버가 모든 소스를 다시 호출해 최신 데이터로 갱신합니다.
06비즈니스 대시보드 테마
금융 터미널을 연상시키는 차분한 톤. 양수·음수 색 구분, monospace 라벨로 정보 밀도를 높였습니다.
동작 방식 한눈에
사전 준비
학습 안내점검. 교육 시작 전에 갖춰져 있어야 할 것들입니다. 소프트웨어 설치보다 계정 인증(2FA·이메일)과 사내 네트워크 제약이 더 자주 발목을 잡으니, 표의 항목을 미리 하나씩 확인하십시오.
설치 소프트웨어 체크리스트
개인 PC에 관리자 권한으로 아래를 설치합니다. 설치 순서에 약간의 의존성이 있으니 위→아래 순으로 진행합니다.
| 소프트웨어 | 권장 버전 | 출처 | 이유 · 한 줄 |
|---|---|---|---|
| Python | 3.12.3 | python.org | 크롤러와 서버의 실행 엔진. pip 패키지 매니저 포함. |
| VS Code | 1.99 이상 | code.visualstudio.com | 코드 에디터 + 통합 터미널. Claude Code·Codex 확장을 여기서 실행. |
| Git | 2.49.0 | git-scm.com | 코드 버전 관리. GitHub 푸시를 위한 필수 도구. |
| Claude Code / Codex | 최신 | VS Code Marketplace | VS Code 확장으로 설치하는 바이브코딩 핵심 도구. 둘 중 하나를 선택해 사용. |
| GitHub CLI(선택) | 2.91 | cli.github.com | gh repo create로 리포 생성·푸시를 한 줄로. 없으면 웹 UI로도 가능. |
python --version, git --version, code --version 세 줄을 실행해 모두 버전이 출력되면 1차 성공입니다.계정 체크리스트
소프트웨어보다 더 자주 발목을 잡는 것이 계정입니다. 이메일 인증·2FA는 당일에 하면 문자 수신 지연 등으로 시간이 걸리므로 사전에 끝내 둡니다.
| 서비스 | 필요 이유 | 준비 사항 |
|---|---|---|
| Anthropic / OpenAI 계정 | Claude Code / Codex 인증 | Claude Code → Anthropic(Claude Pro/Max 또는 API 키), Codex → OpenAI(ChatGPT Plus 또는 API 키). 결제 수단 등록 선행. |
| GitHub 계정 | 소스 코드 호스팅 | 로그인 후 gh auth login으로 인증까지. 2FA 설정 권장. |
| Render 계정 | 완성 사이트 배포 | GitHub 계정으로 로그인(OAuth) → 이메일 인증. Free tier로 충분. |
사내 환경(IT) 점검
기업 표준 PC·사내 네트워크는 개인 환경과 다른 제약이 있습니다. 아래 네 항목을 사전에 점검합니다.
01방화벽 화이트리스트
pypi.org, github.com, *.onrender.com, query1.finance.yahoo.com, Reuters/CNBC RSS 도메인 허용.
02프록시 / SSL 인터셉션
pip install과 git clone이 SSL 오류 없이 동작해야 함. 사내 CA 인증서 설치가 필요할 수 있음.
03관리자 권한
Python·VS Code·Git 설치 시 1회 필요. IT가 임시 권한을 부여하거나 사전 설치 이미지를 배포.
04외부 서비스 정책
보안 정책상 외부 AI 서비스(Claude API) 이용이 금지돼 있는지 확인. 교육용 예외 승인이 필요할 수 있음.
실습 — 사전 준비 점검
- 각자 PC 터미널에서
python --version,git --version,gh --version3줄을 실행해 모두 버전이 뜨는지 확인한다. - Claude Code(또는 Codex)를 처음 켜고 "안녕" 한 번만 쳐서 응답이 오는지 확인한다.
- 브라우저에서 완성작 URL을 한 번 열고, 우상단 REFRESH를 눌러 동작시켜 본다.
1. 데이터 수집 기획
상사 · 데이터 소스학습 안내패턴 보기. 이 모듈은 세 카테고리(뉴스·원자재·거래처)에 대해 같은 패턴을 반복합니다 — ① AI에게 후보를 추천받고 → ② AI가 직접 테스트해 성공/실패를 보고하고 → ③ 성공한 것만 다음 단계로. 프롬프트 한 쌍씩을 그 흐름으로 읽으십시오.
1-1. VS Code에서 폴더 열고 Claude Code·Codex 띄우기
이번 모듈부터 실제 환경에서 작업합니다. 첫 셋업은 1분 안에 끝납니다.
| 단계 | 할 일 | 방법 |
|---|---|---|
| 1 | 빈 폴더 만들기 | 원하는 위치에 global-market-monitor 폴더 생성 |
| 2 | VS Code로 열기 | VS Code 실행 → 파일 → 폴더 열기 → 방금 만든 폴더 선택 |
| 3 | Claude Code·Codex 실행 | 좌측 사이드바의 해당 도구(Claude Code/Codex) 아이콘 클릭(또는 단축키)으로 채팅 패널을 연다 |
| 4 | 인식 확인 | Claude에게 "이 폴더에 뭐 있어?"라고 물어 폴더 인식 여부를 확인 |
1-2. 세 가지 수집 방법 비교
먼저 AI에게 "어떤 자동 수집 방법이 있는지" 직접 물어 개념을 잡습니다.
크롤링은 실무적으로 세 가지로 귀결됩니다. 우선순위는 RSS → API → HTML 스크래핑 순이며, 앞쪽이 더 안정적이고 이용약관 충돌 가능성도 낮습니다.
| 방법 | 라이브러리 | 장점 | 단점 |
|---|---|---|---|
| RSS | feedparser | 매체가 직접 제공하는 표준 피드 | 매체마다 필드명이 일부 다름 |
| JSON API | requests | 숫자 데이터 수집에 최적 | 인증·쿼터·정책 변경 가능성 |
| HTML 스크래핑 | BeautifulSoup, lxml | RSS·API가 없을 때의 대안 | 페이지 구조 변경에 취약 |
1-3. 뉴스 매체 — 추천받고 테스트
1-4. 원자재 사이트 — 추천받고 테스트
1-5. 거래처 — 추천받고 키워드 정밀도 테스트
1-6. 백엔드 · 데이터 저장 — 추천받고 선택
데이터 소스가 정해졌으니, 그 데이터를 어떤 언어로 수집하고 어디에 쌓을지를 결정합니다. 선택지를 추천받고, 결과를 보고 직접 정합니다.
1-7. 프론트엔드 — 추천받고 선택
1-8. 결론을 DESIGN.md로 정리
데이터 소스 + 백엔드/DB + 프론트엔드 결정이 끝났으면 결론을 DESIGN.md 한 장으로 정리합니다. 이 문서가 다음 모듈(Plan Mode)의 입력이 됩니다.
실습 — 카테고리 한 가지 직접 진행
- 뉴스·원자재·거래처 중 하나를 골라 ① 추천 → ② 테스트 두 단계를 직접 진행한다.
- 실패한 항목 1개를 골라, 그 원인이 무엇이었는지 한 줄로 설명한다.
- 본인 카테고리의 결론 한 단락을 DESIGN.md에 추가하도록 요청한다.
2. Plan Mode 설계 확정
설계학습 안내읽기. Claude Code·Codex 같은 바이브코딩 도구는 요구사항을 받아도 곧장 코드를 쓰지 않고 선택이 필요한 사항을 질문으로 되돌려 줍니다. 이 "되묻기 단계"를 Claude Code에서는 Plan Mode라 부릅니다 — 프롬프트의 마지막 한 줄이 어떻게 그 동작을 유도하는지 보십시오.
Plan Mode 흐름
Existing DESIGN.md
Clarifying Questions
Updated DESIGN.md
업데이트된 DESIGN.md — 최종 합의문
데이터 소스(이전 모듈) + 기술 결정(이번 모듈)이 한 문서에 모입니다. 이후 모든 코드는 이 문서를 근거로 생성됩니다.
# Global Market Monitor — 설계서 ## Context 원자재 시세 · 글로벌 뉴스 · 해외 거래처 언급을 한 화면에 통합해 보여주는 웹 대시보드. 직접 구축·운영할 수 있도록 단순한 구조로 설계. ## 확정된 전제 - 백엔드: Python 3.12 + Flask - 프론트엔드: 바닐라 HTML / CSS / JS (별도 빌드 단계 없음) - 데이터 소스: 공개 RSS · Yahoo Finance v8 (API 키 불필요) - 개발 방식: 단계적 (수집 → 저장 → 표시) - 작업 순서: 설정 JSON → 수집기 → 에이전트 → DB → 서버 → UI ## 디렉토리 구조 global-market-monitor/ ├── site/ │ ├── agents/ │ │ ├── commodity_agent.py 원자재 수집 │ │ ├── news_agent.py 뉴스 수집 │ │ └── search_pool_agent.py 거래처 매칭 │ ├── collectors/ │ │ ├── rss_collector.py feedparser 기반 │ │ ├── api_collector.py requests 기반 │ │ └── scraper.py BeautifulSoup 기반 │ ├── db/ │ │ ├── schema.py 공통 레코드 스키마 │ │ ├── unifier.py 유사 컬럼 통합 │ │ ├── store.py JSON atomic write │ │ ├── commodities.json │ │ ├── news.json │ │ ├── buyers.json │ │ └── unified.json 대시보드 단일 소스 │ ├── config/ │ │ ├── news_sources.json │ │ ├── commodity_sources.json │ │ └── buyers_keywords.json │ ├── static/ │ │ ├── index.html 대시보드 │ │ ├── styles.css 스타일시트 │ │ └── app.js 필터·검색 │ ├── server.py Flask + REST API │ ├── run_once.py 1회 수집 실행 │ ├── scheduler.py 주기 실행 루프 │ └── requirements.txt ├── render.yaml Render 배포 설정 ├── runtime.txt Python 버전 고정 └── README.md ## REST API 엔드포인트 GET / 대시보드 index.html GET /api/unified 통합 뷰 (대시보드 초기 로드) GET /api/commodities 원자재 전체 GET /api/news 필터 파라미터 지원 GET /api/buyers 거래처 목록 POST /api/refresh 즉시 재수집 트리거 ## 검증 계획 - pip install -r site/requirements.txt 성공 - python run_once.py 실행 시 db/*.json 적재 (레코드 > 0) - python server.py 기동 후 http://localhost:5000 에서: • 대시보드 렌더링 / 좌측 필터 동작 • 상단 원자재 티커 롤링 / REFRESH 재수집 후 화면 갱신
3. 개발 — 크롤러·DB
백엔드학습 안내읽기. 데이터 소스(모듈 1)와 기술 결정(모듈 2)이 모두 DESIGN.md에 있으니, 이 문서가 곧 설계서입니다. AI에게 "DESIGN.md 그대로 개발하라"고 지시하면 수집 파이프라인이 코드로 구현됩니다.
3-1. DESIGN.md를 근거로 개발 진행
3-2. 완성된 수집 파이프라인
진행하다 보면 자연스럽게 네 개의 역할이 분리된 구조가 만들어집니다.
원시 수집
도메인 오케스트레이터
공통 스키마
{id · source · title · url · published_at · category · entities · metrics}로 통합하고 중복을 제거합니다.JSON DB
commodities.json · news.json · buyers.json · unified.json에 저장합니다.3-3. 유사 컬럼 통합
Reuters RSS는 title, CNBC RSS는 headline을 씁니다. 매체마다 다른 필드명을 공통 키로 수렴시켜야 대시보드가 한 화면에서 통합 표시할 수 있습니다.
# 매체별 필드 alias — 공통 키로 수렴
FIELD_ALIASES = {
"title": ("title", "headline"),
"url": ("url", "link", "guid"),
"published_at": ("published", "pubDate", "updated", "date"),
"summary": ("summary", "description", "content"),
}
def _pick(raw, keys):
for k in keys:
if raw.get(k):
return raw[k]
return None
FIELD_ALIASES에 한 줄만 더하면 됩니다.3-4. 실행 결과
[1/4] commodity_agent ...
-> 12 commodity records
[2/4] news_agent ...
-> 541 news records
[3/4] search_pool_agent ...
-> news_updated=541 buyers=15
[4/4] build unified ...
-> unified counts: {'commodities': 12, 'news': 541, 'buyers': 15}
실습 — 본인 거래처 추가
buyers_keywords.json을 열어 본인 부서의 실제 거래처 3곳을 추가한다.python run_once.py재실행 후buyers.json에서 매칭 수를 확인한다.- 매칭이 0건인 거래처는 키워드가 일반 단어이거나 별칭이 부족한 경우다. 키워드를 보강해 다시 실행한다.
4. 개발 — 대시보드
프론트엔드학습 안내읽기. 화면을 만들 때는 ① 지금 무엇이 있는지 먼저 묻고 → ② 어디를 어떻게 바꿀지 별도로 지시합니다. "어떤 분위기의 UI인가"를 말로 정확히 묘사하는 것이 디자인 품질의 8할을 결정합니다.
4-1. 디자인 프롬프트 — 현 파일 파악 후 수정 지시
4-2. 완성된 대시보드 레이아웃 (미리보기)
☑ CNBC
☐ Bloomberg
BRENT 98.23 +5.11
GOLD 2408 +0.42
COPP 4.51 -1.12
2. Vitol · 1
3. Mercuria · 1
4-3. 클라이언트 사이드 필터링 — 서버 왕복 0회
대시보드는 부팅 시 /api/unified를 한 번만 호출해 전체 데이터를 받고, 이후 모든 필터·정렬·검색은 브라우저 안에서 처리합니다. 수백 건 기준 반응 속도 수십 밀리초.
function applyFilters() {
const { q, category, sources, buyers, dateFrom, dateTo } = state.filters;
return state.raw.news.filter(n => {
if (category && (n.category || "") !== category) return false;
if (sources.size && !sources.has(n.source)) return false;
if (buyers.size && !(n.matched_buyers || []).some(id => buyers.has(id))) return false;
if (dateFrom && (n.published_at || "") < dateFrom) return false;
if (q) {
const hay = `${n.title || ""} ${n.summary || ""}`.toLowerCase();
if (!hay.includes(q.toLowerCase())) return false;
}
return true;
});
}
python server.py 실행 후 http://localhost:5000에서 대시보드가 내 PC에서 동작합니다. 이제 이걸 누구나 접속할 수 있는 인터넷 주소로 올리는 일이 2부(배포)입니다.과정 정리
- 바이브코딩으로 내 PC에서 도는 웹 애플리케이션을 데이터 수집부터 화면까지 만들 수 있다
- 데이터 소스를 추천 → 테스트 → 성공분만 채택하는 패턴과, 결론을 DESIGN.md로 모으는 이유를 설명할 수 있다
- Plan Mode가 "되묻기 단계"이며, 그 결과가 DESIGN.md에 합쳐져 코드 생성의 근거가 됨을 안다
- Collector→Agent→Unifier→Store 구조와 유사 컬럼 통합, 클라이언트 사이드 필터의 개념을 안다
python server.py→localhost:5000에서 대시보드가 동작하는 것을 확인했다
만든 웹앱을 인터넷에 배포하기
- 로컬에서 완성한 웹앱을 Git으로 버전관리하고 GitHub에 올린 뒤, Render로 공개 URL에 배포하는 전 과정을 실행한다.
- Git·GitHub·Render(호스팅)의 역할 차이를 구분하고, Free tier의 cold start·파일 영속성 한계와 운영 단계 업그레이드 경로를 이해한다.
- 데이터 소스·키워드를 내 업무로 치환하고, 자동 갱신·알림까지 확장하는 방향을 잡는다.
5. Git·GitHub·Render 배포
배포학습 안내개념 → 실행. 세 용어의 관계만 먼저 잡으십시오 — Git(스냅샷 히스토리) · GitHub(원격 저장소) · Render(실행 서버 호스팅). 그다음 로컬 코드를 공개 URL로 올리는 과정을 따라갑니다.
5-1. Git 개념 — "저장"과 "커밋"은 다르다
코드 파일은 에디터로 "저장"하지만, 그 상태를 프로젝트 히스토리의 한 스냅샷으로 찍는 것이 Git의 "커밋"입니다. 커밋은 되돌릴 수도, 누가 언제 무엇을 바꿨는지 추적할 수도 있습니다.
첫 리포 만들기
git init -b main — 폴더에 .git/ 숨김 디렉토리가 생기며 이 폴더가 이제 Git 관리 대상.스냅샷 찍기
git add -A → 변경 파일 스테이징 / git commit -m "메시지" → 이 시점의 스냅샷 저장.원격에 업로드
git push — 로컬 스냅샷 히스토리를 GitHub에 업로드. 처음엔 -u origin main으로 연결.5-2. GitHub — "코드 버전의 구글 드라이브"
로컬 리포를 GitHub에 올리면 공유·백업·협업(PR)이 가능해집니다. Private 리포는 허가된 사용자만 볼 수 있고, Render 같은 서비스가 배포용으로 읽을 수 있습니다.
$ gh repo create global-market-monitor --private ... ✓ Created repository .../global-market-monitor on GitHub ✓ Added remote https://github.com/.../global-market-monitor.git ✓ Pushed commits to origin/main
5-3. 호스팅 개념 — "내 노트북이 꺼져도 살아있는 주소"
로컬 PC에서 python server.py로 띄운 사이트는 내 노트북이 꺼지면 같이 꺼집니다. 24/7 유지되는 공개 URL이 필요하면 호스팅 서비스에 올려야 합니다.
| 방식 | 특징 | 적합 |
|---|---|---|
| Render / Railway / Fly.io | Flask·Node 등 long-running 서버 지원 · 무료 티어 · Git 연동 자동 배포 | 이 프로젝트 그대로 배포 가능 |
| Vercel / Netlify | Serverless 기반 · 정적 사이트에 최적 | JSON DB 구조를 바꿔야 호환 |
| AWS / GCP EC2 | 풀 제어 · 고비용 · IT 팀 필요 | 운영 단계 확장 |
5-4. Render 배포 — 3번 클릭으로 Live
Render는 render.yaml 한 장만 리포에 있으면 Web Service를 자동 생성합니다. 코드 리팩토링 0줄로 배포 가능.
services:
- type: web
name: global-market-monitor
runtime: python
plan: free
buildCommand: pip install -r site/requirements.txt
# 부팅 시 1회 수집 후 gunicorn 기동
startCommand: sh -c "cd site && python run_once.py || true; \
gunicorn --timeout 90 --workers 2 \
--bind 0.0.0.0:$PORT server:app"
envVars:
- key: PYTHON_VERSION
value: 3.12.3
STEP 1Blueprint 시작
Render Dashboard → + New → Blueprint 클릭
STEP 2리포 선택
GitHub 앱 권한 허용 후 global-market-monitor 선택
STEP 3Apply
render.yaml 자동 감지 → 빌드 1~2분 → Live
==> Deploying... ==> Running 'sh -c "cd site && python run_once.py || true; gunicorn ..."' [1/4] commodity_agent ... -> 12 commodity records [2/4] news_agent ... -> 542 news records [3/4] search_pool_agent ... -> news_updated=542 buyers=15 [4/4] build unified ... [INFO] Starting gunicorn 25.3.0 [INFO] Listening at: http://0.0.0.0:10000 ==> Your service is live 🎉 ==> Available at https://global-market-monitor.onrender.com
run_once 자동 재수집으로 복구). (3) 주기 스케줄 미지원 → REFRESH 버튼 on-demand 운영. → 운영 단계에서는 Starter plan + Persistent Disk + Cron Job으로 업그레이드를 검토합니다.실습 — 본인 리포 → Render 배포
- 본인 프로젝트 폴더에서
git init→gh repo create --private --push로 GitHub에 업로드한다. - Render Dashboard에서 Blueprint 생성 → 본인 리포 선택 → Apply.
- 배포가 끝나면
https://[본인-서비스명].onrender.com이 공개된다. 브라우저에서 열어 동작을 확인한다. - 실습 완료 후, 배포된 URL과 구성 과정을 조별로 공유한다.
응용 — 내 업무로 치환
학습 안내선택. 미션 1이 가장 가치 있습니다 — 데이터 소스와 키워드를 내 업무로 바꾸는 순간 이 대시보드가 내 자산이 됩니다. 2·3은 여유가 될 때.
MISSION 1데이터 소스·키워드를 내 업무로 치환
뉴스 매체·원자재 심볼·거래처 키워드를 본인 산업의 것으로 바꿔 보십시오 — 예: 담당 산업 전문지 RSS + 핵심 원자재/지표 + 주요 거래처·경쟁사 10곳. config/*.json만 바꿔 같은 결과 구조가 나오는지 확인하는 것이 핵심입니다.
MISSION 2다른 도메인 대시보드로 변형
"수집 → 통합 → 저장 → 표시" 골격은 그대로 두고 주제만 바꿉니다 — 부동산 인허가·물류 운임·채용 공고·정책/입찰 모니터링 등. 카드에 들어갈 항목과 필터 축(카테고리·출처·날짜)만 다시 정의하면 됩니다.
MISSION 3자동 갱신·알림 붙이기
REFRESH를 사람이 누르는 대신, 스케줄러(cron/작업 스케줄러)로 주기 수집을 돌리고, 새 기사·임계치 돌파 시 메일·슬랙으로 알리는 단계를 추가하십시오. 발송 단계는 Make·n8n 같은 노코드 자동화 도구로 코드 없이 연결할 수도 있습니다.
과정 정리
- Git(스냅샷 히스토리)·GitHub(원격 저장소)·Render(실행 서버 호스팅)의 역할을 구분할 수 있다
- 로컬에서 완성한 코드를 GitHub에 올리고 Render로 공개 URL에 배포하는 과정을 따라갈 수 있다
- Free tier의 cold start·파일 영속성 한계와 운영 단계 업그레이드 경로(Starter + Disk + Cron)를 안다
- 데이터 소스·키워드를 내 업무로 치환하고, 자동 갱신·알림으로 확장하는 방향을 잡았다