아이디어스 스크래퍼(Puppeteer, Electron)

아이디어스 스크래퍼(Puppeteer, Electron)

---

서론

"단순 스크래핑만 양산형으로 만드네 이 사람?"이라고 물어본다면 할 말 없긴 하지만,
데스크톱 애플리케이션으로 뭐가 좋을까 찾는 중이라고 핑계를 대본다..

---

1. Electron 선택 이유

Node.js Desktop app이라고 검색하니까, Electron이 제일 첫 번째 나왔다. 그게 전부다

증거자료를 첨부하겠다.

증거 자료 1

2. Electron이 최선의 선택이었나?

• 그건 잘 모르고 그냥 빠른 선택을 했다

---

앱 실행 화면

---

스크래핑 결과 화면

---

3. 역경과 코난 아니고 고난

• 할 줄 아는 언어라고는 파이썬이라 어려웠음

index.html의 발전과정

scripts 태그 내, 직접  작성하다 보니 너무 길어지고 흉물 그 자체로 변했다.

 <script>
 document.getElementById("start-scraping").addEventListener("click", () => {
    const searchTerm = document.getElementById("search-input").value;
    const 주저리 주저리...
    ...
    
    const toolong
 </script>

 

외부 파일 추가해서 사용하니 깔끔해졌다

<script src="scraping_data.js"></script>

 

중간 중간 테스트 코드도 작성

// test_analyzeKeywords.js
const { analyzeKeywords } = require("./utils/analyzeKeywords");

const sampleData = [
  "Sample product 1",
  "Another product",
  "Product 3 with more keywords",
  "Yet another product",
  "Product 5 with even more keywords",
];

console.log(analyzeKeywords(sampleData));

---

4. CSR(Client-Side Rendering)과 SSR(Server-Side Rendering)

Scripts 태그 작성하다가,  CS 공부할 떄 외웠던 게 어렴풋이 생각났다.
"이게 그 CSR이랑 SSR 방식 중 하나인가?" , 그래서 다시 찾아서 정리했다.

<script src="scraping_data.js"></script>

 

4.1 Client-Side Rendering

1. 클라이언트  -> 허곰 사이트 // 접속
2. 허곰 사이트 ->  클라이언트 //  "index.html 받아라"
3. 클라이언트 ->  허곰 사이트 // "index.html에 사용되는 <something>.js 파일 내놔라" 시전 
4. 허곰사이트 ->  클라이언트 // <something>.js 전송, 하지만 각 종 프레임워크, 라이브러리 등을 곁들인
5. 클라이언트 // "화면 보인다"

이러한 과정으로 인해 아래 문제점을 야기함

• 사용자가 첫 화면을 보기까지 시간이 오래 걸릴 수 있음
• SEO 좋지 않음

---

4.2 Server-Side Rendering

CSR의 문제점으로 인해 SSR 방식이 도입됨

1. 클라이언트 -> 허곰 사이트 // 접속
2. 허곰 사이트 // 서버에서 Html 만듦
3. 허곰 사이트 -> 클라이언트 // "잘 만들어진 index.html 받아라, 동적 제어 코드도(ex.js) 좀 넣었다 " 
4. 클라이언트 // "화면 보인다"

따라서 CSR 방식보다 첫 화면을 빨리 볼 수 있고, 검색 엔진 최적화에 더 효율적이지만 역시 문제점이 존재함

1. Blinking issue

• 사용자가 특정 동작을 위해 클릭을 하는 경우, 전체적인 웹사이트를 다시 서버에서 받아옴.
  받아오는 과정에서 JavaScript 파일을 모두 다운로드하기 전까지 흰 화면이 나타날 수 있는데(Blinking issue) 이것은 사용자 경험을 저해시킬 수 있음

2. 서버 과부하

• 서버에서 필요한 데이터를 가지고 와서 HTML 모두 만들기 때문에, 비교적으로 과부하 걸리기 쉬움

---

마무리

아이디어스 스크래핑을 한 이유는 상품명 키워드 분석을 위해 만들고 있었다

하지만  아이디어스는 검색 기반이 아니고 fan 기반?이다.

 

네이버에 "맛깔난 잠옷 바지"라고 검색하면 Idus 상품은 나오지 않는다.

상품 작가의 fan들이 구매하거나 직접 사이트를 접속해서 구매하는 형식이다(무신사처럼)

당연한 건데 생각을 못했네

따라서 스크래핑만 해보고 마무리했다