공부 일지 #41 | Flask & 크롤링 첫걸음

학습 날짜: 2025.09.19

---

🧐 핵심 요약

• Flask 기본: Flask 객체 생성 → route 매핑 → run()
• 템플릿 연결: templates/ 폴더 + render_template()로 HTML 연동
• GET/POST 처리: request.method로 분기, request.form으로 값 가져오기
• 데이터 전달: Python dict → HTML에서 {{ context.변수명 }} 출력
• 크롤링 기초:
  • HTML 다운받아 데이터 추출 (requests, BeautifulSoup, Selenium)
  • 선택자: . = class / # = id / > = 하위 태그
  • XPath로 DOM 구조 직접 지정 가능

---

1. Flask (Micro Framework)

1.1 Flask 기본 실행 구조

from flask import Flask

# Flask 객체 생성 (필수 코드)
app = Flask(__name__)

# '/' URL로 접속 시 실행될 함수 등록
@app.route("/")
def index():
    return "Hello World!"

# 실행 진입점
if __name__ == "__main__":
    app.run()   # 로컬 서버 실행 (기본 포트 5000)

• @app.route("/") : URL과 함수를 매핑 (라우팅)
• 실행하면 http://127.0.0.1:5000/ 에서 확인 가능
• 정상일 때는 200 코드, 없는 경로는 404 코드

---

1.2 템플릿 연결 (HTML 렌더링)

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def index():
    # index.html 파일을 templates 폴더에서 찾아 렌더링
    return render_template("index.html")

@app.route("/info")
def information():
    return render_template("info.html")

• Flask는 templates/ 디렉토리 안에서 HTML을 자동으로 찾음
• 반드시 철자 정확히 맞추기 (틀리면 오류 찾기 힘듦)

✅ index.html 예시

<nav>
  <ul>
    <li><a href="/">main</a></li>
    <li><a href="/info">information</a></li>
    <li><a href="http://www.naver.com">Naver</a></li>
  </ul>
</nav>

 

---

1.3 GET & POST (로그인 예제)

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "GET":       # GET 요청 → 단순 조회
        return render_template("index.html")
    else:                             # POST 요청 → form 데이터 처리
        login_id = request.form["loginid"]   # form의 name="loginid" 값
        login_pw = request.form["passwd"]    # form의 name="passwd" 값
        return f"ID: {login_id}, PW: {login_pw}"

@app.route("/login")
def login():
    return render_template("login.html")

 

✅ login.html 예시

<form method="POST" action="{{ url_for('index') }}">
  <input type="text" name="loginid" placeholder="input your id">
  <input type="text" name="passwd" placeholder="input your password">
  <button type="submit">Login</button>
</form>

• request.form["변수명"] : POST 데이터 받아오기
• url_for('index') : 정보를 보낼 function → 해당 뷰 함수의 URL을 Flask가 찾아 반환

---

1.4 서버에서 데이터 전달

@app.route("/info")
def information():
    # Python dictionary 형태의 데이터
    data = {
        "id": "s01",
        "name": "홍길동",
        "age": "24",
        "team": ["a", "b", "c"]
    }
    # info.html로 전달
    return render_template("info.html", context=data)

---

2. 웹 크롤링 (기초)

크롤링이란? 단순한 다운로드이다.

• 크롤링 = HTML을 다운로드하고 원하는 데이터만 추출하는 과정
• 하지만 모든 사이트에서 허용되는 것은 아니므로 확인 필요

---

2.1 웹 크롤링 일반 흐름

1. 원하는 페이지 지정(예: 뉴스 기사 페이지)
   
   
2. 전체 데이터 접근 방법 확인
   • “헤드라인 더보기” 버튼 클릭 이벤트
   • 또는 pagination(다음 페이지 이동)
3. 수집할 정보 정의
   • 기사 제목, 요약, 보도기관, 댓글 수 등
   • 개발자도구(Elements)로 위치 확인 후 CSS selector 또는 XPath 추출
4. 데이터 수집 및 구조화
   • 크롤링 결과를 dictionary나 리스트 형태로 정리
5. 저장하기
   • CSV, JSON 등으로 저장 후 불러오기
   • 한글 깨짐 방지를 위해 필요시 encoding="utf-8", "cp949", "euc-kr" 중 하나 지정

---

2.2 크롤링 방식

1. 단순 크롤링 → requests, BeautifulSoup (HTML만 가져옴)
2. 가상 브라우저 크롤링 → Selenium + ChromeDriver (실제 브라우저처럼 동작)
   • 크롤링이 끝난 후에는 driver. close()로 브라우저를 닫아줘야 함.

---

2.3 HTML 요소 선택자

• CSS 선택자
  • . → class
  • # → id
  • > → 하위 태그

예시:

#newsct > div.section_component > div.section_more > a

• #newsct: id가 newsct인 태그
• >: 바로 아래 요소
• .section_component: class명이 section_component

---

2.4 XPath 활용

• 사이트에서 class/id가 바뀌는 경우가 많아 XPath로 접근하기도 함

/html/body/div/div[2]/div[2]/div[2]/div[1]/div[1]/ul