[인공지능사관학교: 자연어분석A반] JavaScript (4) / Crawling (3)

Suhyeon Lee·2025년 8월 20일

Ⅰ. 오전 수업
	A. 1교시: JavaScript
		1. 지난 시간 복습
        	- 조건문과 반복문
            - 배열과 객체
            - 배열의 길이 활용
            - 배열을 위한 함수
            - 객체
		2. 객체
		3. 함수
	B. 2교시: JavaScript
		1. 함수(cont.)
		2. DOM(Document Objcet Model)
		3. 실습
	C. 3교시: JavaScript
		1. 실습

Ⅱ. 오후 수업
	A. 4교시: Crawling
		1. 지난 시간 복습
		2. Selenium
	B. 5교시: Crawling
		1. 실습
	C. 6교시: Crawling
		1. 실습(cont.)
Ⅲ. CARRER UP
	A. 특강: 네이버 클라우드 교육
	B. 특강: 네이버 클라우드 교육
Ⅳ. 하루 돌아보기

Ⅰ. 오전

A. 1교시: JavaScript

1. 지난 시간 복습

자바스크립트의 조건문과 반복문
- 기본 개념은 동일하고 문법적 차이가 조금 있음

# Python
if 조건:
	조건이 참일 때 실행할 코드
elif 조건:
	조건이 참일 때 실행할 코드
else:

# JavaScript
if (조건1) {
        조건1이 참일 때 실행할 코드;
} else if (조건2) {
        조건2가 참일 때 실행할 코드;
} else {
        모든 조건이 거짓일 때 실행할 코드;
}

# Python
for i in range(1,10,1)

# JavaScript
for (let i = 0; i < 10; i++){
        console.log("반복문")
}

for ([초기문]; [조건문]; [증감문])
      문장
1. 초기화 구문인 초기문이 존재한다면 초기문이 실행됩니다. 이 표현은 보통 1이나 반복문 카운터로 초기 설정이 됩니다. 그러나 복잡한 구문으로 표현 될 때도 있습니다. 또한 변수로 선언 되기도 합니다.
2. 조건문은 조건을 검사합니다. 만약 조건문이 참이라면, 그 반복문은 실행됩니다. 만약 조건문이 거짓이라면, 그 for문은 종결됩니다. 만약 그 조건문이 생략된다면, 그 조건문은 참으로 추정됩니다.
3. 문장이 실행됩니다. 많은 문장을 실행할 경우엔, { } 를 써서 문장들을 묶어 줍니다.
4. 갱신 구문인 증감문이 존재한다면 실행되고 2번째 단계로 돌아갑니다.

배열과 객체
- 공통점: 하나의 공간에 여러 개의 데이터를 담는다
- 배열: 같은 의미를 가진 여러 개의 데이터를 관리하는 공간
  - 데이터가 의미하는 게 같아야 함
    (하나의 공간에 데이터 개수는 제한 없지만 데이터가 의미하는 게 반드시 같아야 한다.)
  - 인덱스 번호를 활용하기 때문에 우리가 알 수 있는 정보는 '몇 번째'라는 것뿐이기 때문
- 객체: 다른 의미를 가진 여러 개의 데이터를 관리하는 공간

배열과 객체 개념 및 데이터 타입은 모든 언어에 존재

배열의 길이(.length) 활용
1. 반복문 범위 지정
2. 데이터 유무 검증: 배열의 길이가 0이면 데이터가 없다 → 비어있거나 잘못 가져왔거나

배열을 위한 함수
- 값을 넣고 빼는 함수
  - push, pop, unshift, shift
  - shift는 선착순 처리할 때
- 값 조회 함수
  - include(); → true/false(boolean) → 조건문
- forEach 함수 ★
  - 원본 데이터를 조작해서 반복하는 로직을 작성할 때 사용
  - 반복문의 대체품 → 성능 차이는 없고 쓰면 문법이 조금 더 간결해지는 것
  - 단순 순회가 아닌 경우(복잡한 로직, 조건 여러 개 사용 등)는 기존 for문 사용해야 함
