All-round programmer

* 최근 SNS와 웹사이트를 연동하는 일들이 많아지면서, 많은 사이트들이 페이스북 로그인과 연동을 하고 있다. 페이스북에서 어떻게 로그인 연동을 해야 하는지 한번 알아보자. * 자바스크립트 SDK를 이용한 페이스북 로그인: 페이스북 앱들은 동작하는 장비나 프로젝트에 따라서 몇 가지의 로그인 단계를 거치게 된다. 이번에는 웹앱에서 로그인하는 단계를 한단계씩 알아볼 것이다. 여기서는 웹사이트인 경우 페이스북에서 추천하는 로그인 방식인 페이스북에서 제공하는 자바스크립트 SDK를 사용해서 페이스북 로그인을 할 것이다. 만약 자바스크립트 SDK를 사용하지 못하는 상황이라면 페이스북에서 제공하는 별도의 로그인 절차를 수동적으로 생성해야 할 것이다. * 빠른 시작: 일단 먼저 어떻게 구현해야 하는지 빠르게 훑어본 다..

* 옛날에 개발해뒀던 인스타그램에서 사진을 수집하는 크론이 갑자기 실행이 안되길래 원인을 분석해보니, 어느새부터인가 curl에 줘야하는 옵션이 바뀌었나보다. SSL 문제 이후에 보안을 더 신경 썼는지 curl을 실행하고나면 아래와 같은 오류가 나타났다. SSL certificate problem, verify that the CA cert is OK. Details: error:14090086:SSL routines:SSL3_GET_SERVER_CERTIFICATE:certificate verify failed : 이것을 해결하려면 간단하게 curl의 옵션을 추가하면 된다. curl_setopt ($ch, CURLOPT_SSL_VERIFYHOST, 0); curl_setopt ($ch, CURLOPT_S..

* PHP로 RESTful API를 개발하다보면 가끔 AJAX(XMLHttpRequest)를 이용해서 호출하는 경우 로그인 정보를 유지하여 정보 검증을 해야하는 경우가 있는데, AJAX를 이용하는 경우에도 php의 $_SESSION 정보는 활용할 수 있다. 이것을 이용해서 페이지에서 로그인한 정보를 확인하고 검증이 안된 사용자에 대해서는 권한이 없음을 알려주면 권한 관리에 용이하다. * 하지만 php 페이지에서 바로 $_SESSION을 사용하면 로그인 정보를 가져올 수가 없고, session_start();를 AJAX처리하는 PHP 페이지 상단에 넣어야 정상적으로 동작하게 될 것이다. 아래가 아주 간단한 예이므로, 응용하면 된다. API 호출하는 페이지 예 ./api.php 페이지 소스 예 * 잊지말고 ..

* PHP를 통해서 원격에 있는 이미지를 긁어오거나 복사하고 싶을 때가 많은데 예외상황이 많을 것이다. 한번 예외상황들에 대해서 적어보고, 특히 php.ini를 마음대로 수정못하는 웹호스팅을 하고 있다면 꽤나 골치 아플 일이 많을 것이다. : 일단 첫번째로 확인해야될 제약사항은 php.ini에서 "allow_url_fopen"이 "on" 되어있어야한다는 것이다. 만약 이것이 on 되어있다면 원격의 파일을 꽤나 쉽게 가져올 수 있다. * copy 함수를 이용해서 원격 이미지 가져오기: 우선 가장 간단하게 가져올 수 있는 방법은 copy 함수를 쓰는 것이다. copy("http://remotedomain.com/image.jpg", "/tmp/local.jpg"); : 위와 같이 하면 바로 원격의 파일을 로..

* 이번에 개인적으로 작은 프로젝트를 하나 하게 되면서 새로이 nodejs와 heroku에다가 올려놓고 간단하게 하면 좋겠다는 생각이 들어서 오랜만에 heroku를 다시 세팅하고 nodejs를 해보았다. 익숙하지 않지만 새로운 영역에서 개발하고 그것이 성공적이라면 너무나 재미있다! (실패하게 되면 물론 짜증나지만..) 이번에 개발할 때 heroku에 eclipse 플러그인을 사용해서 개발해봤는데 무료서버호스팅 서비스 중 하나인 Heroku의 플러그인과 Eclipse를 연동하는 것을 해보자. * Eclipse plug-in 설치: heroku에서는 플러그인으로 이클립스에서 개발을 할 수 있는 환경을 제공해주고 있다. 물론 heroku는 git를 기반으로 호스팅 서비스를 제공하고 있기 때문에 git의 플러그..

* 이번에 localStorage를 사용하면서 안드로이드에서는 되는데 아이폰에서만 안되는 독특한(?) 현상 때문에 애를 먹다가 옛날에 모바일 브라우져 환경에서 디버깅을 하는데 사용했던 툴을 깔아야하나 고민 중이었는데, 아이폰용 사파리의 아주 편리한 기능을 알게 되었다. 작년에 웹페이지에 라이브러리를 깔아가면서 모바일을 디버깅했던 때와 비교하면 아주 혁신적으로 엄청 편리해진 것을 발견할 수 있을 것이다. * 웹속성 사용하기 : 모바일에서 디버깅을 하기 위한 툴이 부족한 상황에서 모바일에서의 자바스크립트를 디버깅하는 것은 매번 alert를 띄우거나 조금 부실한 아이패드에서 사파리 디버깅 콘솔을 설정해서 console.log를 사용하는 정도이었는데, 이 웹속성 기능을 사용하게 되면 조금 느리기는 하지만 마치 ..

* 이번에 간단하게 웹을 통해서 몇백KB 정도 되는 데이터를 웹에서 불러다가 처리하는 개인 프로젝트를 개발하다가 매번 몇백KB를 불러오는게 부담이 되어, localStorage의 캐쉬를 이용하는 간단한 웹을 만들고 있었는데 안드로이드와 구형 아이패드에서는 잘 되는데 이상하게 최신 아이폰5에서는 잘 안되는 것이었다. 왜그런가 살펴보다가 디버깅툴을 이용해서 이것저것 테스트하다가 아래와 같은 에러가 일어나는 것을 발견했다. "QuotaExceededError: DOM Exception 22: An attempt was made to add something to storage that exceeded the quota." : 대충 너무 큰 사이즈의 데이터를 입력하려고 했다는 의미인 것 같았는데, 검색해보니 i..

* 웹 개발에 있어서 가장 중요한 것은 현재 브라우져의 점유일 것이다. 오랜만에 최근의 브라우져 점유가 어떤지 점검하고 대략적인 개발 방향, 호환성 테스트를 결정하는데 있어서 참고가 될 수 있도록 항상 최신 통계 자료를 참고하면 좋을 것이다. : 작년에 gs.statcounter.com의 현황을 가져온 이후로 벌써 1년이 지났기 때문에 작년 2013년 동안 어떠한 변화가 있었는지 살펴보자.2012/12/12 - [HTML5] 브라우져별 지원 현황(canvas, getUserMedia, WebSockets) 살펴보기 : 아래는 gs.statcounter.com에서 최신 점유 브라우져 데이터를 수집한 결과이다. 이것은 절대적인 의미를 부여하기 보다는 전체적인 흐름을 살펴보는데 도움이 될 것이고, 아래의 통계..

* 일반적으로는 a href="#아이디"등과 같이 사용자가 클릭을 해야하는 경우가 있는데, 이러한 경우가 아닌, 자바스크립트로 이동하는 방법을 알아보자. 이러한 경우는 페이지의 bookmark를 등록하거나 할 때 해당 위치로 이동하도록 할 때에 편리할 것이다. : 먼저 html에 id를 준다. : 그리고 해당 element로 이동하고 싶을 때 아래와 같은 자바스크립트를 호출하면 된다. location.href = "#"; location.href = "#bookmark"; : 이 방법은 아주 쉽게 의 링크/버튼을 누르지 않고 그와 같은 효과를 이끌어낼 수 있다. 하지만 url의 뒤에 #bookmark가 추가되는 불편함(?)이 있을지도 모른다. 사실, url이 그렇게 변하는 것은 미관상(?) 안 좋을수도 ..

* 자바스크립트의 오브젝트로 만들었을 경우에는 쉽게 특정 값에 대하여 삭제 가능하지만 배열인 경우에는 다소 어렵다. 게다가 IE8 이전 버전은 조금 귀찮기도 하다. 따라서 다음과 같은 간단한 함수를 하나 만들어둬도 괜찮을 것이다. function remove(arr, value) { var i; if (arr.indexOf) { // IE9+, 다른 모든 브라우져 while((i = arr.indexOf(value)) !== -1) { //해당 값이 arr에 있는 동안 루프 arr.splice(i, 1); } } else { // IE8 이하 for (i = arr.length; i--;) { //뒤에서부터 배열을 탐색 if (arr[i] === value) { arr.splice(i, 1); } } }..

* 오랜만에 Heroku로 node.js 프로그래밍을 해보려고 새로운 작업환경에 heroku toolbelt를 깔고 foreman을 실행하려고 했는데 아래와 같은 에러가 일어난다. : 옛날만 해도 아무런 이상없이 잘만 동작하던게 이렇게 안되니까 답답~했는데 찾아보니까 루비에 깔리는 foreman 0.63버전에서는 동작이 조금 다르게 되는가보다. 따라서 아래와 같이 foreman을 언인스톨하고 기존에 지원하던 0.61.0 버전을 까니까 잘 돌아간다. gem uninstall foreman gem install foreman -v 0.61.0 : 그럼 다시 작업시작! 끝.

* 자바스크립트의 간단한 함수들을 이용하면 진수변환을 아주 쉽게할 수 있다. 10진수 16진수 2진수 8진수 * 10진수 -> 16진수 var dec = 123; var hex = dec.toString(16); // === "7b" * 10진수 -> 2진수var dec = 123; var bin = dec.toString(2); // === "1111011" * 16진수 -> 10진수var hex = "7b"; var dec = parseInt(hex, 16); // === "123" * 16진수 -> 2진수 (* 10진수로 바꿨다가 다시 2진수로 바꾼다)var hex = "7b"; var bin = parseInt(hex, 16).toString(2); // === "1111011" * 2진수 -> ..

* 간단한 테스트용 서버를 구하려고 하던 중 이왕 하는거 nodejs로 하고 싶어서 여기저기 nodejs 호스팅 업체들을 알아보던 중 무료로 할만한 곳이 Heroku와 AppFog가 있다는 것을 알게 되었다. AppFog를 이용하려고 했지만, 앱을 새로 만들 때 에러가 나기 때문에 일단 Heroku로 시작하기로 했다. 0. 사전 준비 : nodejs/npm 설치 - Heroku에서는 0.8.x 버전을 호환해주므로 0.8.x 버전을 설치하자. 중간의 초록색 버튼을 누르면 바로 설치가 가능하다. http://nodejs.org/ * 이제부터 무료 호스팅 서비스인 Heroku를 이용해보자. 1. Heroku 사이트에 접속 http://www.heroku.com 2. 가입하기 : 중간의 Sign Up 버튼을 클..

* 자바스크립트에서는 이벤트를 다루는 방법은 대표적으로 3가지를 꼽을 수 있다. 1) HTML에 inline으로 등록Click me! 2) element의 onload 속성을 통한 등록 Click me! 3) addEventListener/attachEvent를 이용한 등록 Click me! : 일단 1)번부터 보면 이건 초창기 인터넷 넷스케이프 2 당시부터 사용하던 이벤트 핸들러 방식이다. 워낙에 전통적인 방법으로 오랫동안 사용해와서 많은 사람들이 아직도 사용하고 있다. 하지만 HTML을 사파리 reader 등으로 볼 때 문서로서 최적화하기 위하여, MVC 또는 MVVM 모델을 분류하기 위하여 html은 오로지 document를 표시해주는 역할을 취하게 하기 위해서는 1)번 보다는 이벤트 핸들러는 자바..

