동적 페이지와
데이터 수집 전략

Session 5 / 8

JS 렌더링 · AJAX · fetch · API vs 스크래핑 · 공공데이터포털

박수현 · aSSIST University · 2026

🎨 이미지 프롬프트(배경): "Two divergent paths — one through dense HTML forest with manual scraping, the other through clean API gateway with structured JSON streams, teal and purple tones, editorial illustration, 16:9, no text"

이번 시간을 마치면

개념적으로

• ✅ CSR / SSR / SPA / SSG 의 차이를 구분
• ✅ AJAX·fetch 의 동작 원리
• ✅ API vs 스크래핑 의사결정 트리
• ✅ Open API 의 인증 4가지 — API Key (단순키) / Bearer (토큰) / OAuth (위임 인증) / HMAC (해시 기반 서명)
• ✅ 공공데이터포털 의 신청·키 발급 흐름

실습으로

• ✅ 네이버 금융에서 숨은 JSON API 찾기 (도서 Ch.5 §1 패턴)
• ✅ 공공데이터 기상청 API 호출 → DataFrame
• ✅ OpenAI / Claude API 로 텍스트 분류 맛보기

📖 도서 매핑: Ch.5 §1~2 + Ch.8 §1~3

정적 vs 동적
개념 다시 정리

회차 1 의 그림이 이번 회차의 출발점

현대 웹의 4가지 렌더링 패턴 — SSR / CSR / SSG / SPA

🔑 회차 3의 BS4가 100% 통하는 영역 = SSR + SSG.

AJAX / fetch — 새로고침 없는 비동기 데이터 갱신

// 페이지 로드 후, JS가 추가 데이터 요청
async function loadProducts() {
  const r = await fetch(
    "/api/products?page=1");
  const data = await r.json();
  // → DOM 에 동적으로 추가
  renderProducts(data.items);
}
loadProducts();

🔑 JSON API 가 보이면 무조건 그쪽으로.

도서 Ch.5 §1 — 다나와 검색 결과

📖 도서 참조: Ch.5 §1 — "JS가 늦게 채우는 데이터"

API 우선
전략

스크래핑은 마지막 카드

API vs 스크래핑 — 데이터 출처 선택 의사결정 트리

🔑 우선순위

공식 API > 숨은 JSON > HTML 스크래핑 — 위에서부터 시도. 한 단계 내려갈수록 윤리·법적 위험 증가.

API vs 스크래핑 — 7개 항목 비교

🎯 연구자 입장

첫 시도는 항상 API. 안 되면 그제서야 스크래핑.

공공데이터포털
data.go.kr

한국 연구자의 첫 API — 법적으로 가장 안전

공공데이터포털 (data.go.kr) — 한국 정부 공개 데이터 허브

공공데이터포털 API 키 발급 — 5단계 절차

📌 보통 Decoding 키를 코드에 넣고, requests 가 params= 로 자동 인코딩.

기상청 단기예보 API — 30줄로 일주일치 호출

import requests, pandas as pd
from datetime import datetime, timedelta

API_KEY = "여기에-decoding-키-붙여넣기"

# base_time 은 02/05/08/11/14/17/20/23
# 8회 발표. 어제 0500 발표분이 안정적
yesterday = (
    datetime.now() - timedelta(days=1)
).strftime("%Y%m%d")
base_time = "0500"

url = (
    "http://apis.data.go.kr/1360000/"
    "VilageFcstInfoService_2.0/getVilageFcst"
)
params = {
    "serviceKey": API_KEY,
    "numOfRows": 1000, "pageNo": 1,
    "dataType": "JSON",
    "base_date": yesterday,
    "base_time": base_time,
    "nx": 60, "ny": 127,   # 서울 종로
}

r = requests.get(
    url, params=params, timeout=10)
data = r.json()

items = (
    data["response"]["body"]
        ["items"]["item"]
)
df = pd.DataFrame(items)
print(df.head())

df.to_csv(
    "weather.csv",
    index=False,
    encoding="utf-8-sig",
)

🎯 30줄로 7일치 예보 1,000건. 회차 3의 50페이지 스크래핑보다 100배 빠름.

공공데이터 API 호출을 만든 프롬프트

Python 스크립트 air_quality.py 를 만들어 줘.
목적: 공공데이터포털의 한국환경공단 "측정소별
실시간 측정정보 조회" API 로 서울 강남구 측정소의
최근 24건 미세먼지 데이터를 받아 DataFrame 으로
출력한다.

