1,2,3편에서 배운 지식들을 이용하여 이번편에서는 실제 웹사이트를 크롤링해서 데이터를 추출하는 것을 실습할 차례입니다. 드디어 마지막 편입니다. 조금만 힘내서 자바스크립트로 크롤링하는 기술을 마스터 해봅시다! 크롤링할 사이트 소개 코로나보드의 데이터는 질병관리청에서 운영하는 코로나19 웹사이트로부터 크롤링을 합니다. 이렇게 실제 웹페이지에 맞춰서 크롤러를 만들어 두면 만든 직후에는 잘 동작하지만, 해당 사이트의 구성이나 디자인이 업데이트되는 순간 웹페이지 내의 데이터 위치도 같이 바뀌기 때문에 기존 크롤러 코드가 제대로 동작을 하지 않을 가능성이 큽니다. 때문에 크롤러의 코드는 지속적인 유지보수가 필요합니다. 이 책에서는 이러한 유지보수를 피하고 설명의 일관성을 유지하고자 실제 크롤링할 웹페이지 전체를 클론해서 학습용으로 제공합니다 . ...
자바스크립트 크롤러 만들기 튜토리얼 1편, 2편에서는 크롬 웹 브라우저에서 제공하는 [개발자 도구]를 이용하여 이미 열려 있는 웹페이지에서 원하는 정보를 찾는 방법을 알아보았습니다. 그런데 이 방식은 웹 브라우저를 실행한 후 사용자가 웹페이지를 직접 열고 [개발자 도구]에서 자바스크립트 코드를 입력해야 하므로 자동화가 쉽지 않습니다. (참고: ‘헤드리스 브라우저를 이용한 크롤링’에서 헤드리스headless 브라우저를 이용하여 UI 없는 웹 브라우저를 코드만으로 조작하는 방식으로 크롤링이 가능하긴 합니다) 웹 브라우저와 독립적으로 동작하는 CLIcommand line interface 기반 크롤러를 만들면 이 문제를 해결할 수 있습니다. CLI 애플리케이션으로 만들면 터미널terminal 또는 셸shell에서 쉽게 테스트해볼 수 있고, 서버에서 주기적으로 자동 실행되게 만들 수도 있습니다. ...
웹 크롤링을 하려면 웹페이지 구조인 DOM과 CSS 셀렉터 문법을 알아야 합니다. 각각을 알아봅시다. 웹페이지와 DOM 웹페이지는 HTML 형식으로 제공되는 일종의 문서라고 생각할 수 있습니다. 웹 브라우저로 웹페이지에 접근한다는 것은, 간단히 말해 서버로부터 해당 주소에서 제공하는 HTML 문서를 HTTP 통신으로 전달받는 것을 의미합니다. 전달받은 HTML 문서는 단순 텍스트 형태이기 때문에 프로그램에서 사용하기 좋은 데이터 구조로 표현해야 하는데, 이 구조를 DOM이라고 부릅니다. DOMDocument Object Model은 최상위 노드node와 여러 단계의 자식 노드들로 구성된 트리tree 구조입니다. 따라서 원하는 노드를 쉽게 찾아서 수정/삭제하거나 원하는 위치에 새로운 노드를 추가할 수 있습니다. ...
크롤링을 하기 전에 대상 웹페이지의 구조를 파악하고 원하는 정보만 효율적으로 추출해올 방법을 구상해야 합니다. 웹페이지 구조를 분석하는 가장 좋은 방법은 웹 브라우저에 내장된 [개발자 도구]를 이용하는 겁니다. [개발자 도구]에서는 현재 웹페이지의 HTML 구조를 라이브로 볼 수 있고, HTML 요소에 적용된 CSS 스타일을 조사한다거나, 웹페이지에서 수행되는 HTTP 요청/응답 내용을 모니터링하거나, 자바스크립트 코드를 디버깅하는 등 매우 다양한 일을 할 수 있습니다. 이러한 기능들은 크롤링할 웹페이지를 파악하는 데도 매우 유용하지만 자신이 개발 중인 웹페이지를 디버깅하는 데도 거의 필수로 쓰이니 사용법을 잘 익혀두면 많은 도움이 됩니다. 이번 장뿐만 아니라 나중에 프런트엔드 개발을 진행할 때도 [개발자 도구]를 계속 사용할 것이라서 일반적으로 자주 사용되는 기능을 하나하나 설명하겠습니다. ...
본 튜토리얼 시리즈에서는 필자가 개발하고 운영했던 코로나19 통계 정보 제공 사이트인 코로나보드에 실제 사용되었던 코드 기반으로 자바스크립트 크롤러를 만드는 방법에 대해서 설명합니다. 본 글의 내용은 필자가 집필한 ‘코로나보드로 배우는 실전 웹 서비스 개발’ 책의 일부를 발췌해서 튜토리얼 형식에 맞게 재구성하였습니다. 글은 지금 보고계신 소개글 외에 총 4편으로 구성되어있습니다. 자바스크립트로 크롤러 만들기 소개: 크롤링 개념 및 튜토리얼 소개 자바스크립트로 크롤러 만들기 1편: 크롤링을 위한 크롬 개발자 도구 사용법 익히기 자바스크립트로 크롤러 만들기 2편: 웹페이지 크롤링을 위한 배경 지식 알아보기 자바스크립트로 크롤러 만들기 3편: 다양한 유형의 웹페이지 크롤러 만들어보기 자바스크립트로 크롤러 만들기 4편: 실제 웹페이지 크롤링해보기 그럼 이제 본격적으로 크롤러를 개발하기 전에 개념적인 부분들 부터 소개해보도록 하겠습니다. ...