[Puppeteer] 퍼펫티어에서 크롬 확장프로그램 사용하기[Puppeteer] 퍼펫티어에서 크롬 확장프로그램 사용하기

Posted at 2019.04.30 16:59 | Posted in Node.js/Puppeteer




이전글: [Puppeteer] 퍼펫티어의 브라우저를 크롬으로 변경하기





필자는 프로젝트에서 사용할 크롤링 프로그램의 개발중 퍼펫티어에 대해서 알게 되었다.


개중 롬 확장프로그램을 통한 인증이 꼭 필요한 부분이 존재하였고.


이것때문에 많은 고생을 하였기에, 해당 포스팅을 찾아오신 분들은 그 부분을 손쉽게 넘어갈 수 있기를 바라는 마음에


퍼펫티어에서 롬 확장프로그램을 사용할 수 있는 방법을 정리하였다.







■ 크롬 확장프로그램의 설치 경로





크롬 웹스토어(https://chrome.google.com/webstore/category/extensions?hl=ko)에서 다운받은 크롬 확장프로그램들은


크롬에 로그인을 하지 않았을 경우를 기준으로


확장 프로그램은 Windows 10의 경우


C:\Users\사용자 폴더\AppData\Local\Google\Chrome\User Data\Default\Extensions\Default 경로에 설치된다.



맥(Mac OS X) or 리눅스(LINUX)등 다른 OS의 사용은 https://chromium.googlesource.com/chromium/src/+/master/docs/user_data_dir.md에서 확인할 수 있다.







위와같이 크롬 웹스토어에서 확장 프로그램을 한가지 설치해 보자.


이때 위 이미지처럼 자신의 크롬이 로그인된 상태인지 그렇지 않은지를 잘 확인해 둘 필요가 있다.


기본적으로 로그인을 하지 않은 상태라면 Default 폴더에 설치되지만


로그인을 한 사용자의 경우에는 Profile 임의로 주어지는 숫자 폴더에 설치되어 있을 것이다.









크롬 확장프로그램을 설치완료하고 설치된 폴더로 이동해 보자.









자신이 설치한 프로그램의 파일명을 확인하고 그안의 버전정보 까지의 경로가


이번 크롬 확장 프로그램까지 같이 샐행하는데 필요한 부분이다.
















■ 퍼펫티어에서 크롬 확장프로그램을 사용하기





이제 퍼펫티어를 이용하여 크롬 확장 프로그램을 사용해 보려 한다.


그렇지만 브라우저는 꼭 크롬을 사용할 필요는 없다.


크롬 확장프로그램의 사용이 가능한 크로미엄을 기반으로 하는 브라우저라고 하면


확장프로그램의 설치경로를 지정해 주는것만으로도 사용이 가능하기에


아래 예제는 기본 설치 모듈의 크로미움을 사용하였다.





# 소스 코드

 puppeteer_extensions.js

const puppeteer = require("puppeteer");


puppeteer.launch({

  headless : false


  // 크롬 확장프로그램의 정확하 설치경로만 알고 있다면

  // executablePath을 이용하여 꼭 크롬을 사용할 필요는 없다.

  // , executablePath : "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"


          // 크롬 확장프로그램을 한개 이상 사용하는경우 콤마( , )로 각 프로그램을 구분하여 작성하여 준다.

, args : [

  "--disable-extensions-except=C:/첫번째 크롬 확장프로그램 설치경로/,C:/두번째 크롬 확장프로그램 설치경로/"

, "--load-extension=C:/첫번째 크롬 확장프로그램 설치경로/,C:/두번째 크롬 확장프로그램 설치경로/"

]

}).then(async browser => {

const page = await browser.newPage();

await page.goto("https://www.naver.com/", { waitUntil : "networkidle2" } );

});





크롬 확장프로그램을 한개 이상 실행하게 될 경우


콤마( , )를 구분자로 사용하여 이어서 경로를 작성해 주면 함께 사용할 수 있다.





# 출력 결과




위 출력결과와 같이 설치한 크롬 확장 프로그램이 잘 나타나는 것을 확인 할 수 있다.





Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[Puppeteer] 퍼펫티어의 브라우저를 크롬으로 변경하기[Puppeteer] 퍼펫티어의 브라우저를 크롬으로 변경하기

Posted at 2019.04.29 11:33 | Posted in Node.js/Puppeteer




■ 크로미엄 기반의 브라우저를 퍼펫티어로 제어하기




퍼펫티어는 기본적으로 node 모듈 설치시 같이 설치된 chromium 브라우저를 기반으로 실행된다.





단순한 작업이라면 기본 설치된 크로미움만을 이용해도 문제가 없겠지만.


사용자 인증 과 플러그인 설치등 몇가지 이유로 크로미움만을 사용하는 것에는 한계가 있다.


다행이 퍼펫티어는 구글에서 제공하는 라이브러리 답게 크로미움과 크롬 브라우저의 엔진인 WebKit을 사용하는 


크로미엄을 기반으로 하는 모든 브라우저의 제어가 가능하다.





※ 크로미엄을 기반으로하는 브라우저 종류

브라우저

다운로드 사이트 URL

크롬

 https://www.google.com/intl/ko/chrome/

오페라

 https://www.opera.com/ko/

비발디

 https://vivaldi.com/

브레이브

 https://brave.com/fna497

웨일

 https://whale.naver.com/ko/

블리스크

 https://blisk.io/




TIP. 필자는 주력 브라우저로 파이어 폭스(FireFox)와 크롬(Chrome)을 사용중에 있다.

     그래서 위 예제를 사용하기 위해서는 반드시 사용중인 크롬을 반드시 종료시키고 진행을 해야 했다.

     테스트등 위 예제의 사용시에는 executablePath 실행 경로를 다른 WebKit 기반의 브라우저로 대체하여 작업을 하는것이

     여러모로 스트레스를 덜 받을 것이다.

     위의 필자가 정리한 브라우저들은 전부 필자가 설치하고 테스트 해본것이기에 원하는 부라우저를 다운받고 진행하는 것을 추천한다.





# 소스 코드

 puppeteer_chrome.js

const puppeteer = require("puppeteer");


function delay(timeout) {

  return new Promise((resolve) => {

    setTimeout(resolve, timeout);

  });

}


puppeteer.launch({

  headless : false

, devtools : false

  // 윈도우 크롬 자동 설치시 설치되는 경로

, executablePath : "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"

  // 윈도우 크롬 사용자 정보를 가지는 경로

, userDataDir : "C:/Users/사용자 계정/AppData/Local/Google/Chrome/User Data"

  // 실행될 브라우저의 화면 크기를 지정한다.

, defaultViewport : { width : 1920, height: 1080 }

, args : [ ]

}).then(async browser => {

const page = await browser.newPage();

await page.goto("https://mail.google.com/mail/u/0/#inbox", { waitUntil : "networkidle2" } );


await delay(5000);

await page.screenshot( { path : "Gmail_Login.png" } );

 

await browser.close();

});





# 노드 실행

C:> node puppeteer_chrome.js





# 출력결과① - 브라우저






# 출력결과② - 스크린샷 이미지 파일





위 이미지와 같이 로그인 절차를 생략하고 바로 G메일 계정에 접근한 것을 확인 할 수 있다.





이 포스팅에서 퍼펫티어이 브라우저를 크롬으로 변경하고, 사용자 계정의 로그인 값을 가져갈 수 있음을 확인했다.


그렇다면 좀더 이어서 크롬의 장점이기도한 확장 플러그인의 사용까지 알아보자.




다음글 : [Puppeteer] 퍼펫티어에서 크롬 확장프로그램 사용하기






Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[Puppeteer] 퍼펫티어를 이용한 CRAWLING 작업[Puppeteer] 퍼펫티어를 이용한 CRAWLING 작업

Posted at 2019.04.26 16:27 | Posted in Node.js/Puppeteer





■ 퍼펫티어를 이용한 크롤링 작업





필자가 노드를 처음 접하게된 이유는 급작스러운 크롤링 작업 때문이었다.


당시에는 PhantomJSCasperJS를 통해 작업을 진행 하였고,


왠만학 작업은 위 두개를 가지고 어떻게든 진행 할 수 있었지만.


점점 작업해야하는 프로젝트가 고도화 됨에 따라,


다른 Node.js와의 라이브러리 범용이 어려운 CasperJS의 한계를 느끼게 되었고


Puppeteer를 주로 사용하게 되었다.


Node.js를 통한 크롤링 작업을 준비중인 사람이라면,


그만 퍼펫티어를 더 활용하는것이 스트레스를 덜 받을 것이라고 생각한다.




# 소스 코드

 puppeteer_login.js

const puppeteer = require("puppeteer");


// 사용시 인위적인 딜레이를 주기위한 함수

function delay( timeout ) {

  return new Promise(( resolve ) => {

    setTimeout( resolve, timeout );

  });

}


puppeteer.launch({

  headless : false // 헤드리스모드의 사용여부를 묻는다.

, devtools : true // 개발자 모드의 사용여부를 묻는다.

}).then(async browser => {


const page = await browser.newPage();

// 로그인할 티스토리 블로그의 관리자 페이지를 지정

await page.goto( "http://magic.wickedmiso.com/manage/", { waitUntil : "networkidle2" } );

// 티스토리의 아이디와 암호를 입력한다.

await page.type( "div.box_login > div.inp_text:nth-child(1) > input#loginId", "티스토리 아이디" );

await page.type( "div.box_login > div.inp_text:nth-child(2) > input#loginPw", "티스토리 패스워드" );



/* document.getElementByI로 직접 입력할 input BOX를 선택하여 작업하는 것도 가능하다.

await page.evaluate(() => {

document.getElementById( "div.box_login > div.inp_text:nth-child(1) > input#loginId" ).value = "티스토리 아이디";

                document.getElementById( "div.box_login > div.inp_text:nth-child(2) > input#loginPw" ).value = "티스토리 패스워드";

});

*/


await delay(3000);

        // 로그인 SUBMIT 기능

const elementHandle = await page.waitFor( "input" );

await elementHandle.press( "Enter" );

await delay(5000);

        /* 로그인이후 방문 기록 데이터를 콘솔에 띄워본다. */

const emToDay = await page.waitFor( "div.box_blog > dl.count_visitor:nth-child(1) > dd" );

        const txtToDay = await page.evaluate( emToDay => emToDay.textContent, emToDay );

        console.log("-. 오늘 방문자 수", txtToDay);

    

const emYesterDay = await page.waitFor( "div.box_blog > dl.count_visitor:nth-child(2) > dd" );

        const txtYesterDay = await page.evaluate( emYesterDay => emYesterDay.textContent, emYesterDay );

        console.log("-. 어제 방문자 수", txtYesterDay);


const emCumulativ = await page.waitFor( "div.box_blog > dl.count_visitor:nth-child(3) > dd" );

        const txtCumulativ = await page.evaluateemCumulativ => emCumulativ.textContentemCumulativ );

        console.log("-. 누적 방문자 수", txtCumulativ);

});