요구사항:
1. 라이브러리: requests, pandas, python-dotenv
2. .env 의 PUBLIC_DATA_KEY_DECODED (디코딩된
   일반 인증키) 를 load_dotenv() 로 읽기
3. 엔드포인트:
   http://apis.data.go.kr/B552584/
   ArpltnInforInqireSvc/getMsrstnAcctoRltmMesureDnsty
4. 쿼리 파라미터:
   - serviceKey: 환경변수값
   - numOfRows: 24
   - pageNo: 1
   - stationName: "강남구"
   - dataTerm: "DAILY"
   - ver: "1.3"
   - returnType: "json"   (XML 기본 → JSON 강제)
5. 요청: requests.get(..., timeout=10)
   → resp.raise_for_status() → resp.json()
6. 응답 경로:
   data["response"]["body"]["items"]
   를 pd.DataFrame 으로 변환
7. df[["dataTime","pm10Value","pm25Value"]].head()
   를 print

에러 처리:
- HTTP 오류 → 메시지 출력 후 종료
- items 가 없거나 빈 리스트면 안내 후 종료
- PUBLIC_DATA_KEY_DECODED 미설정이면 안내 후 종료

환경: Python 3.11, venv. 코드만, 한국어 주석 최소.

JSON 응답 가독성 — pprint / json.dumps indent 활용

{
  "response": {
    "header": {
      "resultCode": "00",
      "resultMsg": "NORMAL_SERVICE"
    },
    "body": {
      "dataType": "JSON",
      "items": {
        "item": [
          {
            "baseDate": "20260501",
            "baseTime": "0600",
            "category": "TMP",
            "fcstValue": "18",
            "fcstDate": "20260502"
          },
          ...
        ]
      }
    }
  }
}

📌 resultCode "00" 이 정상. 자주 만나는 비정상 코드: - 30 NO_AUTHORIZED — 키가 잘못됨 - 22 LIMITED_NUMBER_OF_SERVICE_REQUESTS_EXCEEDS — 일일 한도 초과 - 33 DEADLINE_HAS_EXPIRED — 활용신청 만료

API 인증 4가지 — API Key / Bearer / OAuth / HMAC

params = {"serviceKey": API_KEY}
requests.get(url, params=params)

headers = {"Authorization": f"Bearer {TOKEN}"}
requests.get(url, headers=headers)

API 에러 5종 — 메시지 해석과 대응

# 안전한 호출 + 메시지 점검
r = requests.get(url, params=params, timeout=10)
r.raise_for_status()             # HTTP 에러 → 예외
data = r.json()
header = data["response"]["header"]
if header["resultCode"] != "00":
    raise RuntimeError(header["resultMsg"])

금융 API
공식 vs 비공식

같은 데이터, 다른 합법성

금융 데이터 API — 5개 후보 비교 (공식 vs 비공식)

🎯 권장

공식 우선 — 회차 7 윤리 파트와 직결. 비공식은 개인 학습용.

전자공시 OpenAPI 빠른 시작 (OpenDART)

🔐 인증키 신청

• 인증키 신청 주소: https://opendart.fss.or.kr/uss/umt/EgovMberInsertView.do
• 개인 회원으로 신청 시, 가입과 동시에 이메일 인증 후 API 키 즉시 발급
• OpenDART API 키 기준 일일 허용건수: 40,000건

📘 개발가이드

• 개발가이드 주소: https://opendart.fss.or.kr/guide/main.do?apiGrpCd=DS001
• 공시정보 API에서 아래 4가지를 바로 활용 가능

🎯 Session 5 적용 포인트: "공식 API 우선" 원칙에 맞는 대표 사례가 OpenDART.

공시검색 개발가이드 (요약)

기본 정보

요청 인자

응답 결과

공시뷰어 연결 예시: https://dart.fss.or.kr/dsaf001/main.do?rcpNo=접수번호

예제 요청 URL

https://opendart.fss.or.kr/api/list.json?crtfc_key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&bgn_de=20200117&end_de=20200117&corp_cls=Y&page_no=1&page_count=10

API 결과 (예시)