- map 함수 ★
  - 원본 데이터를 활용해서 새로운 배열을 만들 때 사용
  - 반드시 return 필요
  - return이 있다 == 값이 넘어온다 == 변수에 할당할 수 있다
- filter 함수 ★
  - 원본 데이터를 활용해서 새로운 배열을 만드는데, 조건을 추가해서 만들 때 사용

객체
- 큰 덩어리를 하나하나 쪼개서 관리한다
- 장점
  - 관리가 편하다.
  - 각각 하나하나에 명령이 가능하다(세분화).
  - 라이브러리화(모듈화)
- 구성: key와 value 형태
  - key 값 추가하고 싶으면 원하는 키를 만들어서 값을 대입만 해 주면 됨

let person = {
        name : "정형"
        , age : 20
        , money : null
}
person.height = "200";

: 어디서 많이 본 형태 → CSS도 객체 형태였음!

객체

실제 데이터 통신의 90% 이상을 차지하는 데이터 타입이 객체
- JSON(JavaScript Object Notation)
- 영화진흥위원회 오픈API
  - OpenAPI를 활용할 때 모든 데이터가 복잡하게 만들어져 있다. → 반드시 "첫 번째는 출발지고 마지막이 목적지"라는 걸 기억하기
KEYPOINT 두 가지
- 배열은 인덱스로 가져온다
- 객체는 키로 가져온다
객체에서 특정 내용 가져오기: 심화
- '대학교'를 꺼내고 싶음
  
  → person.school[3];
- '컴퓨터공학' 꺼내기
  
  → person.school[3].전공;

복잡한 객체 구조를 분석할 때는 한 가지만 기억하자! → 배열은 인덱스로 조회, 객체는 키로 조회

함수

내가 필요한 기능을 묶어서 관리하는 방법
- 프로그래밍에서 ()는 기능을 의미
구성 요소
- 데이터를 주고 받기 위해서는 매개 변수 필요
- 값을 돌려주는 경우에는 returne 활용
ES6 이전 문법
- function plus() {alert("함수가 실행됐습니다!");}
- cf. 자바는 타입을 지정해줘야 해서 하나의 기능에 대해 함수가 여러 개 제작됨(함수 종류가 엄청 많음): public static int plus(int a, int b) {return a+b;} , public static int plus(double a, double b) {return a+b;}
  - 자바는 정적 타입 언어이기 때문에, 동일한 기능을 수행하더라도 입력 타입에 따라 여러 개의 함수 또는 메서드를 정의해야 할 수 있습니다. 이를 오버로딩(Overloading) 이라고 합니다. 자바는 컴파일 시점에 타입 검사를 수행하므로, 각기 다른 타입의 입력에 대해 적절한 메서드를 선택하여 호출합니다.

function 함수이름(매개변수1, 매개변수2, ...) {
  // 함수 실행 코드
  return 반환값;
}
function 키워드: 함수를 정의할 때 사용합니다.
함수이름: 함수를 식별하는 이름입니다.
매개변수: 함수 내부에서 사용할 입력값입니다. 0개 이상일 수 있습니다.
return 키워드: 함수에서 반환할 값을 지정합니다. 생략 가능하며, 생략 시 undefined가 반환됩니다.

2교시: JavaScript

함수(cont.)

특징
- 매개변수의 개수를 알아서 체크한다

부족하면 부족한대로

콘솔 출력 → undefined(NaN은 1과 undefined를 더해서 발생)

넘치면 넘친대로

콘솔 출력 → 1만 들어감

연산을 진행할 때는 +를 제외하고 -, *, / 연산은 문자와 숫자가 가능하다 (권장X)

+

콘솔 출력 → 문자열임

+ 연잔자는 문자열과 문자열도 되고 숫자와 숫자도 됨 → 숫자와 문자열이 들어오면 숫자를 문자열로 변환한 뒤 붙여버림

-

콘솔 출력 → 숫자임

