IT 방랑기

2. 일렉트론(node)에서 웹 페이지 크롤링 하기 1. 왜 일렉트론에서? 굳이 크롤링을 서버 프로그램처럼 돌릴 필요가 있을까에서 시작되었다. 사용자가 편하게 필요한 내용을 크롤링하는 것. 굳이 서버에 요청하지 않아도 손쉽게 크롤링 결과를 얻을 수 있다는 점이 일렉트론과 크롤러를 합치는 이유가 아닐까 싶다. 2. 예제 코드 예제 코드에 앞서 크롤링에는 axios와 cheerio를 사용했으며, 둘 다 npm install axios cherrio --save 명령으로 설치해주면 된다. const { app } = require('electron'); const axios = require('axios'); const cheerio = require('cheerio'); app.on('ready', ()=>..

1. Electron 설치 및 간단한 예제 (1) npm init 일렉트론 예제 코드를 실행할 디렉터리로 가서 npm 설정을 초기화 해준다. npm init을 실행하여 기본적인 프로젝트 정보를 입력하면 된다. 이후에 scripts 항목에 일렉트론 실행을 위해서 "start" : "electron ." 을 추가해주자. (2) Electron 설치 npm을 이용하여 electron을 설치해준다. 개인적으로 로컬에 설치하는 것을 선호해서 npm install electron --save으로 했다. (3) 예제 (1)에서 추가한 명령어를 통해 npm start 명령으로 실행할 수 있다. 이때 electron이 전달받은 매개변수에 스크립트가 따로 없으면 해당 위치의 main.js를 자동으로 실행한다. 따라서 ma..

티스토리 글 하단 카카오 공유 버튼 만들기 1. 하단에 고정된 공유 버튼이 필요한 이유 위 그림과 같이 하단 공유 버튼을 만들면 사람들이 쉽고 간편하게 내 글을 공유할 수 있다. 페이지 스크롤링을 하더라도 하단에 부착되어 계속 따라다니는 공유 버튼을 만들어 본다. 2. 버튼 이미지 파일 구하기 버튼에 사용될 이미지를 구한다. 만약 자신이 추가적으로 더 많은 링크를 넣고 싶다면 해당 이미지를 준비하자. 내가 사용한 이미지는 아래와 같다. 3. 이미지 파일을 서버에 올리기 티스토리라면, 관리 페이지 -> 꾸미기 -> 스킨편집 -> html 편집으로 접근하면 되고, 만약 워드프레스와 같은 설치형이라면 이미지를 서버에 올리면 된다. 기타 블로그라면 각 블로그에서 제공하는 이미지 업로드 기능을 사용하자. 티스토리..

1. HTML에서 Javascript만으로 IP 주소 얻기 HTML에서 IP주소를 확인하기 위한 방법으로 대부분 사람들이 Java script를 이용하려고 한다. 단도직입적으로 HTML내에서 Javascript만으로 IP 주소를 얻을 수 없다. 2. IP address를 구하는 방법 서버는 사용자의 요청(Request)을 받을 때 TCP 또는 UDP 헤더를 보고 IP 주소를 알 수 있다. 즉, IP 주소를 얻기 위해서는 서버단에서 처리를하여 값을 되돌려 주어야 한다. 따라서 할 수 있는 방법으로 1. 서버를 구현한다. 2. API를 사용한다. 두개로 좁힐 수 있다. (1) 서버를 구현하는 방법 많은 사람들이 사용하는 Node.js나 php를 이용한다면, 많은 소스코드가 인터넷 상에 존재한다. 애초에 이런..

IP 주소를 이용하여, Geolocation 정보를 얻을 수 있다. 여기서 Geolocation은 위도와 경도 (Latitude, Longitude)를 뜻한다. 여기서 얻어지는 위도와 경도값은 굉장히 부정확하다. 그 이유는 ISP(인터넷 공급자)가 제공한 데이터를 이용하기 때문이다. 따라서 현재 위치는 서울이지만 조회 결과가 경기도로 나타날 수도 있다. 이 1. IP 주소 얻기 현재 자신의 위치 정보를 얻는 방법은 [JS] HTML에서 JS를 이용하여 IP 주소 얻기를 참조하자. 2. Geolocation API 설명 여기서 사용할 API는 ip-api.com가 제공한다. 이 사이트는 별도의 회원가입이나, 키발급 없이 바로 조회를 할 수 있다. 다만 분당 150회의 제한이 있으니 확인하기 바란다. 또한 ..

1. HTML 주석 지우기 자바 스크립트로 HTML 엘리먼트의 값을 받아 올 때, HTML 주석이 같이 들어있는 경우가 있다. 이때 HTML의 주석을 정규식을 이용하여 효과적으로 제거한다. function rmComment(str){ return Number(str.replace(/(]+)>)/ig, "").replace(/,/ig, "")); } 2. 숫자 comma 넣기 자바 스크립트로 숫자를 입력할 때, 1000단위에서 comma를 넣어주는 경우를 정규식을 이용하여 수행한다. function commify(n) { var reg = /(^[+-]?\d+)(\d{3})/; n += ''; while (reg.test(n)) n = n.replace(reg, '$1' + ',' + '$2'); retu..

CORS 이슈 Access-Control-Allow-Origin 문제 해결하기 CORS 크로스 도메인 이슈 AJAX를 이용하여, 다른 API의 데이터를 가져오려고 할 때, 갑자기 나타나는 에러이다. 정확한 원인은 알아보지 않아 잘 모르겠지만, 아무튼 같은 URL에서만 호출을 하도록 강제하는 정책이다. 아마도 브라우저 단에서 처리하는 것 같다. 해결 방법 아무튼 그런건 모르겠고, 해결방법은 여러가지가 있다. 1) 브라우저의 옵션으로 처리하기 2) 크롬 플러그인을 설치하기 3) 트릭 사실 1~2번 방법이 의미가 없는게, 웹 서버 사용자에게 ActiveX처럼 설치하라고 강요할 수 없기 때문. 아무튼 해결 방법은 이렇게 하면 된다. !!! JQUERY는 필수, 아직 시간이 없어서 JS만으로 처리하는 방법을 안찾..

