post: 2024-08-20 16:25

src/content/blog/examining-ssu-u-saint.md

@@ -10,8 +10,11 @@ topics:
   - html
   - parsing
   - scraping
-updatedDate: 2024-08-20T14:32+09:00
+  - rusaint
+updatedDate: 2024-08-20T15:44+09:00
+series: u-saint 스크래핑
 ---
+
 **숭실대 u-saint 학사 시스템은 SAP에서 제작한 솔루션을 사용하고 있습니다. u-saint가 가진 불편함 때문에 많은 학생들이 이를 쉽게 열람하기 위해
 파싱하고자 하였고, 최근 들어 [SSUrade](https://github.com/nnnlog/ssurade)
 나 [숨쉴때 성적표](https://apps.apple.com/kr/app/%EC%88%A8%EC%89%B4%EB%95%8C-%EC%84%B1%EC%A0%81%ED%91%9C/id1601044486) 등 그 결과물이
@@ -48,15 +51,24 @@ u-saint의 주소인 `saint.ssu.ac.kr`은 실제 u-saint 애플리케이션이 
 > 호스트 뒤 `:8443`을 빼도 접속됩니다.
 
 ### URL에 담긴 정보
+
 애플리케이션의 실제 URL을 알게 되는 것만으로도 우리는 많은 정보를 얻을 수 있습니다. 한번 살펴봅시다.
 
 강의시간표 페이지의 URL은 `https://ecc.ssu.ac.kr/sap/bc/webdynpro/SAP/ZCMW2100` 입니다.
-비슷하게 학생 성적 조회 페이지는 `https://ecc.ssu.ac.kr/sap/bc/webdynpro/SAP/ZCMB3W0017`이죠. 우리는 여기서 path의 가장 마지막 부분이 애플리케이션의 고유 ID임을 알 수 있습니다.
+비슷하게 학생 성적 조회 페이지는 `https://ecc.ssu.ac.kr/sap/bc/webdynpro/SAP/ZCMB3W0017`이죠. 우리는 여기서 path의 가장 마지막 부분이 애플리케이션의 고유 ID임을 알
+수 있습니다.
 
-그리고 URL에 반복되는 `sap`나 `webdynpro` 같은 키워드를 통해 검색을 좀 해보면 [SAP WebDynpro](https://help.sap.com/doc/saphelp_scm700_ehp02/7.0.2/en-US/a6/41b6a207c7427582c480c654c2e3f7/content.htm?no_cache=true)는 [SAP](https://en.wikipedia.org/wiki/SAP)의 ABAP 프로그램을 웹에 전시하는 프레임워크의 일종임을 알 수 있습니다.
+그리고 URL에 반복되는 `sap`나 `webdynpro` 같은 키워드를 통해 검색을 좀
+해보면 [SAP WebDynpro](https://help.sap.com/doc/saphelp_scm700_ehp02/7.0.2/en-US/a6/41b6a207c7427582c480c654c2e3f7/content.htm?no_cache=true)
+는 [SAP](https://en.wikipedia.org/wiki/SAP)의 ABAP 프로그램을 웹에 전시하는 프레임워크의 일종임을 알 수 있습니다.
 
 ## SAP WebDynpro를 파해쳐라
-앞서 알아낸 URL을 통해 u-saint가 WebDynpro로 만들어진 페이지임을 알 수 있습니다. 이것이 의미하는 바는 바로 u-saint를 스크래핑 한다는 건 WebDynpro 페이지를 스크래핑 한다는 말과 같습니다. 즉, 우리가 해야 할 일은 이제 u-saint 스크래핑이 아닌 WebDynpro 프레임워크로 만들어진 페이지를 스크래핑 하는 겁니다. SAP WebDynpro가 이미 많은 곳에서 사용되는 프레임워크인 만큼, 이 정보를 안다는 사실 만으로 알아낼 수 있는 것들이 많습니다.
+
+앞서 알아낸 URL을 통해 u-saint가 WebDynpro로 만들어진 페이지임을 알 수 있습니다. 이것이 의미하는 바는 바로 u-saint를 스크래핑 한다는 건 WebDynpro 페이지를 스크래핑 한다는 말과
+같습니다. 즉, 우리가 해야 할 일은 이제 u-saint 스크래핑이 아닌 WebDynpro 프레임워크로 만들어진 페이지를 스크래핑 하는 겁니다. SAP WebDynpro가 이미 많은 곳에서 사용되는 프레임워크인
+만큼, 이 정보를 안다는 사실 만으로 알아낼 수 있는 것들이 많습니다.
 
 ## 다음 글
-다음 글에서 본격적으로 SAP WebDynpro를 스크래핑하는 데 어떤 어려움이 있는지 알아보고, 초기 u-saint 파싱 라이브러리인 [pysaint](https://github.com/gomjellie/pysaint)를 살펴보며 어떻게 더 접근하여야 문제를 해결할 수 있을지 알아봅시다.
+
+다음 글에서 본격적으로 SAP WebDynpro를 스크래핑하는 데 어떤 어려움이 있는지 알아보고, 초기 u-saint 파싱
+라이브러리인 [pysaint](https://github.com/gomjellie/pysaint)를 살펴보며 어떻게 더 접근하여야 문제를 해결할 수 있을지 알아봅시다.

src/content/blog/u-saint-the-hard-parts.md

@@ -0,0 +1,70 @@
+---
+title: 숭실대학교 u-saint 스크래핑하기 - 어려운 점
+description: 왜 u-saint 스크래핑은 어려울까요? 스크래핑에 대해 간략히 알아보면서 어떤 점이 u-saint 스크래핑을 어렵게 하는지 알아보고, 초기 라이브러리인 pysaint의 접근법을 알아봅시다.
+category: web
+pubDate: 2024-08-20T14:45+09:00
+hidden: true
+topics:
+  - ssu
+  - u-saint
+  - html
+  - parsing
+  - scraping
+  - rusaint
+updatedDate: 2024-08-20T16:13+09:00
+series: u-saint 스크래핑
+---
+
+**[앞선 글](/post/examining-ssu-u-saint)에서 u-saint의 간략한 외부 구조와, SAP WebDynpro 프레임워크로 u-saint가 만들어졌다는 점을 알아봤습니다. 그렇다면 일반적인 웹
+스크래핑처럼 u-saint도 동일한 방법으로 DOM을 파싱하고 데이터를 가져오면 되지 않을까요? 왜 다양한 라이브러리, 앱들이 나오고 이렇게 글도 쓰는 걸까요? 일반적인 웹 페이지 스크래핑과 u-saint 스크래핑의
+차이와, 어떤 부분이 u-saint 스크래핑을 어렵게 하는지 알아봅니다.**
+
+## 웹 스크래핑은 어떻게 하는가?
+
+아마 [jsoup](https://jsoup.org/)이나 [Selenium](https://www.selenium.dev/)을 사용해 보셨다면 아시겠지만 웹 스크래핑은 페이지의 구조만 잘 파악한다면 그렇게 어렵지
+않습니다. 일반적인 웹 개발자라면 HTML 노드나, CSS 선택자에 대한 지식이 있을 것이고, CSS 선택자와 DOM API를 활용해 보았다면 이를 이용해 편리하게 스크래핑을 할 수 있죠. `id` 어트리뷰트로 특정
+노드에 대한 고유 식별자가 있다면 일은 더 쉬워집니다.
+
+다만 스크래핑에서 어렵다고 여겨지는 부분은 **동작** 인데요. 일반적인 정적 페이지(블로그 포스트 등)이라면 특별한 클라이언트의 조작 없이도 페이지의 모든 정보에 접근할 수 있습니다. 다만 로그인이나, 특정한 버튼
+조작이 필요하거나, SPA 등의 자바스크립트의 개입이 많은 페이지의 경우 웹 스크래핑이 힘들어집니다. 당연히 스크래핑이란 사용자의 액션을 모사하여 사용자가 볼 수 있는 데이터를 기계가 수집할 수 있도록 하는 행위인
+만큼, 액션의 수가 많아지고 복잡해 질 수록 스크래핑도 어려워지겠죠.
+
+여기서 스크래핑은 두 가지 방법으로 나눕니다. 상대적으로 간단한 페이지(정적 페이지)에 대한 **정적 스크래핑**과 복잡한 사용자 액션이 필요한 페이지에 대한 **동적 스크래핑**이죠.
+
+### 정적 스크래핑
+
+앞서 언급한 [jsoup](https://jsoup.org)가 정적 스크래핑의 좋은 예시라고 할 수 있습니다. 정적 스크래퍼가 하는 일은 간단합니다. HTML 문서를 파싱하여 DOM 트리 형태로 만들고, CSS
+선택자나 id 등으로 DOM 내부 요소들을 조작, 파싱할 수 있는 API로 웹 페이지 내부 정보들을 가져올 수 있게 합니다.
+
+이런 정적 스크래퍼들은 웹 브라우저의 동작을 정확히 구현하지 않고, 단순히 HTML 문서만 불러와 분석, 처리하는 것이기 때문에 매우 가볍고 빠르며, 다양한 환경에서 처리할 수 있죠. 다만 앞서 언급한 정적
+스크래핑과 동적 스크래핑의 차이로 인해, 복잡한 웹 페이지들은 스크래핑이 어렵습니다(CSR, SPA 등등...).
+
+> [!IMPORTANT] 정적 스크래핑의 장/단점
+> **장점**
+> - 빠르고 간편하다
+> - 브라우저가 제공되지 않는 환경(웹 브라우저가 기본 제공되지 않는 환경, 백그라운드 작업 등)에서 사용할 수 있다.
+> 
+> **단점**
+> - 복잡한 사용자 동작은 처리할 수 없다.
+> - CSR, SPA 등의 기술을 사용하거나 모던 프레임워크를 사용하는 페이지는 스크래핑하기 어렵다.
+
+### 동적 스크래핑
+
+정적 스크래핑에 대비해 [Selenium](https://selenium.dev)로 대표되는 동적 스크래핑은 좀 더 정확하고, 복잡한 액션을 수행할 수 있습니다. 동적 스크래핑은 단순히 DOM 구조만 파싱하는 것이 아니라 실제 브라우저를 스크래핑 환경에서 실행하여 브라우저를 조작하는 방식으로 스크래핑이 이루어집니다. 즉, 동적 스크래핑 툴은 HTML을 직접 파싱하는 동작을 한다기 보다는 브라우저를 조작하고 브라우저에서 데이터를 읽는 API를 제공합니다.
+
+이런 동적 스크래핑 툴들은 본래 웹 사이트를 테스트하는 데 주로 쓰입니다. 하지만 브라우저를 자동으로 조작할 수 있다는 점에 착안하여 스크래핑 용도로도 사용됩니다. 실제 브라우저 환경을 그대로 구현하므로 사용자에게 사이트가 어떻게 보일지, 어떻게 동작할지 정확하게 확인할 수 있는 것을 역이용 한 것이죠. 또한 브라우저에서 사용할 수 있는 JS API 등을 그대로 이용할 수 있으므로 웹 개발에 익숙한 개발자라면 이를 활용해서 스크래핑을 더 편리하게 할 수 있습니다.
+
+하지만 브라우저가 직접 구동되어야 하는 만큼 브라우저가 사용하는 리소스+α를 사용하게 되고, 브라우저 런타임에서 모든 HTML, CSS, JS 파싱 및 실행을 하게 되므로 정적 스크래핑에 비해 속도가 느리고, 브라우저 드라이버를 미리 설치해야 하는 등 환경에 제약이 있습니다.
+
+> [!IMPORTANT] 동적 스크래핑의 장/단점
+> **장점**
+> - 브라우저의 모든 동작을 재현할 수 있다.
+> - JS API도 활용하여 편하게 스크래핑 할 수 있다.
+> - (이론상)모든 형태의 페이지를 스크래핑 할 수 있다.
+> 
+> **단점**
+> - 브라우저 런타임이 자원+시간을 많이 소모한다.
+> - 브라우저를 실행할 수 있는 환경에서만 사용할 수 있다.
+
+## u-saint 스크래핑의 적
+스크래핑의 기본을 알아보았으니, 본론으로 들어가 봅시다.