-, *, /는 숫자와 숫자만 됨 → 숫자와 문자열이 들어오면 문자열을 숫자로 변환한 뒤 계산해버림

화살표 함수(arrow function)*
- ECMAScript6에 등장 → 함수 표준안
- 함수를 상수로 만든다
  - 장점: 똑같은 이름의 함수명을 만들 수 없음, 함수를 임의로 수정하는 것이 불가능

const print = () => {
        console.log("프린트 문 실행");
}

⁉️ 함수를 어떻게 변수에 담죠?
- 함수는 1급 객체임 → 데이터가 아닌 기능이지만 매개변수나 다른 공간에 담을 수 있음
  - 함수 자체가 데이터 타입은 아니지만 함수를 컴퓨터가 인식할 때 1급 객체라는 걸로 인식을 해서 데이터로 저장시킬 수 있음 → 함수를 만든 다음 변수에 저장 가능

함수 생성 방법 2가지
1. 직관적인 function 키워드 사용: 구버전 코드 방식
2. arrow function: 현재 표준 단위

react, vue 라이브러리(프레임워크 단위)에서는 arrow function 사용이 기본
- 일반 함수를 써도 되긴 하지만 오픈 api나 소스가 다 arrow function으로 작성 & 사용 권장하고 있음

함수와 태그 연결해보기
- 방법이 크게 세 가지 있는데 지금은 그냥 가장 쉬운 방법으로 해보기
  - 현업에서는 지금 하는 것처럼 안 함
- 버튼 태그 onclick 속성에 작성한 함수를 넣기
  - 이렇게 하면 서로 연결되고 버튼 누르면 콘솔 창에 메시지 뜸

이제 진짜 실전으로 들어감: 태그 제어하기 → 먼저 DOM 개념을 알아야 한다!

DOM(Document Object Model)

HTML 문서의 요소를 효과적으로 다루기 위하여 모든 요소를 분리하고 상하관계를 설정한 후 배치한 구조
- 모든 요소: tag, content, attribute → 쪼개면 단일 제어 가능
- HTML 문서를 태그, 속성, 컨텐츠 등 하나하나 쪼개서 관리하는 모델
- document
  - 현재 내가 보고 있는 html 파일의 모든 정보를 담고 있는 객체 → 객체: 쪼개서 관리한다!
  - 모든 정보를 담고 있는 최상위 객체
핵심
- HTML의 데이터를 접근하기 위해서는 document.getElementBy~
- DOM에서 특정 값에 접근할 때는 key로 접근

리엑트 안 쓰는 곳에서는 DOM 많이 사용
리엑트 쓰는 곳은 virtual DOM 사용(기본적인 원리와 개념은 비슷한데 접근법이 조금 다름)
리엑트, 앵귤러, 뷰 같은 최신 프레임워크나 라이브러리에서는 DOM 사용을 권장하지 않고 있다고 함

HTML 문서 읽는 순서: DOM은 언제 사용되는가?
DOM 구조 (1)
DOM 구조 (2)

실습

문서에서 아이디가 text인 요소를 가져와 줘!
- 영문 순서대로(주어-동사-목적어-...) 입력하면 됨
  - 자동 완성 활용하기
  - 결과
컨텐츠만 추출하는 방법
- 결과

3교시

실습: 컨텐츠 변경

버튼을 클릭했을 때 h1의 글자를 "변경 완료"라고 수정하기
- 함수와 버튼 연결:
  - 현업에서 쓰는 방법은 아님

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="text">나를 수집해 봐!</h1>
    <button onclick="change()">텍스트 변경</button>

    <script>
        // 컨텐츠 변경
        // 실습: 버튼을 클릭했을 때 h1의 글자를 "변경 완료"라고 수정하기
        // 핵심: dom에서 내용을 변경할 때는 대입을 통해서 변경한다. → 객체 기반이기 때문!    
        const change = () => {
            document.getElementById("text").innerText = "변경 완료";
        } 
    </script>
