웹 페이지 크롤링 하기

웹페이지를 크롤링하는 과정은 대개 js에서 진행이 된다. 보통 프론트엔드에서도 js를 다룰 수 있기 때문에 프론트 엔드 단에서 진행을 할 수 있는 과정이지만, 업무의 분업을 확실하게 하기 위해서 프론트 엔드 영역은 UX/UI 에 해당되는 부분들만 하는 것을 원칙으로 하고, 그 외 웹사이트 내에 있는 기능적인 부분들은 백엔드가 담당해서 진행을 하는 방식으로 프로젝트를 진행한다. 그럼 본격적으로 크롤링에 대한 방식을 진행해보자.

일단 기본적으로 MVC 구조의 아키텍쳐를 따르고 있다.

그림 1. model 영역

크롤링 대상은 보안 뉴스 웹사이트이다. 기본적으로 제목, 내용, 작성자, 조회수를 갖고오는 형태로 진행한다. 그리고 JSON 형태로 화면에 출력을 진행 할 것이기 때문에, toJSON으로 변환을 진행을 한다.

그림 2. 라우트 영역

다음은 URL 설정이다. 기본적으로 / 으로 들어가면 controller에 있는 getNewList 메소드를 불러오는 형태가 된다. 그러면 이제 controller에는 무엇이 존재할까?

그림 3. Controller 영역

/ 으로 라우팅 되어있는 기능을 찾아보니 page, limit 이 존재하는거보니 페이지네이션 기능이 존재한다고 볼 수 있다. 페이지네이션이 되어있는 상태에서 이제 Service 영역으로 값이 넘어가게 된다. 그리고 newList에 그 결과값은 newList를 통해서 얻을 수 있게 된다. 그리고 화면에 송출이 되는 형태는 res.json를 통해서 프론트 작업자가 json에 있는 값들을 자유자재로 사용을 하면된다. 컨트롤러의 역할은 요컨데 라우팅과 기능이 되는 부분을 연결해주고 화면에 송출을 해주는 역할이라고 보면 될 것 같다.

그럼 다음 기능적인 부분이 있는 Service 영역을 보도록 하자

그림 4. Service 영역

생각보다 길다. url을 받아오는 곳, Promise 기반으로 비동기 통신을 받는 axios, 그리고 EUR-KO 형태로 되어있는 글을 변환하기 위한 iconv 를 사용해서 데이터를 변환해주고, HTML을 파싱하여 데이터를 가져오는 역할인 cheerio 를 사용해서 html에 존재하는 값들을 가져온다. 그리고 세부 데이터를 가져오는 형태는 태그들의 값들을 잘 이용해서 배열에 넣어서 저장을 진행한다.

마무리로 json 형태로 반납을 하면 원하는 값들을 가져올 수 있는 형태가 된다.

그림 5. 결과

그럼 우린 원하는 형태의 데이터를 가져 올 수 있게 된다. 나머지 작업은 보기 좋게 프론트에서 꾸며놓으면 된다.

 

근데 한가지 의문점이 남는다. 모델을 mongodb 스키마를 통해서 가져왔으면 mongodb에 값이 남아야되지않냐라는 질문이 생길 수 있다. 그거는 .env파일에 일단 본인의 mongodb를 연결을 한 후에 쌓인 데이터들을 처리하면 된다.

그림 6. mongodb atlas 연결

기본적으로 compass나 shell을 이용해서 연결을 지향한다. 그 외에도 vscode에서 직접 작업을 하기도 하지만 대부분 저 두 가지 방법을 사용해서 데이터 관리를 진행한다.

그림 7. compass 연결

.env 파일 내에 mongodb atlas에 연결할 url 값을 넣고, compass 내부에도 같은 연결을 진행한다. 그러면 데이터 베이스 내부를 조작할 차례는 끝났다고 볼 수 있다. 불러올 때마다 저장이 되는 데이터 형태를 관찰하고, 새로 들어온 데이터만 비동기적으로 데이터베이스 내부에 쌓이는 형태로 하면 될 듯 하다. 

그 외 크롤링을 하는 과정에서 확장적인 방안을 생각해보면 새로운 데이터가 나오면 사용자들에게 새로운 데이터에 대해서 알림을 해주는 역할로 확장이 가능하다.