# 노드 실행

 C:> node puppeteer_login.js





# 출력 결과











Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[Puppeteer] 퍼펫티어 설치 및 설정하기[Puppeteer] 퍼펫티어 설치 및 설정하기

Posted at 2019.04.23 11:00 | Posted in Node.js/Puppeteer




GitHub : https://github.com/GoogleChrome/puppeteer

GitHub(API) : https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md

참고 : https://blog.outsider.ne.kr/1318

참고 : https://www.samsungsds.com/global/ko/support/insights/090717_RD_GitPuppeteer.html

API : https://pptr.dev/

NPM : https://www.npmjs.com/package/puppeteer

포스트 : SW개발자의 메카 깃허브와 주목받는 깃허브(GitHub) 트렌드 퍼펫티어(Puppeteer)






■ 헤드리스(Headless)란?





#01. 헤드리스란?



헤드리스 브라우저란 응용프로그램으로서 존재하는 파이어 폭스, 크롬, 익스플러, 사파리와 같이 실제로 존재하는 브라우저를 지칭하는 것이 아니라,


일반적인 CLI환경에서 브라우저가 사용자의 눈에 보여지지 않고, 백그라운드에서 작동하는 것을 말한다.


그러므로 헤드리스 브라우저라는 표현보단, 헤드리스 모드라고 하는것이 더 정확한 표현이라고 보아야 할것이다.





