Node.js 와 puppetter를 이용한 네이버 쇼핑 매크로 만들기 #1

Puppeteer 로 네이버 쇼핑 매크로 만들기

네이버 쇼핑 매크로를 만들어 보자.

구글 크롬 브라우저의 헤드리스 버전인 Puppeteer를 이용하여 네이버 쇼핑 매크로를 만드는 과정을 공유해 보려 합니다. 네이버 쇼핑 매크로의 동작은 단순합니다. 네이버에 자동으로 로그인해서 원하는 상품 판매 페이지로 이동하여 재고 확인 후 상품 주문창으로 이동합니다. 결제수단을 선택하고 주문을 완료하는 것 까지가 매크로의 동작입니다. 

 

1. 네이버 로그인
2. 상품 상세페이지 이동
3. 재고확인 후 구매하기 클릭
4. 결제수단 지정 후 결제하기

네이버 쇼핑 매크로. 결제 성공할때까지 무한 반복이 핵심

Puppeteer

Puppeteer는 Node.js 환경에서 구동되는 백그라운드 작업용 크롬 브라우저 API입니다. 일반 브라우저와 다른 점은 화면을 제공하지 않고 프로그램 API로 동작을 제어할 수 있다는 점입니다. Puppeteer를 이용하면 웹상에서 정보를 수집하는 크롤링 작업이나 사이트에 접속해서 수행해야 할 작업들을 자동화할 수 있습니다. 네이버 쇼핑 매크로도 그러한 자동화 작업의 한 예라고 보면 될 것 같습니다.

 

Puppeteer 는 크롬을 제어할 수 있는 고수준 API 를 제공하는 Node 라이브러리 이다.

Node.js 설치

Node.js 는 구글 크롬 브라우저에 탑재된 자바스크립트 엔진인 V8 기반의 자바스크립트 런타임 입니다. Node.js 덕분에 서버사이드 프로그램을 자바스크립트를 이용하여 개발할 수 있게 되었습니다. 오해를 할 수 있는 것이 Node.js 는 Apache 같은 웹서버가 전혀 아닙니다. 단지 브라우저에서만 동작하던 자바스크립트로 작성된 프로그램을 브라우저 외부에서 구동시켜주는 실행 엔진이라고 생각하시면 편합니다.

자바스크립트 런타임 엔진 Node.js

 

아직 Node.js 설치가 안되어 있다면 https://nodejs.org/kn 사이트에서 현재 사용중인 운영체제에 맞는 설치 파일을 다운로드하여 설치해 주세요. 설치 과정은 딱히 설명해 드릴 만한 부분이 없습니다. 설치가 완료되면 커맨드 창을 열어서 node -v 명령으로 Node.js 가 정상적으로 설치되었는지 확인합니다. node -v 명령은 현재 설치되어 있는 Node.js 의 버전 정보를 출력합니다.

 

$ node -v

v12.16.1

 

Node.js를 이용한 Hello World

커맨드 창에서 node를 입력하면 자바스크립트 명령을 실행해 볼 수 있는 콘솔 인터프리터가 실행됩니다. 이 창에서 아래 명령어를 입력하고 엔터를 키인 하면 Hello World 가 출력됩니다.

 

console.log('Hello World')

 

$ node
Welcome to Node.js v12.16.1.
Type ".help" for more information.

> console.log('Hello World')

 

node 명령으로 자바스크립트 파일을 직접 실행해 볼 수 있습니다. 메모장같은 텍스트 에디터로 아래 자바스크립트를 입력 후 index.js라는 파일로 저장합니다.

 

/* index.js */

console.log('Hello World')

 

커맨드 창에서 node index.js 를 입력하면 콘솔에 Hello World 가 출력됩니다.

 

$ node index.js
Hello World

 

위 예에서 보듯이 Node.js 는 자바스크립트를 실행시켜주는 런타임 엔진입니다. Node.js는 비동기 I/O 등 다양한 장점이 있어 서버사이드 애플리케이션 개발에 적합한 특징들을 가지고 있지만 기본적으로는 자바스크립트를 실행시켜주는 엔진이다라는 점막 기억하셔도 좋습니다.

npm(Node Package Manager)

npm은 Node.js 로 개발한 모듈(패키지)을 관리하는 패키지 매니저입니다. Node.js로 개발한 모듈을 npm 저장소에 공유할 수 있고 또 필요한 모듈을 npm 저장소에서 다운로드하여 사용할 수 있습니다. npm은 패키지 관리를 위해 모든 설정을 package.json 파일을 사용하여 관리합니다. Maven에서의 pom.xml 파일과 유사하다고 보면 될 것 같습니다.

 

