ㅐ 웹사이트 분석! MEAN Stack과

PhantomJS 알면 끝!

정인호

Document(JSON)기반의 NoSQL 데이터베이스

Node.js 기반의 웹어플리케이션 프레임워크

클라이언트 기반의 웹어플리케이션 MV* 프레임워크(양방향 데이터 바인딩)

Javascript V8 엔진 기반의 개발 플랫폼

mongoose

Front-End Back-End

{

name : ‘nodejs’,

value : ‘http://www.nodejs.org’

}

Request db. find

PhantomJS

웹브라우저 렌더링 엔진인 Webkit을 내장하고 있는 Headless 브라우저

화면 없이 Javascript API를 통해 웹페이지 컨트롤

PhantomJS Screen Capture

Network Monitoring

Website Testing

Page Automation

PhantomJS

CasperJS

JSDom

Zombie.js

cheerio

SlimerJS

PhantomJS

웹사이트 분석! 뭐하게???

웹접근성 진단

웹페이지 성능 측정

웹페이지 테스트

데이터 수집

웹페이지 유형 분석

웹접근성 진단

웹페이지 성능 측정

웹페이지 테스트

데이터 수집

웹페이지 유형 분석

그렇다면 우리는 어떻게 활용하고

있지?

유형 분석

스크린캡쳐

데이터 수집

접근성 진단

mongoose

PhantomJS

Request

문제는 없었나?

PhantomJS

헉! 느리다 자꾸 Phantom Process ID가 겹친다!

PhantomJS

Child_process 직접 call 하자!

PhantomJS

1번의 Request로 대략 1200개의 URL을 PhantomJS 수행한다면

PhantomJS

헉! 캡쳐이미지 생성이 느리다! 진단 후 이미지 바로 사용이 안되네!

PhantomJS

이미지를 base64 code로 사용

PhantomJS

PhantomJS

웹브라우저에서 로그인하는 것처럼 로그인 하면 안되나?

PhantomJS

PhantomJS

반응형 웹! 화면 사이즈마다 진단해야되는데…

PhantomJS

PhantomJS

감사합니다 http://nuli.navercorp.com