{
  "status": "000",
  "message": "정상",
  "page_no": 1,
  "page_count": 10,
  "total_count": 210,
  "total_page": 21,
  "list": [
    {
      "corp_code": "00120182",
      "corp_name": "NH투자증권",
      "stock_code": "005940",
      "corp_cls": "Y",
      "report_nm": "[첨부추가]일괄신고추가서류(파생결합증권-주가연계증권)",
      "rcept_no": "20200117000559",
      "flr_nm": "NH투자증권",
      "rcept_dt": "20200117",
      "rm": ""
    },
    {
      "corp_code": "00878915",
      "corp_name": "iM금융지주",
      "stock_code": "139130",
      "corp_cls": "Y",
      "report_nm": "소송등의판결ㆍ결정(자회사의 주요경영사항)",
      "rcept_no": "20200117800593",
      "flr_nm": "iM금융지주",
      "rcept_dt": "20200117",
      "rm": "유"
    },
    {
      "corp_code": "00120571",
      "corp_name": "롯데칠성음료",
      "stock_code": "005300",
      "corp_cls": "Y",
      "report_nm": "타법인주식및출자증권취득결정",
      "rcept_no": "20200117800584",
      "flr_nm": "롯데칠성음료",
      "rcept_dt": "20200117",
      "rm": "유정"
    }
    // ... (총 10건, 원문 예제와 동일 구조)
  ]
}

✅ 해석 포인트: status=000 이면 정상, list 배열에서 rcept_no 로 공시뷰어 URL을 바로 생성할 수 있습니다.

고유번호 개발가이드 (corpCode.xml)

기본 정보

요청 인자

응답 결과

OpenAPI 테스트 주의사항

• 출력포멧이 Zip FILE (binary) 인 경우 브라우저 테스트를 제공하지 않음
• Chrome/Edge는 브라우저 특성상 zip이 아닌 xml로 다운로드될 수 있음
• 이 경우 파일 확장자명을 zip으로 바꾸면 정상 확인 가능
• 요청인자: API 인증키

🔗 개발가이드: https://opendart.fss.or.kr/guide/detail.do?apiGrpCd=DS001&apiId=2019018

yfinance — 한 줄로 5년치 해외 주가

import yfinance as yf
import pandas as pd
import matplotlib.pyplot as plt
from datetime import date

# 삼성전자 (005930.KS) — 2025-01-01 ~ 오늘
today = date.today().strftime("%Y-%m-%d")
df = yf.download("005930.KS", start="2025-01-01", end=today, auto_adjust=False)

# 1) 데이터 저장 (캔들 차트용 OHLCV 포함)
df.to_csv("output/price_data/samsung_2025_to_today.csv", encoding="utf-8-sig")

# 2) 가장 간단한 시계열 시각화 (종가)
close = df["Close"]
ax = close.plot(figsize=(10, 4), title="Samsung Electronics Close (2025~Today)")
ax.set_xlabel("Date")
ax.set_ylabel("KRW")
plt.tight_layout()
plt.savefig("output/charts/samsung_2025_to_today_close.png", dpi=160)
plt.show()

🎯 회차 8 시계열 분석의 베이스 데이터.

yfinance 실행 결과 — 삼성전자 종가 시계열

삼성전자 2025년 1월 1일부터 현재까지의 주가 데이터 시각화

코드 실행 결과: samsung_2025_to_today_close.png

공시 이벤트 주석 차트

2026년 1월 1일부터 현재까지의 주가 데이터에 2026년 1월 한달간의 공시자료 오버레이

코드 실행 결과: samsung_2026_price_disclosures.png

LLM API
텍스트 분석 맛보기

댓글 1만 건 → 분류·감성·요약 = LLM 1~2분

전통 NLP vs LLM

Claude API 첫 호출 — 5줄로 댓글 감성 분류

import os
from anthropic import Anthropic

# ANTHROPIC_API_KEY 환경변수 자동 사용
client = Anthropic()

text = (
    "배송이 빠르고 포장도 깔끔했어요. "
    "다만 제품 색이 사진과 좀 달라요."
)

resp = client.messages.create(
    model="claude-haiku-4-5",
    max_tokens=200,
    messages=[{
        "role": "user",
        "content": (
            "다음 리뷰를 분석해 JSON 으로 응답해.\n"
            '{"sentiment": '
            '"positive|negative|neutral", '
            '"topics": [...], '
            '"summary": "..."}\n\n'
            f"리뷰: {text}"
        ),
    }],
)
print(resp.content[0].text)

