7월, 2017의 게시물 표시

자바스크립트 문법 뜯어보기 - [1: 자바스크립트란?]

이미지
 이전 몇 개의 글을 통해서 제 블로그에 올라오는 글은 전부 자바스크립트라는 언어에 기초를 두고 있다는 것을 파악하실 수 있었을 것입니다. 결국 자바스크립트라는 언어를 알지 못하는 사람들에게는 좀 알아듣기 어렵고, 따라서 그걸 응용하기에도 어려움이 있습니다. 그래서 앞으로 몇 개의 글이 될지는 모르겠지만 자바스크립트라는 언어에 대해 차례차례 다뤄 보도록 하겠습니다.  그럼 첫 시간이니만큼 자바스크립트라는 언어가 어디에 쓰이는지와 자바스크립트의 기초에 대해서 설명해 보도록 하겠습니다. 자바스크립트는 원래 웹 브라우저에서 동작하던 언어로, 웹 브라우저의 스타일 속성(CSS)나 오브젝트들을 동적으로 제어하기 위해서 만들어진 언어였습니다. 웹이라는 울타리 안에서만 살아가던 자바스크립트를 웹 밖에서 사용할 수 있게 만들려는 여러 개발자들의 시도가 있었고, 구글에서 개발한 강력한 성능을 지닌 크롬 V8 엔진의 오픈소스화가 이루어지며 자바스크립트는 웹이라는 울타리 밖으로 넘어가 다양한 분야에서 쓰이기 시작했습니다. 자바스크립트의 사용 범위는 다음과 같습니다. Node.js를 이용한 서버 구축, 크롬 확장 프로그램 작성, Unity 언어 등등... 이렇듯 자바스크립트를 익히게 되면 정말 많은 분야에 활용할 수 있습니다.  이제 이렇게 다양한 범위에서 쓸 수 있는 자바스크립트를 천천히 다뤄봅시다. 자바스크립트를 실행하기 가장 좋은 환경은 웹 브라우저입니다. 텍스트 에디터(메모장 등등..)에 다음과 같은 코드를 쓰고 first.html이라고 저장해 주세요. <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>자바스크립트 연습</title>     <script>         alert("Hello w...

n봇 개발 이야기 - [2일차:카카오 API 뜯어보기]

이미지
대한민국에서 가장 많은 사람들이 사용하는 메신저 플랫폼은 무엇일까요? 바로 카카오톡입니다. 요즘 세대에서는 페이스북 메신저를 선호하는 경향도 많이 보이지만, 페이스북을 하지 않는 사람이 존재하는 상황에서는 카카오톡이 국내에선 아직까지는 페이스북 메신저를 압도하고 있다고 할 수 있습니다.  n봇을 개발하면서 느낀 점은, 대화형 봇의 최대 장점인 추가적인 애플리케이션 설치가 필요하지 않다는 것을 최대한 살릴 수 있는 메신저 플랫폼을 선택하는 것이 봇의 보급에 가장 중요하다는 것입니다. 그러한 이유로 n봇의 메신저 플랫폼으로 카카오톡을 선정하게 되었고, 카카오톡에서 제공하는 옐로아이디 기능을 이용해서 봇을 만들었습니다.(2017년 5월 24일 옐로아이디와 플러스친구가 통합됨) 카카오가 제공하는 API에 대해서 정확히 일아야 구현할 수 있는 기능을 알고 동작 원리를 정하겠죠? 그래서 이번 시간에는 플러스친구 API에 대해서 자세히 알아보겠습니다.   플러스친구 API 의 공식문서는 링크를 타고 들어가면 있습니다. 카카오톡의 자동응답 API는 Node.js의 http(s) restful api를 사용합니다. *Restful API란? (추후 링크 올릴 예정)  첫 번째로 알아볼 API는 Home keyboard API 입니다. Home keyboard API 는 스마트응답 기능을 실행하기 위해 가장 먼저 필요한 기능입니다. 공식 문서에 따르면 " 이용자가 최초로 채팅방에 들어올 때 기본으로 키보드 영역에 표시될 자동응답 명령어의 목록을 호출하는 API" 라고 합니다.  자세한 설명을 위해 공식 문서를 인용해 보겠습니다. Method : GET URL : http(s)://:your_server_url/keyboard Content-Type : application/json; charset=utf-8 Response : 키보드 영역에 표현될 버튼에 대한 정보. 생략시 text 타입이 선택된다. 예제 : { ...

CasperJs로 Pixabay 크롤러 만들기

이미지
  Pixabay, UnSplash.com, Flicker... 여러분들 모두 발표자료를 준비하면서 고퀄리티의 이미지를 구하기 위해 한 번쯤은 저 사이트에 들어가보셨을 겁니다. 여러분들은 저 사이트에서 다운받은 이미지들을 어떻게 관리하시나요? 혹시 한번 사용한 후 나중에 다시 그 이미지를 구하러 컴퓨터 이곳저곳을 헤집거나, 다시 다운받지 않으신가요? 혹은 여러 이미지들을 일일이 손으로 누르면서 다운받고는, 발표자료랑 어울리지 않는다는 느낌이 들어서 다시 다른 이미지를 다운받지 않으신가요?  저 같은 경우에는 그러한 일을 많이 겪었습니다. 그러던 어느 날, 재밌는 생각이 들었습니다.  '고양이'라는 검색어를 치면 나오는 이미지들을 컴퓨터에 체계적으로 다운받아서 정리해주는 프로그램을 만들면 어떨까? 그러면 처음 한 번 다운받아놓고 나중에는 골라서 쓰면 될텐데   라는 생각이죠. 생각이 떠오른 순간 Node.js로 크롤러를 만들어서 시험을 해봤습니다. 일이 거기서 끝났으면 정말 편했었을텐데요. 아쉽게도 Pixabay는 일반적인 방식으로 크롤링이 되는 사이트는 아니더군요. 그러나 여기서 포기하기에는 아직 멀었습니다. 우리에게는 웹 크롤링을 편리하게 해주는 CasperJs 라는 강력한 툴이 있기 때문이죠. *여기서 잠깐! CasperJs나 CSS 선택자 속성에 대해서 잘 모르시는 분들은 이전 포스팅인 PhantomJs로 Blogger 댓글 조회 프로그램 작성하기 나 PhantomJS와 CasperJS 를 읽고 와주세요.  먼저 크롤링이 가능한지 확인하기 위해서 저번 시간에 짰던 스크린샷을 찍는 코드를 이용해서 테스트를 해봤습니다.   네, 결과는 완벽했습니다. 크롤링이 가능했죠. 그럼 이제부터 본격적으로 코드를 짜기 시작했습니다. 가장 처음에 해야 할 일은 바로 이미지 하나하나의 CSS 선택자 속성을 찾는 것 입니다. 지난 시간에 썼던 방식을 그대로 사용하겠습니다. ...

n봇 개발 이야기 - [1일차:대화형 인터페이스에 눈을 뜨다]

이미지
 스마트폰 개발자가 사용자들에게 서비스를 제공해 줄 수 있는 방법이 점점 다양해지고 있습니다. 초창기에는 네이티브 앱, 중반기에는 웹 페이지를 애플리케이션처럼 꾸민 웹 앱, 이제는 대화형 인터페이스를 이용한 봇과 같은 개념이 등장하게 되었지요.  네이티브 앱은 스마트폰의 기능을 자유롭고 가장 최적화된 상태로 사용할 수 있지만, 스마트폰의 운영체제와 버전에 따라서 개발을 다시 해야하는 불편함이 있었습니다. 웹 앱은 스마트폰의 운영체제와 버전에 상관없이 개발할 수 있다는 장점이 있지만, 네이티브앱보다 최적화가 덜 된 경우가 많고, 스마트폰의 기능 사용에 제약이 좀 있습니다. 그리고 최근에 나오게 된 대화형 봇은 추가로 애플리케이션을 다운받을 필요가 없다는 점과 UI 디자인에 많이 신경을 쓸 필요가 없다는 장점이 있죠.  그러한 이유로 최근 봇 개발에 관심이 많아지게 되었는데, 봇으로 할 만한 재미있는 주제가 생갔났습니다. 바로 돈 정산입니다. 학교에서 선배들과 친구들이 놀러나가다 보면 돈을 쓸 일이 자주 생기는데, 주로 카톡방에 톡을 생성해서 자신이 쓴 돈을 올리고, 나중에 검색 기능으로 정산을 수동으로 하는 방식을 사용합니다. 그러나 돈이 많이 왔다갔다하거나 인원이 많아지면 그 작업이 어려워지는 단점이 있습니다. 그래서 저는 "카톡방에 쓴 돈을 올리면 나중에 자동으로 계산을 해주면 어떨까?" 라는 생각을 했고, 이걸 카카오톡의 옐로아이디를 이용해서 만들어보려고 했습니다.  그런 생각에서 n봇이라는 프로젝트가 출범하게 되었고, 지금부터 그 프로젝트의 진행과정과 동작 원리에 대해서 포스팅을 하겠습니다.

PhantomJs와 CasperJs

이미지
웹사이트를 돌아다니며 정보를 긁어오는 프로그램을 작성할 때는 여러 가지 고려할 요소가많습니다. 로그인을 한 후의 데이터를 얻거나 봇이 접근하기 어렵게 짜여져 있거나 웹페이지가 렌더링된 다음의 데이터를 얻어야 하는 경우들이 그 예이죠. 그런 상황들을 쉽게 컨트롤 할 수 있게 하는 몇 가지 도구들이 있는데 그것들이 바로 PhantomJs와 CasperJs입니다. PhantomJs는 화면이 없는 상태에서 커멘드 라인드로 사용하는 브라우저이고, CasperJs는 PhantomJs를 쉽게 쓸 수 있게 하는 라이브러리입니다. PhantomJs는 렌더링 엔진으로 WebKit엔진을 사용하는데, 이 말은 애플의 사파리 브라우저와 거의 동일한 환경이라는 뜻입니다. PhantomJs에서 할 수 있는 일에는 여러 가지가 있는데, 특정 URL로 접속했을 때의 스크린샷을 찍을 수도 있고 화면의 특정 엘리먼트를 마우스 클릭하는 이벤트를 실행할 수도 있습니다. PhantomJs의 공식 웹사이트는 다음과 같습니다. http://phantomjs.org/ CasperJs는 PhantomJs를 사용할 때 보다 쉽게 사용할 수 있도록 하는 라이브러리입니다. CasperJs의 공식 웹사이트는 다음과 같습니다. http://casperjs.org/ Node.js가 컴퓨터에 설치되어 있다고 가정하고 cmd를 켜서 다음의 명령을 입력합니다. npm install -g phantomjs npm install -g casperjs 이제 casperJs를 이용해서 간단한 화면 캡쳐 프로그램을 작성해 보겠습니다. var casper = require('casper').create();  //casper 객체를 생성합니다. casper.start(); casper.open('https://sidea510.blogspot.kr/');  //페이지를 엽니다. casper.then(function(){     casper.capture('sc...

PhantomJS로 Blogger댓글 조회 프로그램 작성하기

이미지
Jpub의 <자바스크립트와 Node.js를 이용한 웹 크롤링 테크닉>이란 책의 소스코드를 참고했습니다. 책을 읽던 중 티스토리 관리 페이지에 로그인해서 새 댓글을 확인하는 프로그램을 만드는 부분을 보게 되었습니다. 그러나 저는 티스토리 초대장이 없는 관계로 책의 소스를 응용해서 Blogger의 새 댓글을 확인하는 프로그램을 만들어 보았습니다. 우선 PhantomJS와 CasperJs를 컴퓨터에 설치해줍니다. npm install -g phantomjs npm install -g casperjs 이 프로그램을 만들 때 가장 먼저 해야하는 작업이 Blogger에 로그인하는 것입니다. 구글 계정으로 로그인되어있지 않은 상태로 다음 URL로 들어가게 되면 로그인 창이 뜨게 됩니다. https://accounts.google.com/ServiceLogin/identifier?hl=ko&passive=true&service=blogger&ltmpl=blogger&continue=https%3A%2F%2Fwww.blogger.com%2Fhome&flowName=GlifWebSignIn&flowEntry=AddSession 일단 우리의 목표는 저 입력창에 이메일을 입력하는 것입니다. 크롬 창에서 F12 를 눌러 개발자 모드를 켠 후, Ctrl+Shift+C 를 누르고 입력창을 가리키면 입력창의 CSS 선택자 속성이 뜨게 됩니다. 조사해 보니 이메일 input 태그의 name 속성은 identifierId  이고 form 태그의 선택자 속성은 form.RFjuSb.bxPAYd.k6Zj8d 입니다. 지금까지의 코드를 정리해 보겠습니다. var casper = require('casper').create({ verbose: true, loglevel: 'debug'}); var urlLogin = "구글 로그인 주소"; ...