2교시
좋습니다 👍 정리해주신 의도를 바탕으로 **2교시 강의안(대본+흐름)**을 구체적으로 설계해 드릴게요.
🏫 2교시 강의안 — 웹 스크래핑과 cURL / Postman 기초
🎯 목표
- 웹페이지에서 실제 데이터가 어떻게 주고받는지 체험한다.
- cURL 명령어를 이해하고 직접 실행해본다.
- Postman으로 같은 요청을 만들어보고, 헤더·바디·응답 구조를 눈으로 확인한다.
- Chrome DevTools → Network 탭에서 cURL 코드 가져오는 방법을 배운다.
🕐 시간 배분 (60분)
① 도입 — “웹 스크래핑 첫걸음” (5분)
멘트:
“웹페이지는 화면만 보여주는 게 아니라, 뒤에서 서버랑 계속 데이터를 주고받습니다.
오늘은 그 데이터를 직접 들여다보고, 우리가 원하는 걸 꺼내오는 법을 해볼 거예요.”
② cURL 소개 & 간단 예시 (10분)
- 예시 1 (간단 GET 요청):
curl https://jsonplaceholder.typicode.com/posts/1- → JSON 응답 바로 확인.
- 예시 2 (POST 요청):
curl -X POST https://jsonplaceholder.typicode.com/posts \
-H "Content-Type: application/json" \
-d '{"title":"Hello","body":"World","userId":1}'- → 요청·응답의 관계 설명.
멘트:
“curl은 서버한테 ‘데이터 주세요’ 혹은 ‘이 데이터 저장해주세요’ 하고 편지 보내는 도구예요.”
③ 터미널 실습 (10분)
- 학생들이 직접 위 두 개 명령어 실행 → 응답 JSON 확인.
- -X, -H, -d 옵션의 의미 짚어주기.
④ Postman 실습 (15분)
- 같은 요청을 Postman에서 실행.
- 단계:
- 새 Request 생성 → URL 입력
- Headers 추가 / 제거 → 응답 차이 확인
- Body에 JSON 입력 → POST 실행
- Response 탭에서 JSON 확인
멘트:
“Postman은 curl을 그래픽 인터페이스로 다루는 버전이라고 보시면 됩니다.
코드 대신 클릭으로 요청을 만들 수 있죠.”
⑤ Chrome DevTools로 cURL 추출 (15분)
- 브라우저에서 네이버 쇼핑 리뷰 페이지 열기.
- DevTools (F12) → Network 탭 → 새로고침.
- Fetch/XHR 필터 켜기.
- 여러 요청 중 review 관련 API 클릭 → Response 확인.
- Copy as cURL → 터미널 붙여넣기 → 응답 비교.
멘트:
“여기 보시면, 브라우저가 서버에 ‘리뷰 데이터 주세요’라고 요청하는 걸 그대로 복사해올 수 있어요.
우리는 이걸 Postman이나 앱 안에서 그대로 재현하면 됩니다.”
⑥ 정리 & Q&A (5분)
- 오늘 배운 포인트:
- curl로 직접 요청하기
- Postman으로 같은 요청 만들기
- Headers/Body/Response 차이 관찰
- DevTools로 cURL 코드 추출
멘트:
“이제 여러분은 웹사이트가 화면에 보여주기 전에 서버에서 어떤 데이터를 받는지 직접 확인할 수 있습니다.
다음 시간에는 이 데이터를 실제 앱에서 불러오고, 자동화하는 데 써먹어보겠습니다.”
📦 제공 자료
- 간단 curl 예시 코드 2개 (GET/POST)
- Postman 스크린샷 가이드 (Headers/Body/Response 설명)
- DevTools 사용법 & “Copy as cURL” 가이드 PDF
👉 이렇게 구성하면, 2교시는 “데이터가 오고가는 걸 직접 본다 → curl로 요청 → Postman으로 시각화 → DevTools에서 실전 데이터 확인” 흐름이 완성됩니다.
혹시 원하시면, 이 2교시 부분을 “멘트 대본 + 실습 안내 슬라이드” 형식으로도 만들어드릴까요?