{
  "sentiment": "neutral",
  "topics": ["배송", "포장", "색상"],
  "summary": "배송·포장 만족, 색상 불일치 불만"
}

LLM 감성분석을 만든 프롬프트

Python 스크립트 llm_sentiment.py 를 만들어 줘.
목적: 한국어 리뷰 한 건의 감성·측면별 평가·
칭찬/불만 키워드를 OpenAI LLM 에 JSON 으로 요청해
dict 로 반환한다.

요구사항:
1. 라이브러리: openai, python-dotenv, 표준 json
2. .env 의 OPENAI_API_KEY 를 load_dotenv() 로 읽고
   OpenAI 클라이언트 생성
3. 함수 시그니처:
   sentiment_of(text: str) -> dict
4. 모델: gpt-4o-mini,
   response_format={"type": "json_object"}
5. 메시지 구성:
   - system: "한국어 리뷰의 감성을 분석한다.
              JSON 만 반환한다."
   - user: 리뷰 본문 + 다음 JSON 스키마로 응답:
     {
       "sentiment": "positive|negative|neutral",
       "score": -1.0 ~ 1.0 사이 실수,
       "aspects": {
         "delivery":"positive|negative|neutral|not_mentioned",
         "quality": "...",
         "price":   "...",
         "service": "..."
       },
       "praise":    [핵심 칭찬 키워드],
       "complaint": [핵심 불만 키워드]
     }
6. 반환:
   json.loads(resp.choices[0].message.content)
7. 하단에서 예시 리뷰로 호출 후 결과 print

에러 처리:
- JSON 파싱 실패 시 기본 구조 (모든 필드를
  neutral/not_mentioned, score=0.0,
  praise=[], complaint=[]) 로 반환
- API 실패 시 동일한 기본 구조 반환

환경: Python 3.11, venv. 코드만, 한국어 주석 최소.

OpenAI SDK vs Anthropic SDK — 동일 작업, 호출 방식 비교

from openai import OpenAI
client = OpenAI()  # OPENAI_API_KEY 환경변수

resp = client.chat.completions.create(
    model="gpt-4o-mini",
    response_format={"type": "json_object"},
    messages=[
        {"role": "system", "content": "리뷰를 JSON 으로 분석해."},
        {"role": "user", "content": text},
    ],
)
print(resp.choices[0].message.content)

두 SDK 비교

🎯 둘 다 .env 에 키 보관 — 코드에 직접 박지 말 것.

텍스트 분석 1만 건 = 얼마? (예시 비교 — 요금 수시 변동)

📌 2026-05 기준 — 강의일에 anthropic.com/pricing / openai.com/api/pricing 에서 재확인 필수

🎯 학위논문 가이드

첫 시도 — Haiku / 4o-mini. 정확도 부족하면 Sonnet 으로. Opus 는 샘플 1,000건 검증용.

미니 실습
두 API 직접 호출

공공데이터 + LLM 1회씩

미니 실습 — 공공데이터 + LLM 두 API 직접 호출

1단계 — 공공데이터

• [ ] data.go.kr 가입 + 키 발급
• [ ] 단기예보 또는 관광지 정보 1개 선택
• [ ] Python 으로 호출 → DataFrame
• [ ] CSV 저장 + df.head() 캡처

2단계 — LLM

• [ ] OpenAI 또는 Claude API 키
• [ ] 회차 3 책 데이터 로드
• [ ] 책 제목 30개 → "장르 분류" 프롬프트
• [ ] 결과 컬럼 추가한 CSV

제출

• weather.csv (또는 tour.csv)
• books_with_genre.csv
• notebook.ipynb

API 우선
스크래핑은 마지막

오늘의 정리 8가지

1. CSR / SSR / SPA / SSG — 첫 5분 판별
2. AJAX, fetch — 동적 페이지의 실제 동작 방식
3. API 우선 의사결정 트리 — 공식 → 숨은 JSON → HTML
4. 공공데이터포털 = 한국 연구자의 1번 카드
5. API 인증 4가지 — Key / Bearer / OAuth / HMAC
6. 에러 5종 — 401/403/429/500/resultCode
7. yfinance = 시계열 분석 진입로
8. LLM API = NLP 작업 100배 단축

"스크래핑은 마지막. 먼저 API 가 있는지 본다."