Professional Procrastination
본디 매일의 배움을 기록하고자 시작했던 시리즈이다.
허나, 당장 직면한 프로젝트가 바쁘다는 핑계 하에 지난 TIL 5 이후,
일주일이 지난 주말에서야 여유를 가지고 정리 겸 그동안 배운 내용들을 기록하고자 한다.
Let's get it!
크롤링 작업 사전 설명
- 지난 간단한 테스팅 코드를 통해 python이 아닌 javascript로도 selenium 라이브러리를 활용하여 페이지를 탐색하며 크롤링을 할 수 있음을 확인하였다.
- 우리 프로젝트에서 필요한 데이터를 모두 가져오기 위해 A 플랫폼에서 B 페이지의 하위에 존재하는 C, D, E ... 등의 모든 페이지에서 데이터 스크래핑 작업이 필요했다.
- B 페이지는 무한 스크롤을 통해 새로운 데이터를 렌더링 하도록 구성되었다.
- 작업 중간 계속해서 특정 페이지에서의 스크래핑을 할 때, 스크래핑 작업을 마치고 상위 페이지로 돌아갔을 때, 모달 창을 켰을 때 등 다양한 이벤트 발생 시 데이터를 제대로 가져오지 못하는 현상이 존재하였다.
크롤링
- 렌더링 된 B 페이지에서 x 높이 만큼씩 스크롤, t 시간만큼 새로운 데이터 렌더링을 대기를 반복한다. 페이지 렌더링이 더 이상 없을 경우 스크롤 중단.
- 탐색하고자 하는 모든 페이지에서 공통적으로 사용하는 a태그를 변수에 담아 해당 변수의 길이만큼 페이지 탐색 - 스크래핑 작업 반복
- async await을 활용하여 비동기적 작업을 동기적으로 사용하려 했으나, 브라우저 동작 특성 상 동작 순서가 local 환경과 다를 수 있음을 알게되어 명시적 대기를 선언한 부분이 제대로 동작하질 않아 에러 발생. 우선적으로 다음 작업을 위한 데이터 렌더링이 필요한 부분에서 암시적 대기를 하도록 선언하여 오류 해결
+서버 파트를 맡고 계신 팀원 분이 기존 크롤링 작업을 통해 가져오고자 했던 데이터에 관한 api에 직접 접근할 수 있는 획기적인 방법을 알아냈다. 수고스러운 크롤링 작업 없이 업체에서 다루는 방대한 데이터를 직접 접근할 수 있는 방법이다. 허나, 이를 무단으로 사용하는 것은 엄연한 불법이므로 해당 플랫폼에 직접 문의를 해 볼 예정이다.
+js 크롤링 라이브러리 중 가장 인기있는 2가지는 cheerio, puppeteer가 있다. 이는 다음 기회에 사용해보면 좋을 듯 하다!
프론트엔드 오피스 아워
- 코치님들께 드렸던 질문 중 많은 부분이 프로젝트 기획, 디자인 등과 관련되었던 적이 많은데 이 부분에 대한 코치님의 명쾌한 해답이 인상 깊었다.
'우리는 엔지니어이다. 기획, 디자인은 +a의 요소이지 엔지니어가 가져야 될 핵심 skill은 아니다.' - 얼마 전까진 클라이언트 단에서 대부분의 작업을 처리하는 방식으로 진행되어 왔지만 점차 이를 다시금 서버 단으로 되돌려주고 있는 추세이다. 이와 관련하여 서버에서 데이터 필터링 등 클라이언트 단에서 넘겨받은 작업들을 처리하는 컴포넌트를 일컫는 '서버 컴포넌트'라는 개념이 등장하였다.
- Redux를 사용하기에 적합한 때는 각 컴포넌트의 깊이가 깊어지고 이를 다른 컴포넌트에서 공유해야 될 때!
다음 편에선 본격적으로 페이지 관련 작업 내용들을 기록할 예정이다.
Dev Notes, with bit of JS?