#02. 헤드리스 모드를 지원하는 브라우저



크롬(헤드리스 크롬), 파이어 폭스등은 헤드리스 모드를 지원하며


가장 널리 알려진 팬텀JS(Wabkit)등 아예 헤드리스 모드만을 위해 제작된 제품들도 존재한다.





#03. 헤드리스를 사용하는 이유



헤드리스 모드의 사용은 주로 자동화 목적을 가진다.







■ 퍼펫티어(Puppeteer)란?



퍼펫티어(Puppeteer)는 Headless Chrome을 쉽게 사용할 수 있도록 Google Chrome 팀에서 공개한 Node.js 라이브러리이다.

(퍼펫티어는 구글의 크롬(Chrome)에 헤드리스를 추가했다.)


퍼펫티어는 구글 크롬의 헤드리스 모드를 사용(크로미움 기반의 브라우저)하여 브라우저를 사용자에게 보여주지 않고, 백그라운드에서 작동할 수 있게 해준다.







■ 퍼펫티어 설치하기



 $ npm install puppeteer







■ Node.js로 퍼펫티어 실행하기




# 소스코드

 puppeteer_start.js

const puppeteer = require("puppeteer");


// puppeteer.executablePath()는 설치한 puppeteer 노드모듈의 번들로 제공되는 chromium 브라우저의 경로의 주소값을 가진다.

// 해당 예제는 puppeteer.launch를 통해 퍼펫티어를 실행할때 해당 경로의 값을 지정한다.

console.log(puppeteer.executablePath());



// 딜레이를 주기 위한 함수

function delay( timeout ) {

  return new Promise(( resolve ) => {

    setTimeoutresolvetimeout );

  });

}



puppeteer.launch({

         headless : false // 헤드리스모드의 사용여부를 묻는다

, devtools : false // 브라우저의 개발자 모드의 오픈 여부를 묻는다

, executablePathpuppeteer.executablePath() // 실행할 chromium 기반의 브라우저의 실행 경로를 지정한다.

, ignoreDefaultArgs : false // 배열이 주어진 경우 지정된 기본 인수를 필터링한다.(중요 : true사용금지)

, timeout : 30000 // 브라우저 인스턴스가 시작될 때까지 대기하는 시간(밀리 초)

, defaultViewport : { width : 800, height : 600 } // 실행될 브라우저의 화면 크기를 지정한다.

, args : [ "about:blank" ]

}).then(async browser => {

const page = await browser.newPage();

// 새탭을 열고 작업을 수행할 페이지를 지정한다.

await page.goto( "http://magic.wickedmiso.com/", { waitUntil : "networkidle2" } );

// 5초간딜레이를 준다.

await delay(5000);

// 스크린샷을 찍는다.

await page.screenshot( { path : "wickedBlog.png" } );

// 모든 작업을 수행하면 브라우저를 닫고 퍼펫티어를 종료한다.

await browser.close();

});





