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. 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만으로 처리하는 방법을 안찾..

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..

대부분의 웹 서비스 프레임워크에서 세션을 관리하는 기능을 제공한다. 이런 세션 기능들은 1번 로그인을 하면, 브라우저내의 어떤 탭에서도 로그인이 유지된다. 하지만 일부 프로젝트는 반드시 1계정 1세션 유지가 정책이 되어야 하는 경우도 있다. [세션의 정의와 세션 관리 기능이 동작하는 방법] 어떤 프레임워크를 사용하든지, 세션은 서버 기준의 1개의 일시적인 연결이다. 즉, 어떤 클라이언트가 접근하였을때 세션 ID를 만들고, 로그인시 클라이언트의 정보를 해당 세션 ID(Key)에 대한 값(Value)로 저장한다. 그리고 마지막으로 클라이언트 브라우저에게 해당 세션 ID(세션 ID, 세션 Key를 혼용하겠음)를 전달해주면서, 해당 세션키를 이후 모든 연결에 전달하라고 요구한다. 이 경우 브라우저는 이 세션키를..

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..