: 자바스크립트에서 string을 표기하는 방법이 여러가지가 있는데, 크게 2가지로 뽑을 수 있을 것이다. var objStr = new String("unikys"); // #1 var toStr = String("unikys"); // #2 var prmStr = "unikys"; // #3: String literal : 여기서 일반적으로 쓰이는 것은 #1번과 #3번(String literal)이고, 아마도 대부분은 #1번처럼 사용한 적도 별로 없겠지만, #1번과 약간 비슷해보이는 #2번의 표기방법도 있기는 있다. 비슷해보이는 표기법들이 C에서는 상당히 다르게 느껴지기는 하지만, 자바스크립트에서는 위의 #3번의 경우 아래와 같이 String의 함수들도 사용할 수 있다는 것이 신기하기도 하고 재미있다..

* 전문가들이 자바스크립트에 있지만 없는듯이 살라는 명령어가 2가지가 있다. eval with : eval은 보안상, 퍼포먼스상 문제가 있기 때문에 반드시 필요한것이 아니라면 사용하지 말라고 하는 것은 이해가 되지만, 솔직히 with란 놈은 한번도 써본적도 없고, 본적도 없는데 사용하지 말라고 한다. 한번도 본적이 없는 명령을 사용하지 말라고 하니까 이게 어떠한 명령인지 왠지 더 궁금해지고 사용해보고 싶은 법! 때문에 일단 이 with 명령에 대하여 한번 알아보고, 왜 사용하지 말아야 하는지 알아보자. * with - 설명: with 이후에 오는 구문을 위해 scope chain에 인자로 받는 object를 추가한다. - 문법:with (object) statement; 또는with (object) { ..

* javascript를 하게 되면 DOM객체에 CSS의 클래스를 추가하고 삭제하는 일이 많아졌을 것이다. 이 기능은 jquery로 간단하게 이용할 수도 있지만, 그 내부에서 돌아가는 사정은 알고 사용해야 할 것 아닌가. jquery만 의존해서는 자바스크립트 언어 실력이 향상 될 수 없기 때문에! 간단하게 순수 vanilla 자바스크립트로 구현해보자. * addClass : css 클래스를 추가하는 함수로, element와 class명을 받도록 한다.function addClass(element, className) { element.className += " " + className; }; : addClass는 쉽게 끝난다. 더이상 깊게 들어가야할 것은 안보인다. * removeClass : css 클..

* jquery는 정말로 편하고 좋은 라이브러리이다. 최적화도 잘되어있고 다양한 기능이 아주 쉽게 들어가있다. 하지만 자바스크립트 개발자라면 이 jquery의 활용에 대해서 고민을 해봤을수도 있고, 좋은 라이브러리라니까 가져다 쓰고 활용을 할수도 있을 것이다. 하지만 적어도 이유는 알고 사용하고, 사용을 안 한다면 왜 사용을 안 해야하는지에 대해서 고민을 해보자. * 서론 : 자바스크립트를 숱하게 해오다가 처음으로 jquery라는 라이브러리를 대충 듣게 되고, 이것이 무엇인지도 모른체 지내다가 나중에 jquery를 처음 알게 되었을 때에는 너무나도 놀라웠다. 기존에 자바스크립트로 사용했던 DOM 탐색의 경우 끽해야 id 탐색, class 이름과 태그명으로 탐색했었는데 이러한 것들을 CSS 의 검색 스타일..

* 현재 HTML5는 각 브라우져사별로 다르게 지원을 확대해나가고 있는 실정으로 지원하는 기능도 다르기 때문에, 기능마다 지원할 브라우져를 고려해야할 것이다. 이러한 각 브라우져별로 지원 현황을 보기 위한 홈페이지를 소개한다. http://caniuse.com/ : 각 브라우져별, 버전별 지원 현황을 보기 좋게 잘 정리해놨다. 여기서 본인이 자주 사용하게 될 기능을 검색하게 되면 해당하는 기능에 대한 지원 현황이 나오게 된다. 각 브라우져별, 버전별 점유율도 보여줘서 이러한 것을 살펴보는 것이 의외로 재미있다. 그럼 간단하게 HTML5의 핵심 기능들과 이제 막 구현이 진행되고 있는 WebRTC 관련 기능들을 살펴보자. * canvas : HTML5의 가장 기본으로 생각되는 태그의 지원 현황이다. IE만 ..

* 자바스크립트로 DOM element의 넓이를 구할 때 단순히 아래와 같이 하면 제대로 적용이 안되는 경우가 있다. : 위와 같은 경우 브라우져상에서 실제로 보이는 width는 .myStyle로 인해 400px로 나와있지만, 9번째 줄에서 element에 접근하여 style의 width를 출력해보면 빈칸으로 나오게 된다. 왜냐하면 이 div의 width는 css의 클래스로 설정된 width이기 때문에, element 자체의 style안에는 width 값이 없기 때문이다. 이럴 때 DOM을 브라우져에 랜더링된 실제 넓이를 구하는 방법은 다음과 같다. console.log(window.getComputedStyle(document.querySelector(".myStyle")).width); // === ..

* HTML5를 개발하는데 있어서 가장 큰 걸림돌이라하면 바로 인터넷 익스플로러(IE)일 것이다. MS에서는 웹표준과는 동떨어진 독자노선을 걷다가 이제 웹표준이 정립되어가고 있는 HTML5의 적용을 브라우져에 이제서야 뒤늦게 시작하고 있다. IE10에서는 그래서 그나마 호환성을 갖추기는 했지만 여전히 부족한 느낌이 많을 것이다. 이러한 문제를 해결하기 위한 한가지 방법은 바로 구글의 크롬 프레임(Chrome Frame)이다. * 구글 크롬 프레임(Google Chrome Frame: GCF): 구글 크롬 프레임은 IE에서 구글 크롬의 환경을 구현할 수 있도록 도와주는 오픈소스 플러그인이다. 구글의 V8 자바스크립트 엔진과 다양한 웹기술들을 최신 경향의 적용이 느린 IE에 적용시켜줄 수 있는 유용한 도구이..

* HTML5를 하면서 AJAX로 얻어온 데이터를 div 태그에 뿌려주다보면 넘쳐서 스크롤바가 생기는 경우가 많다. 가장 대표적인 예가 채팅 프로그램을 만들 때 가장 아래로 스크롤을 유지해야하는데, div에 내용이 추가되고 나서 아래의 자바스크립트를 사용하면 된다. var objDiv = document.getElementById("mydiv"); objDiv.scrollTop = objDiv.scrollHeight; : 위의 바닐라 자바스크립트 말고도 jQuery를 이용하는것도 방법이다. $("#mydiv").scrollTop($("#mydiv")[0].scrollHeight); : 위에서 scrollTop 안에 $("#mydiv")[0]을 하는 이유는 직접 dom에서 데이터를 가져오기 위함이다. * ..

: HTML5의 위로 이미지를 드래그앤 드랍을 할 때에는 보통 canvas.addEventListener("drop", function (e) { alert("dropped!"); e.preventDefault();}); : 이렇게 drop이벤트를 listen하게 되는데 drop 이벤트만 이렇게 처리하게 된다면 크롬, 사파리 등에서는 잘 동작하지만 파이어폭스에서는 왠지 이 drop 이벤트를 먹어버리고 브라우져 자체가 이미지를 열어버리게 된다. : 이럴 때에는 dragover의 기본 동작도 방지시켜주면 파이어폭스에서도 drop 이벤트가 정상적으로 동작하게 된다. canvas.addEventListener("dragover", function (e) { e.preventDefault(); return fal..

* 자바스크립트에서 랜덤 수를 생성하는 것은 Math.random 함수를 쓰면 된다. var rand = Math.random() * max; // 0 ~ max 사이의 랜덤 float 값을 생성, max는 포함하지 않는다. var rand2 = Math.floor(Math.random() * max); // 0 ~ (max - 1) 까지의 정수 값을 생성 * Math.random() 함수는 0~1의 실수를 생성하며 1을 생성하지는 않는다, Math.round가 아닌 Math.floor를 사용하는 것은 더 균일한 랜덤 값 생성을 하기 위한 것이다. Math.round를 사용하게 되면, 0과 1이 나올 수 있는 확률이 절반으로 줄어들게 된다. * 이를 함수로 구현해두면 그때마다 호출해서 사용하면 된다. f..

: 자바스크립트에서는 시간에 따라 함수를 호출할 수 있는 함수가 2가지가 있다.setInterval(callbackFunction, milliseconds);setTimeout(callbackFunction, milliseconds); : setInterval은 말그대로 특정 interval을 두고 콜백함수를 계속 호출하는 함수이고, setTimeout은 일정 시간뒤에 함수를 호출하게 되는 1회성 함수이다. 즉, 계속 반복적으로 일정 시간마다 호출해야한다면 setInterval을 설정하면 되고 한번만 호출해야된다면 setTimeout을 사용하면 된다. : 위 함수와 반대로 설정된 함수 호출을 취소하는 함수는 아래의 두가지이다.clearInterval(intervalReturnVariable);clearT..

* CSS에서 제공해주는 font 의 스카일을 예제로 알아보자.: 아래는 CSS3를 기준으로 하고 있으며 오래된 브라우저에서 다르게 표시될수도 있다. * 각 스타일에 대한 예제이다. * 아래는 각 스타일에 대한 설명이다.: font-family는 가장 먼저 존재하는 폰트를 적용하게 된다. (아래에 스펙 정리) style="font-family: Helvetica, Verdana, sans-serif;" style="font-family: Verdana, sans-serif;" style="font-family: 굴림;" style="font-family: 바탕;" style="font-family: 궁서;" style="font-family: 새굴림;" : font-weight의 예 style="font..

* PHP에서 파일을 읽는 fopen 기능에 대해서 알아보자. * fopen 포맷 resource fopen ( string $filename , string $mode [, bool $use_include_path = false [, resource $context ]] ) : 인자를 총 4개 받으며, 1, 2번째 인자는 필수고 3, 4번째 인자는 옵션이다. * 첫번째 인자: string $filename : 파일을 로드할 파일명으로, 앞에 "scheme://..."와 같은 프로토콜을 명시하는 경우 해당하는 프로토콜을 이용하는 URL로 판별하여 해당 scheme의 프로토콜 핸들러를 찾아서 파일에 접근하게 된다. 만약 프로토콜이 명시되지 않았다면 서버 로컬의 일반적인 파일로 판단하여 찾게 된다. 만약 로..

* PHP에서 사용하고 있는 날짜 포매팅의 방식은 다음과 같다. string date(string $format [,int $timestamp = time()] ) : 첫번째 $format 인자는 날짜를 나타낼 포맷을 설정하는 인자이다. : 여기서 두번째 인자 $timestamp를 입력하지 않으면 현재 날짜 기준으로 time() 함수의 값을 입력한 것이 기본으로 들어가며, 아닌 경우에는 해당하는 시간에 대시간을 리턴한다. : 그래서 결과적으로 $timestamp의 시간을 $format으로 포매팅한 결과를 스트링으로 리턴하게 된다. * format 인자 : format에서 이용하는 인자는 아래와 같다. - '년'과 관련된 문자 format 문자 설명 예 Y 4자리 숫자로 표시 1999나 2003 y 2자리..

var items = { "foo" : 123456, "bar" : 789012, "baz" : 345678, "bat" : 901234 }; 다음과 같은 연관 배열이 있을 때, items[0]이런식으로는 루프를 돌수 없다. 이 배열을 루프 도는 방법은 아래와 같이 for, in을 사용하면 된다. for(var index in items){ document.write(index + " : " + items[index] + " "); } 를 하게 되면 아래와 같이 출력할 수 있다. foo : 123456 bar : 789012 baz : 345678 bat : 901234 끝.

* typeof와 instanceof는 어떠한 변수가 문자열인지아닌지, 특정한 객체인지 아닌지 판단할때 사용하는 '연산자'들이다. 이들 둘이 어떻게 다른지 살펴보고 사용하면서 있을 수 있는 약점들도 같이 살펴보자. * typeof : typeof는 unary 오퍼레이터이다. unary 오퍼레이터로는 ! 라던가 - 등과 같이 인자를 하나만 받을 수 있는 연산자를 뜻한다. 즉, 함수가 아니고 연산자이기 때문에 괄호를 사용하면 안된다. typeof yourVariable; 위와 같이 실행하고 나면 리턴 값으로는 해당하는 변수의 primitive 타입을 스트링으로 준다. 돌려주는 primitive 타입의 종류는 아래와 같다. 'undefined''boolean''number''string''object''fun..