#01. puppeteer.launch 실행 옵션



puppeteer.launch( [ 옵션 ] )을 사용하여 퍼펫티어를 실행하여 브라우저를 제어어할 수 있다.



옵 션

기 본 값

설     명

 ignoreHTTPSErrors

false

 · 탐색중에 HTTPS 오류를 무시할것인지를 묻는다.

 headless

true

 · 번들로 제공되는 크로미움 브라우저를 실행할 것인지를 묻는다.

 · false로 실행을 하게되면 크로미움 브라우저가 보여지고 실행과정을 화면에서 확인 할 수 있다.

 devtools

false

 · 각 탭에 대해 개발자도구를 자동으로 열지 여부를 묻는다.

 · 사용할경우 headless : false로 설정해 주어야 한다.

 executablePath

Chromium

Broswer

 · 번들로 제공되는 크로미움이 아닌 다른 브라우저의 사용시 설정한다.

 · 사용할 실행 파일을 설정하면 설정한 크로미움 기반 여러 브라우저의 사용이 가능하다.

   (Chrome, Opera, Whale, Vivaldi, Brave 등)

 · 참고 : 작성중

 slowMo

0

 · 지정된 시간(ms : 밀리 초) 까지 퍼펫티어의 작업을 느리게 실행한다.

 · 무슨 일이 일어나고 있는지 확인 할 때 유용하다.

 defaultViewport

800 x 600

 · 각 페이지에 대해 일괄된 화면SIZE를 지정한다.

 · null을 지정하면 비활성화 된다.

 · 속성

  -. width : 페이지 너비(픽셀)

  -. height : 페이 높이(픽셀)

  -. deviceScaleFactor : 장치 배율 인수를 지정한다(dpr로 생각할 수 있음). (기본값 : 1)

  -. isMobile : meta viewport 태그가 고려되는지 여부를 묻는다.(기본값 : false)

  -. hasTouch : 터치 이벤트를 지원하는지 여부를 묻는다. (기본값 : false)

  -. isLandscape : 가로 모드인지 여부를 묻는다. (기본값 : false)

 ignoreDefaultArgs

false 

 · 배열이 주어진 경우 지정된 인수를 필터링 한다.

 · 특별한 상황이 아닌이상 변경하지 말고 false 기본값을 사용하자(true 변경 금지)

 handleSIGINT

true

 · 브라우저에서 Ctrl + C 버튼을 클릭하여 프로세스를 종료시킬 수 있다.

 handleSIGTERM

true

 · 실행한 터미널에서 Ctrl + C 버튼을 클릭하여 프로세스를 종료시킬 수 있다.

 handleSIGHUP

true

 · 실행한 터미널에서 Ctrl + C 버튼을 클릭하여 프로세스를 종료시킬 수 있다.

 timeout

30000

 · 브라우저 인스턴스가 시작될 때까지 대기하는 최대 시간(ms : 밀리 초)를 지정한다.

 · 0을 지정하여 시간 제한을 해제 할 수 있다.

 dumpio

false

 · 브라우저 프로세스의 로그를 stdout 및 stderr을 process.stdout 및 process.stderr

   (구글 번역 내용을 적었다. 프로세스의 실행 로그 관리로 추정되는데, 좀더 확인이 필요할듯)

 userDataDir

-

 · 사용자 디렉토리의 경로를 지정한다.

 · 경로를 지정하면 크롬 브라우저의 사용자 접속정보를 그대로 가지고 퍼펫티어가 실행되므로

  로그인등의 인증절차가 필요한 경우 유용하게 사용할 수 있다.

 · 참고 : https://chromium.googlesource.com/chromium/src/+/master/docs/user_data_dir.md

 env

process.env

 · 브라우저에서 볼 수 있는 환경 변수를 지정 

 pipe

false

 · 웹 소켓대신 파이프를 통해 브라우저에 연결한다.

  (구글 번역 내용을 적었다. 프로세스의 실행 로그 관리로 추정되는데, 좀더 확인이 필요할듯)

 args

-

 · 브라우저 인스턴스에 전달할 추가 인수의 목록

 · 크롬 플래그 목록 참고 : https://peter.sh/experiments/chromium-command-line-switches/






#02. page.goto 이벤트 waitUntil 속성



※ waitUntil : 페이지를 호출하고 작업을 진행할 시점을 결정한다.


옵 션

설   명

 load

 · load 이벤트가 시작되면 탐색이 완료되는 것으로 간주한다.

 docntentload

 · HTML 문서가 완전히 로드 및 파싱되었을 경우(DOMContentLoaded 이벤트) 탐색이 완료되는 것으로 간주한다.

 networkidle0

 · 최소한 500ms 동안 네트워크 연결이 0개 이상 없을때 탐색이 완료되는 것으로 간주한다. 

 networkidle2

 · 최소한 500ms 동안 두 개 이상의 네트워 연결이 없을 때 탐색이 완료되는 것으로 간주한다.