</body>
</html>

innerHTML과 innerText
- 태그를 인식하냐 인식하지 못하냐의 차이
  - innerText: 글자를 가지고 올 때 주로 사용 → 태그 가져올 때 쓰면 안 됨
- 단순 글자를 가지고 올 때는 innerText와 innerHTML 결과가 같음

XSS
XSS(Cross Site Scripting)는 웹 서버 사용자에 대한 입력값 검증이 미흡할 때 발생하는 취약점으로, 주로 여러 사용자가 보는 게시판이나 메일 등을 통해 악성 스크립트를 삽입하는 공격 기법입니다.

복수개의

유사 배열 vs 배열
- 공통점: 인덱스 존재, length 존재, 반복문 활용
- 차이점: 배열 함수는 사용이 불가능하다.
- 해결책: 배열 함수를 사용하고 싶다면? → 배열로 형변환을 시킨다.
  - 이유: react 등 최신 라이브러리들은 ECMA6 문법이 기본 문법 → 배열로 바꿔서 써야할 일이 가끔 있음

오후

4교시

지난 시간 복습

실습: 멜론 차트 불러오기
- 406 코드: 브라우저 정보(헤더 정보) 누락
- 개발자 도구>네트워크>User-Agent
  - 브라우저로 접근하는 것처럼 속임 → 컴퓨터가 아닌 사람이 접근하는 것처럼 행동하게끔 만듦
- 데이터 개수 항상 확인하기
  - 곡 제목은 100개인데 가수는 139명 → 한 노래를 여러 가수가 부른 경우가 있기 때문
  - 부모 선택자로 불러오니 가수명이 두 번 나옴 → div 태그 밑에 a 태그와 span 태그 둘 다 가수명을 가지고 있어 발생
- 데이터프레임으로 만들기
네이버 환율 페이지 데이터 가져오기
- iframe
  - 특정 페이지에 저장되어 있는 데이터를 메인 페이지로 가져와서 보여주는 태그

셀레니움

셀레니움과 호환되는 python 3.11 설치하기

Selenium 라이브러리
- 자동화 수집 도구
- requests 라이브러리가 가지는 역할: 브라우저를 대신하여 페이지의 정보를 요청, 응답
- requests 라이브러리가 가지는 한계인 브라우저 조작 기능을 하게 해주는 라이브러리 (Selenium 라이브러리)
- 클릭, 입력, 스크롤, 화면 전환 등 사람이 하는 행동들을 똑같이 가능하게 해 주는 라이브러리
- 코드 작성 시 사람의 행동을 그대로 작성해 줘야 한다!

5교시

실습: 한솥도시락 메뉴 추출

메뉴명, 가격 데이터 추출
selenium 라이브러리를 활용하여 다양한 데이터를 수집
time 라이브러리를 이용하여 쉬는 시간을 주기
- 코드 실행을 할 때 사람이 하는 것처럼 보이게 도와줌

6교시

"더보기" 버튼 클릭하기

더 많은 메뉴 정보를 추출하기 위하여 "더 보기" 버튼을 눌러야 함
- 더 보기 버튼의 요소 정보를 driver에게 알려주기

# 더보기 버튼의 위치를 driver에게 알려주기!
btn_more = driver.find_element(By.CSS_SELECTOR, "a.c_05")
btn_more.click()

한 번만 누르고 끝이 아니라 마지막 페이지까지 계속 눌러야 하는데 어떻게 할까?
- 반복문 활용! → for, while

예외 처리 알고리즘

try, except
- try 구문에서는 실행문을 실행하다가 오류가 났을 때 오류 메시지를 출력하지 않고
- except 구문을 실행
장점: 오류 발생을 제어하고 코드 실행을 진행

# 더 보기 버튼을 여러 번 눌러야 함 → 반복문 실행 & try, except 사용

# 1. for 문
try:
    for i in range(50):
        btn_more = driver.find_element(By.CSS_SELECTOR, "a.c_05")
        btn_more.click()
        time.sleep(1)