npm에서 관리된고 있는 Node.js 패키지 수는 2020년 7월 현재 무려 130만 개가 넘었습니다. Maven Central의 모듈 수가 34만 개에 불과한 것을 보면 NPM은 단순히 패키지 리파지토리를 넘어서는 Node.js 기반의 오픈소스 에코 시스템을 유지하는 허브로 동작하고 있다고 보입니다. 참고로 2020년 3월 NPM 은 마이크로소프트에 인수되었습니다.

Node.js 가 오픈소스 생태계를 집어삼켰다

마이크로소프트는 이제 Github과 npm 을 다 가졌다.

NPM 은 별도의 설치가 필요 없고 Node.js 설치 시 함께 설치됩니다. 커맨드 창에서 npm -v 명령을 실행하여 현재 설치된 NPM 버전을 확인해 봅니다. 

 

$ npm -v

6.13.4

Node.js 신규 프로젝트 생성

프로젝트 작업폴더를 생성 후 커맨드 창에서 npm init -y 명령을 실행하여 Node.js 프로젝트를 신규로 생성합니다. 작업 폴더의 이름을 프로젝트명으로 하는 package.json 파일이 생성됩니다.

 

$ npm init -y
Wrote to /naver-shopping-macro/chapter1/package.json:

{
  "name": "chapter1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

 

Puppeteer 3.x 패키지 설치

이제 npm install 명령으로 프로젝트에 필요한 puppeteer 모듈을 설치합니다. 매크로 작업에는 puppeteer 외에 다른 Node.js 모듈에 대한 의존성은 필요하지 않습니다. package.json 파일이 존재하는 프로젝트 디렉터리에서 아래 커맨드를 입력하여 puppeteer 3.x 버전을 설치합니다.

 

$ npm i puppeteer@3

 

Windows 환경이라면 반드시 명령 프롬프트(cmd) 에서 puppeteer를 설치해야 합니다. Ubuntu 콘솔이나 PowerShell을 사용하여 puppeteer를 설치할 경우 정상적으로 크롬이 실행되지 않을 수 있습니다. 

 

puppeteer 설치가 완료되면 package.json 파일에 해당 의존성이 삽입된 것을 볼 수 있습니다.

 

  "dependencies": {
    "puppeteer": "^3.3.0"
  }

 

2020년 7월 현재 Puppeteer 의 최신 버전은 5.2.1입니다. 3.3.0 버전을 설치한 이유는 향후 구글 클라우드나 AWS 서버리스로 매크로 구동 시 혹시라도 모를 호환성 문제 때문입니다.

Puppeteer로 Naver 접속

프로젝트 폴더에 index.js 파일을 생성하여 아래 코드를 입력합니다. Puppeteer를 이용하여 크롬 브라우저를 오픈한 후에 네이버 사이트로 이동하는 코드입니다.

 

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.goto('https://www.naver.com');
})();

 

터미널이나 명령 프롬프트에서 Node.js 를 이용하여 index.js를 실행합니다. 크롬 브라우저가 실행되고 새 탭을 열어 Naver에 접속된 화면이 보이면 성공입니다. 브라우저를 종료하면 프로그램은 종료됩니다.

 

$ node index.js

 

크로미움으로 naver.com 에 접속하면 성공

require('puppeteer')

NPM 으로 설치한 Puppeteer 모듈을 사용하기 위해서 Node.js의  require 구문을 사용합니다. require 문은 NPM 으로 설치된 의존성 패키지를 검색하여 해당 패키지를 현재 자바스크립트 파일에서 사용 가능하도록 합니다.

 

const puppeteer = require('puppeteer');

puppeteer.launch

Puppeteer의 launch 메서드는 크롬(사실은 Chromium이지만 크롬이라 부르기로 함) 브라우저를 실행합니다. 이때 실행 옵션을 파라미터로 지정할 수 있습니다. 위 예제에서는 {headless: false} 옵션을 주었습니다. headless 옵션은 크롬 실행 시 헤드리스 모드(백그라운드로 실행되고 별도의 UI가 동작하지 않음)로 실행할지 여부입니다. headless 옵션을 주게 되면 브라우저 UI가 나오지 않아 정상 동작하는지 확인하기 어렵습니다. 매크로 개발 시에는 headless 옵션은 false로 지정하고 실제 운영 시에만 헤드리스 모드로 사용합니다.

 

const browser = await puppeteer.launch({headless: false});

page.goto

Page 오브젝트의 goto 메소드는 특정 URL 경로로 이동하는 메서드입니다. 크롬 브라우저 주소창에 URL 입력 후 엔터를 누른 것과 동일한 효과라고 볼 수 있습니다. 위 예제에서는 Naver 메인 페이지로 이동하도록 했습니다.

 

  const page = await browser.newPage();
  await page.goto('https://www.naver.com');

오늘은 여기까지

다음 포스트에서는 지정된 아이디/패스워드를 이용하여 네이버에 로그인하는 과정을 처리해 보겠습니다. 

 

다음시간에 만나요