# 출력결과① - 브라우저





# 출력결과② - 스크린샷 이미지 파일








Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[Ubuntu] CURL 설치하기[Ubuntu] CURL 설치하기

Posted at 2019.04.23 10:47 | Posted in Linux/Ubuntu




참고 : https://zetawiki.com/wiki/우분투_curl_설치

참고 : https://www.lesstif.com/pages/viewpage.action?pageId=14745703




■ 우분투에 CURL 설치하기




-. curlcommand linedata transfer tool 이다.

-. DOWNLOAD / UPLOAD 모두 가능하다.

-. HTTP / HTTPS / FTP / LDAP / SCP / TELNET / SMTP / POP3 등 주요 프로토콜을 지원한다.

-. LINUX / UNIX 계열 및 Windows 등 주요한 OS에서 구동되므로 여러 플랫폼과 OS에서 유용하게 사용할 수 있다.

-. libcurl 이라는 C 기반의 library가 제공되므로 C / C++ 프로 그램 개발시 위의 protocol과 연계가 필요하다면 libcurl을 손쉽게 연계할 수 있다.

-. libcurlPHP, RUBY, PERL 및 여러 언어에 바인딩 되어 있으므로 사용하는 언어나 개발 환경에 맞게 libcurl을 사용할 수 있다.



우분투에 curl을 설치해 보자.



 $ sudo apt-get install -y curl




설치가 완료되었다면 아래와 같이 설치된 버전을 확인 함으로서


정상적으로 설치되었는지 살펴보자.



 curl --version








Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] 정규 표현식을 사용한 데이터 변환[JavaScript] 정규 표현식을 사용한 데이터 변환

Posted at 2019.04.16 15:36 | Posted in JavaScript & jQuery/JavaScript






■ 정규 표현식이란?




정규 표현식(regular expression)이란, 문자열의 패턴을 표현하는 표기 방법으로 문자열의 검색과 치환에 유용하다.


문자열의 패턴을 메타 문자(미리 약속된 특별기호)를 조합하여 표현함으로써 문자를 검색하거나 치환할 수 있다.


대부분의 프로그래밍 언어에서 정규 표현식을 지원하며, 자바스크립트에도 표준 기능으로 탑재되어 있다.




정규 표현식은 씹으면 씹을수로 맛이나는 오징어처럼 쓰면 쓸수록 그 유용함을 깨닫게 된다.


또한, 문자열을 효과적으로 다루기 위해 반드시 터득해야 되는 기술 중 하나이다. 


그러면 정규 표현식의 기본 문법과 자바스크립트에서의 사용법을 알아보자.











■ 자바스크립트에서의 정규 표현식 사용법





자바스크립트에서는 소스 코드 중에 '/패턴/'으로 정규표현식 객체를 생성할 수 있다. 이를 정규 표현식 리터럴이라고 한다.


 var re = /value=\d+/



혹은 RegExp 객체를 생성하여 사용할 수도 있다.



 var re = new RegExp("value=\d+"); 



정규 표현식 리터럴을 사용하면 스크립트가 로드되는 시점에서 정규 표현식이 컴파일되므로 성능에 유리하다.


한편 RegExp 객체를 사용하면 문자열 변수로 정규 표현식 패턴을 지정할 수 있어 동적으로 정규 표현식을 다룰 수 있게 된다.








#01. 정규 표현식 메소드



자바스크립트에는 정규 표현식과 관련하여 다음과 같은 메소드가 준비되어 있다.



 ▼ JavaScript의 정규 표현식 메서드 일람

메서

설  명

 .exec( )

 · 문자열 중에서 일치하는 부분을 검색하여 결과를 배열로 반환한다.

 · 검색에 실패한 경우 null을 반환한다.

 .test( )

 · 문자열 중에서 일치하는 부분이 있는지를 테스트한다.

 · true / false 중 하나를 반환한다.

 · RegExp의 메서드

 .match( )

 · 문자열 중에서 일치하는 것을 검색하여 결과를 배열로 반환한다.

 · 일치하는 패턴이 없는경우 null을 반환한다.

 · String의 메서드

 .search( )

 · 문자열 중에서 일치하는 것이 있는지를 테스트한다.

 · 일치하는 패턴이 없는경우 -1을 반환한다.

 · String의 메서드

 .replace( )

 · 문자열 중에서 일치하는 것을 찾아서 다른 문자열로 치환한다.

 .split( )

 · 문자열을 정규 표현식으로 분할하여 부분 문자열의 배열을 반환한다.



기능이 비슷해 보이는 메서드들이 있는데 다음과 같이 용도에 따라 나눠 생각하면 된다.


어떤 문자열 안에 정규 표현식 패턴이 있는지 확인만 하고 싶을 때는 test( ) 또는 search( )를 사용한다.


더 자세한 정보를 알고 싶을 때에는 exec( ) 혹은 match( )를 사용한다.






#02. RegExp.exec( ) 메서드




RegExp.exec( ) 메서드는 정규 표현식에 해당하는 문자열을 검색하여 패턴이 존재하면