except:
    print("더 보기 버튼 모두 클릭 완료!")

2. while 문
while True:
    try:
        btn_more = driver.find_element(By.CSS_SELECTOR, "a.c_05")
        btn_more.click()
        time.sleep(1)
    except:
        break

전체 코드 정리

진행 순서
1. 웹 드라이버에게 페이지 요청 및 페이지 열기
2. while 문을 활용하여 더 보기 버튼 누르기 (메뉴 전체가 출력될 때까지)
3. 도시락 메뉴명, 가격 가져오기
4. 데이터프레임으로 만들기

# 한 셀에 전부 모아 정리하기
from selenium import webdriver as wb
from selenium.webdriver.common.by import By
import time 
import pandas as pd

# 1. 웹 드라이버에게 페이지 요청 후 열기
driver = wb.Chrome()
driver.get("https://www.hsd.co.kr/menu/menu_list")
time.sleep(1) # 1초 

# 2. while 문을 활용하여 더 보기 버튼 모두 누르기 → 메뉴 전체가 출력되도록
while True:
    try:
        btn_more = driver.find_element(By.CSS_SELECTOR, "a.c_05")
        btn_more.click()
        time.sleep(1)
    except:
        break

# 3. 도시락 메뉴명, 가격
menu = driver.find_elements(By.CSS_SELECTOR,"h4.h.fz_03")
price = driver.find_elements(By.CSS_SELECTOR,"div.item-price>strong")

dic = {
    "메뉴명": menu_list
    , "가격":price_list
}

for i in range(len(menu)):
    menu_list.append(menu[i].text)
    price_list.append(price[i].text)

pd.DataFrame(dic)

주의: 화면 닫히면 데이터 수집 안 됨(웹 브라우저 창이 반드시 켜져 있어야 데이터 수집이 가능합니다.)
→ 선택자 정보는 브라우저를 통해 태그 정보를 가져오기 때문에 find_element(s) 할 때는 항상 코드로 연 크롬 창이 켜져 있어야 함

7-8교시: 네이버 클라우드 교육

재미있게 배우는 클라우드와 AI 트랜드

History of Cloud

ON-PREMISE

IDC(In-Data-Center): 직접 운영 방식

직접 컴퓨터를 조립해서 게임

COLOCATION

lease(임대) 방식
이미 구성되어 있는 장비를 대여

PC방 가서 게임

CLOUD COMPUTING

책임 공유 모델

관리 책임 모델

하루 돌아보기

👍 잘한 점

수업 중 대답 열심히 함

👎 아쉬웠던 점

미니 프로젝트 걱정에 집중을 잘 못했음

🔬 개선점

정규 수업 시간에는 해당 수업에만 집중하기

Suhyeon Lee

2 B R 0 2 B

이전 포스트

[인공지능사관학교: 자연어분석A반] JavaScript (3) / Crawling (2)

다음 포스트

[인공지능사관학교: 자연어분석A반] JavaScript (4) / Crawling (3)

목차

Ⅰ. 오전

A. 1교시: JavaScript

1. 지난 시간 복습

객체

함수

2교시: JavaScript

함수(cont.)

DOM(Document Object Model)

실습

3교시

실습: 컨텐츠 변경

오후

4교시

지난 시간 복습

셀레니움

5교시

실습: 한솥도시락 메뉴 추출

6교시

"더보기" 버튼 클릭하기

예외 처리 알고리즘

전체 코드 정리

7-8교시: 네이버 클라우드 교육

재미있게 배우는 클라우드와 AI 트랜드

History of Cloud

ON-PREMISE

COLOCATION

CLOUD COMPUTING

책임 공유 모델

관리 책임 모델

하루 돌아보기

👍 잘한 점

👎 아쉬웠던 점

🔬 개선점

[인공지능사관학교: 자연어분석A반] JavaScript (3) / Crawling (2)

[인공지능사관학교: 자연어분석A반] JavaScript (5) / Crawling (4)

0개의 댓글