구글 맵을 이용하여, 주소를 Geolocation(위도, 경도)로 바꾸기 웹 개발을 하다보면, 지도에 위치를 찍어야할 때가 있다. 그런데 이 주소라는게 사람마다 쓰는 방식이 제각각이다. 예를 들어 서울특별시가 표준이지만 서울시로 쓴다던지, 어떤 사람들은 아예 상세 주소를 쓰지않는 경우가 있다. 이런 문제를 한방에 해결해주는게 Geolocation인데, 사실 문제는 주소를 어떻게 Geolocation으로 바꾸는지 사실 그것도 문 제다. 그리고 주소를 바꾸는 과정에서 가장 유사한 위치 정보를 autocomplete (자동완성)해주는 기능도 있으면 더 좋지 않을까? 이런 문제를 해결하는데 구글 맵이 최고다. 구글 맵에서는 다양한 기능을 제공하는데 그중 위치(Place) 라이브러리를 이용하면, 손쉽게 해결할 수..

Javascript에서 Associative array는 C++의 map이나 Python의 dictionary와 같은 데이터 타입이다. Javascript의 Array의 경우 손쉽게 prototype에 정의된 sort를 사용할 수 있으나, Associative array의 경우 사용자 정의 데이터 타입에 가깝기 때문에 Compare 함수를 만들어 줘야한다. Associative array가 key : value 타입으로 정의되어 있다면, 아래와 같이 만들면 된다. function aasort(arr){ var tuples = []; for (var key in arr) tuples.push([key, arr[key]]); tuples.sort(function(a, b) { a = a[1]; b = b[1..

jQuery에서 동일한 DOM의 반복적인 selector를 사용을 방지하기 위해서나, K-V 형식으로 데이터를 저장할때 Object를 많이 사용한다. 이런 Object안에서 전체 Key를 찾아 순회할 때, Object.keys(obj)형식을 많이 사용한다. 특히, Object.keys(obj).forEach(function(k,v){})를 이용하여 Loop 문까지 한번에 처리하는 경우가 많은데, 여기서 Callback을 사용하는 경우 callback 호출후에도 루프가 Break되지 않는 문제가 생긴다. var obj = { 'abc':1 , 'bcd':2'}; function run(obj, callback){ Object.keys(obj).forEach(function(k,v){ if(k == 'abc..