문자열의 배열을 반환함과 동시에 RegExp 객체의 속성을 업데이트하고, 일치하는 패턴이 없으면 null을 반환한다.




결과로 반환되는 배열에는 정규 표현식에 일치하는 문자열이 첫 번째 요소에 담겨 있고,


이어서 정규 표현식 중 괄호로 묶인 부분에 해당하는 부분 문자열이 차례로 담겨 있다.


또한, 이 배열에는 속성으로 정규식에 해당하는 문자열의 인덱스 정보와 입력받은 문자열 값을 포함하고 있다.


<html>

<head>

<title>:: RegExp.exec() 메서드 ::</title>

<script type="text/javascript">

document.addEventListener("DOMContentLoaded", function() {

// 정규 표현으로 수치 + 영소문자 패턴

var re = /([0-9]+)([a-z]+)/g; // 정규 표현식 객체를 리터럴로 만들어서 변수 str에 대입

// [ ]괄호가 2번 사용되었는데 각각 부분 패턴을 의미한다.

// 대상 문자열

var str = "111jpy,8usd,xxx"; // 정규 표현식으로 확인하고 싶은 문자열을 변수 str에 대입

// 1회 실행

console.log(re.exec(str));

// 2회 실행

console.log(re.exec(str));

// 3회 실행

console.log(re.exec(str));

});

</script>

</head>

</html> 



수행결과는 아래와 같다.







정규 표현식에 g플래그를 지정하면 문자열 안에 일치하는 모든 패턴을 포함하게 된다.


예제에서는 exec( )를 여러 번 호출하며 일치하는 패턴을 차례로 출력하고 있다.


그런데 exec( ) 메서드는 test( )나 search( )에 비해 실행 속도가 느리므로 패턴의 존재 여부만을 확인하고 싶은 경우에는


사용을 권장하지 않는다.






#03. RegExp.test( ) 메서드



RegExp.test( ) 메서드는 인자로 주어진 문자열에 정규 표현식에 해당하는 문자열 패턴이 있는지 여부를 조사한다.


결과로 true나 false의 boolean 값을 반환한다.


<html>

<head>

<title>:: RegExp.exec() 메서드 ::</title>

<script type="text/javascript">

document.addEventListener("DOMContentLoaded", function() {

// 우편번호 nnn-nnn 패턴

var re = /^\d{3}-\d{3}$/;

// 정규표현식으로 패턴이 일치하는지 확인

console.log("123-123 : ", re.test("123-123"));

console.log("12-123 : ", re.test("12-123"));         // 숫자의 자릿수가 부족해 false

console.log("440-001 : ", re.test("440-001"));

console.log("aaa-bbb : ", re.test("aaa-bbb")); // 숫자가 아닌 알파벳으로 구성되어 있기때문에 false

});

</script>

</head>

</html> 



수행결과는 아래와 같다.









#04. String.match( ) 메서드



String 객체에 관련된 match( ) 메서드는 인자로 전달받은 정규 표현식 패턴을 조사한다.


정규표현식에 g 플래그를 포함하지 않은 경우는 RegExp.exec( ) 메서드와 같은 결과를 반환하지만.


g 플래그를 포함한 경우에는 일치하는 부분을 모두 포함한 배열을 반환한다.


일치하는 패턴이 없으면 null을 반환한다.


g 플래그 여부에 따른 결과의 차이를 유념해서 보도록 한다.



<html>

<head>

<title>:: String.match() 메서드 ::</title>

<script type="text/javascript">

document.addEventListener("DOMContentLoaded", function() {

// 대상 문자열

var str = "v=20, n=40, c=30";

// 숫자 패턴 검색

console.log("숫자 패턴 검색 : ", str.match(/[0-9]+/));

// 모든 숫자 패턴을 검색

console.log("모든 숫자 패턴 검색 : ", str.match(/[0-9]+/g));

// 변수 = 숫자의 조합을 검색

console.log("변수 = 숫자의 조합을 검색 : ", str.match(/\w+=\d+/g));

});

</script>

</head>

</html> 




수행결과는 아래와 같다.










#05. String.search( ) 메서드



대상 문자열에 정규 표현식에 해당하는 패턴이 있는지 확인할때 사용한다.


정규 표현식에 해당하는 패턴이 발견되면 발견된 인덱스를 돌려주고, 없으면 -1을 반환한다.


<html>

<head>

<title>:: String.search() 메서드 ::</title>

<script type="text/javascript">

document.addEventListener("DOMContentLoaded", function() {


// 대상 문자열

var str = "zip:999-999, mail:a@example.com";


// 우편번호 검색

console.log("우편번호 검색 : ", str.search(/\d{3}-\d{3}/));

// 이메일 검색

console.log("이메일 검색 : ", str.search(/\w+\@\w+\.\w+/));

// URL 검색

console.log("URL 검색 : ", str.search(/https?:\/\//));

});

</script>

</head>

</html> 




수행결과는 아래와 같다.









#06. String.replace( ) 메서드



정규 표현식으로 치환을 수행하는 replace( ) 메서드는 두 가지 형태의 사용법이 있다.



① 정규 표현식을 이용한 치환


 str.replace( 정규 표현식, 치환될 문자열 )



실제 코드를 통해 사용법을 파악하자.


<meta charset="utf-8">

<html>

<head>

<title>:: String.replace() 메서드 ::</title>

<script type="text/javascript">

document.addEventListener("DOMContentLoaded", function() {


// 대상 문자열

var str = "Today 10per OFF";

// 숫자를 30으로 치환

console.log("숫자를 30으로 치환 : ", str.replace(/\d+/, "30"));

// 숫자와 이어지는 영문 소문자까지 치환

console.log("숫자와 이어지는 영문 소문자까지 치환 : ", str.replace(/\d+[a-z]+/, "500won"));

// 알파벳을 전부 지우고 숫자만을 남긴다.

console.log("알파벳을 전부 지우고 숫자만을 남김 : ", str.replace(/[a-zA-Z]+/g, ""));

});

</script>

</head>

</html> 






치환될 문자열 내에 특수한 치환 패턴을 포함할 수 있다.



 ▼ 치환될 문자열에 사용되는 특수 기호

패턴

설   명

 $$

 · 문자 '$'를 삽입한다.

 $&

 · 매치된 부분 문자열을 삽입한다.

 $`

 · 매치된 부분 문자열 직전의 문자열을 삽입한다.

 $'

 · 매치된 부분 문자열 직후의 문자열을 삽입한다.

 $1$2$3…

 · 괄호로 묶인 부분 문자열을 삽입한다.



<html>

<head>

<title>:: String.replace() 메서드 ::</title>

<script type="text/javascript">

document.addEventListener("DOMContentLoaded", function() {


// 대상 문자열

var str = "Today 10per OFF";

// 숫자를 30으로 치환

console.log("숫자를 30으로 치환 : ", str.replace(/\d+/, "30"));

// 숫자와 이어지는 영문 소문자까지 치환

console.log("숫자와 이어지는 영문 소문자까지 치환 : ", str.replace(/\d+[a-z]+/, "500won"));

// 알파벳을 전부 지우고 숫자만을 남긴다.

console.log("알파벳을 전부 지우고 숫자만을 남김 : ", str.replace(/[a-zA-Z]+/g, ""));

});

</script>

</head>

</html>  






② 콜백함수를 사용하여 치환



콜백 함수를 사용하는 replace( ) 메서드의 사용법을 알아보자.



 str.replace( 정규표현식, 치환 함수 ) 



문자열 str안의 정규 표현식에 일치하는 문자열에 대해 치환 함수가 수행된다.


그러면 수행된 치환 함수의 반환 값으로 치환된다.


직접 프로그램으로 확인해 보자.


다음은 영어 단어의 소문자를 대문자로 치환하는 예이다.



<html>

<head>

<title>:: String.replace() 메서드 ::</title>

<script type="text/javascript">

document.addEventListener("DOMContentLoaded", function() {


// 대상 문자열

var str = "piano GUITAR";

// 대소문자를 소문자로 치환

var txtstr.replace(/[a-z]+/g, function(v) {

return v.toUpperCase();

});

document.getElementById("instrument").innerHTML = txt;

});

</script>

</head>

<body>

<h1 id="instrument"></h1>

</body>

</html>



위 프로그램을 실행하면 "PLANO GUITAR"라고 표시된다.






콜백 함수를 사용하면 단순한 치환이 아닌 복잡한 치환까지도 자유롭게 프로그래밍 할 수 있다.


아래 코드는 텍스트 중에서 숫자를 찾아서 세금에 해당하는 값에 8%를 더한 값으로 치환하는 프록램이다.




<html>

<head>

<title>:: String.replace() 메서드 ::</title>

<script type="text/javascript">

document.addEventListener("DOMContentLoaded", function() {


// 대상 문자열

var str = "price : 100 won";

// 금액에 해당하는 문자열을 찾아서, 세금 8%를 더하여 치환

var txt = str.replace(/\d+/, function(v) {

v = parseInt(v);

return Math.ceil(1.08 * v);

});

document.getElementById("price").innerHTML = txt;

});

</script>

</head>

<body>

<h1 id="price"></h1>

</body>

</html>  




프로그램을 실행하면 "price : 108 won"으로 표시된다.











Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[Node.js] node.js로 PDF 문서 생성하기[Node.js] node.js로 PDF 문서 생성하기

Posted at 2019.04.11 19:58 | Posted in 분류없음



참고 : 자바스크립트와 Node.js를 이용한 웹 크롤링 테크닉




■ PDFKit을 이용한 PDF문서 출력



node.js를 활용하여 PDF 문서를 출력해 보려고 한다.


PDFKit이라고 하는 라이브러리가 node.js 용으로 공개되어 있어 PDF를 쉽게 만들어 낼 수 있다.


npm을 사용하여 PDFKit을 설치한다.



 $ npm install pdfkit 

 



설치가 완료 되었다면 아래 코드와 같이 PDF 파일을 만들어 보도록 하자.



# 소스코드

 pdfkit-test.js

// 모듈로드

const pdfDocument = require('PDFKit');

const fs = require("fs");


// 도큐먼트 생성

let doc = new pdfDocument();


// 출력파일 지정

doc.pipe(fs.createWriteStream("output.pdf"));


// 폰트지정 - 나눔고딕 사용(한글폰트를 사용해야 한다.)

doc.font("NanumGothic.ttf");


// 문자표시 

doc.fontSize(30).text("Wicked_MISO", 90, 100);

doc.fontSize(20).text("사악미소", 100, 180);


// 도형 그리기

doc.save()

.moveTo(80, 80)

.lineTo(300, 80)

.lineTo(300, 150)

.lineTo(80, 150)

.lineTo(80, 80)

.stroke("#0000FF");


// 페이지 추가

doc.addPage();


// 도형 그리기

doc.save()

.moveTo(100, 150)

.lineTo(100, 250)

.lineTo(200, 250)

.fill("#FF0000");


// 종료

doc.end();



.fongSize( ) : 크기를 지정하고

.text( ) : 출력할 텍스트와 표시 위치를 지정한다

화면의 왼쪽 위 좌표가 (0, 0)이고 밑으로 내려갈 수록 수치가 높아진다.


메소드

의 미

 .moveTo(x, y)

 · 도형의 시작 좌표를 지정한다.

 .lineTo(x, y)

 · 이전 좌표에서(x, y)로 선을 긋는다.

 .stroke(color)

 · 지정한 좌표들에 선을 긋는다.

 .fill(color)

 · 지저안 좌표들을 칠한다. 





# 출력결과

 $ node pdfkit-test.js






■ PDFKit을 이용한 PDF문서 출력



# 소스코드

 pdfkit-graph.js

// 모듈로드

const pdfDocument = require("PDFKit");

const fs = require("fs");


// 그래프 데이터

var data = [

  { label:"트와이스", value:96 }

, { label:"레드벨벳", value:90 }

, { label:"블랙핑크", value:74 }

, { label:"여자친구", value:85 }

, { label:"러블리즈", value:93 }

, { label:"모모랜드", value:89 }

, { label:"아이즈원", value:69 }

, { label:"우주소녀", value:71 }

];


// 도큐먼트

var doc = new pdfDocument();

var page_w = doc.page.width;

var page_h = doc.page.height;


// 출력파일 설정

doc.pipe(fs.createWriteStream("output-graph.pdf"));


// 폰트 설정

doc.font("NanumGothic.ttf");


// 타이틀 표시

doc.fontSize(30).text("걸그룹", 20, 20);


// 그래프 그리기

var margin = 20;

var g_w = page_w - margin * 2 -50;

var g_x = margin + 50;

var y = 80;

var wpx = g_w / 100;


for(var i = 0; i < data.length; i++) {

var value = data[i].value;

var label = data[i].label;

doc.save()

.rect(g_x, y, wpx * value, 20)

.fill((i % 2) ? "blue" : "red");

doc.fontSize(10)

.fillColor("black")

.text(label, 30, y + 5)

.text(value, g_x + 5, y + 5);

y += 20 + 5;

}


// 편집종료

doc.end();




# 출력결과

 $ node pdfkit-graph.js



여기서는 doc.rect( ) 메소드를 사용하여 각 값의 막대 그래프를 그리고 있다.


PDFKit이 외에도 여러가지 도형을 그릴 수 있는 메소드가 준비되어있다.



메소드 이름

설명

 .rect(x, y, width, height)

 · 직사각형 그리기

 .roundRect(x, , width, height, conerRadius)

 · 모퉁이가 둥근 사각형 그리기

 .ellipse(cx, cy, radiusX, radiusY)

 · 타원 그리기

 .circle(cx, cy, radius)

 · 원 그리기

 .poygon(points...)

 · 다각형 그리기

 .path(pathData)

 · SVG의 path 지정하여 그리기







Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[Node.js] 일정 시간마다 실행되는 스케줄러[Node.js] 일정 시간마다 실행되는 스케줄러

Posted at 2019.04.10 11:39 | Posted in 분류없음

 

 

 

참고 : https://www.npmjs.com/package/node-schedule

 

 

 

■ 일정 시간마다 실행을 반복하는 node-schedule 모듈

 

 

Node.js의 외부모듈중 하나인  node-schedule를 사용하여

 

일정시간마다 실행되는 프로그램을 만들어 보려 한다.

$ npm install node-schedule
 

 

 

var schedule = require("node-schedule");
var num = 0;

schedule.scheduleJob({second:1}, function() {

console.log("10초에 한번씩 실행됩니다. : " + num);
num++;
});

 

 

 

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[Node.js] package.json과 npm i 명령[Node.js] package.json과 npm i 명령

Posted at 2019.04.02 12:24 | Posted in Node.js

 

 

node_module 파일 열면 package.json 파일이 존재한다.

 

해당 파일과 같거나 그 위의 경로에서

 

$ npm i

 

위와 가튼 명령을 입력하면

 

해당 node_module에는 존재하지 않지만

 

package.json 파일에 작성되어있는 module들이 일괄적으로 설치가 된다.

 

완성된 프로젝트를 배포하는 경우에 유용할듯

 

 

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기