All-round programmer

* 자바스크립트로 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); // === ..

* SyntaxHighlighter : 블로그에 소스코드 스타일을 계속 수동으로 해주는 것은 참으로 고된일이라 어떤 라이브러리가 없을까해서 찾아본게 바로 SyntaxHighlighter 라는 라이브러리 입니다. 자바스크립트에 간단하게 적용예는 아래와 같습니다. (function (doc, win) { "use strict"; var nyschool, host = "ny-school.appspot.com", loginId, currentUserInformation, School, StudentList, Student, HomeRoom, Teacher, teacherList, studentListList, currentStudentList, homeRoomList, currentHomeRoom; functi..

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

* CSS에서 엘레멘트의 style.top 값을 가져왔을 때이 top 값은 "10px"나 "100%"등의 단위를 붙어서 나오기 때문에 string으로 반환된다. 이것을 처리하기 위한 간단한 방법이 아래와 같다. var topString = document.getElementById("mydiv").style.top; var topInt = parseInt(topString||0, 10); : 여기서 parseInt 함수는 앞의 숫자만 변환한 값을 10진수(parseInt의 두번째 인자)로 변환하여 리턴하게 된다. 중간에 ||0을 한 것은 만약에 top이 설정되어있지 않다면 0으로 설정하겠다는 것이다. : 주의할 것은 class 를 이용해서 top을 설정했다면, offset을 계산해서 하는 것이 좋을 것이..

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

* 소프트 링크는 아래처럼 실행하면 된다. # sudo ln -s /var/www/original_dir ./target_dir : 만약 target_dir이 이미 존재한다면 그 안에 새로운 링크를 만들게 된다. 끝.

* 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자리..

* 구글에서 제공하는 정보 사이트에서 정보를 확인할 수 있다. http://developer.android.com/about/dashboards/index.html : 아래는 최근 14일간 구글 플레이에 접속한 안드로이드의 버전별로 모든 데이터이다. * 2012년 11월 1일 데이터 : Gingerbread가 54%, ICS가 25%, Froyo가 12%, Eclair가 3.1%, Jelly Bean이 2.7%의 분포를 보여주고 있다. * 2.1버전은 조금씩 도태되고 있는 것이 보이고 있고, 아직은 2.2버전은 호환하는 앱을 만드는 것이 좋을 것 같다. 앱 개발을 약 3개월 완성을 고려한다면 2.3.3만 지원해도 괜찮을 것 같기도 하다. : 아래는 화면크기와 해상도에 대한 분포도이다. 화면은 당연히 일단..

* 안드로이드 프로젝트를 생성했는데 생성 시작부터 아무것도 안했는데 에러가 난무하고 있다. : 도대체 무슨 에러인가 커서를 대보니 다음과 같다. : @override를 사용할 경우 무조건 superclass에 있어야한다는 내용이다. 해결방법으로는 @Override를 삭제하는 방법이 있다고 나와있다. 하지만 일일이 모든 @Override를 지우면서 할수는 없을 것이다. 이것의 간단한 해결방법이 있다. * 안드로이드 프로젝트는 기본적으로 자바컴파일러가 1.5로 잡혀있는데 1.6이상버전으로 세팅하면 문제가 해결된다. : 고치고나니 문제가 없어졌다. 이제 코딩하자! 끝.

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

* 마우스 포인터를 mousedown이나 mouseup, mousemove, click 등의 이벤트 콜백 함수 안에서 가져오고자 한다면 아래와 같은 함수를 호출하면 된다. function mouseX(evt) { if (evt.pageX) return evt.pageX; else if (evt.clientX) return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); else return null; } function mouseY(evt) { if (evt.pageY) return evt.pageY; else if (evt.clientY) r..

* CSS에서는 다양한 border 스타일들을 제공하고 있다. 일단 border 스타일의 종류를 먼저 예제로 간단하게 알아보고 그 아래에 좀더 상세하게 살펴보자. : 아래는 CSS3를 기준으로 하고 있으며 오래된 브라우저에서 제대로 표시되지 않을 수 있다. * 각 스타일에 대한 예제이다. border-style:dotted border-style:solid border-style:double border-style:groove border-style:ridge border-style:inset border-style:outset * 보더의 넓이에 대한 예제이다. border-style과 같이 쓰지 않으면 아무런 효과가 없다. border-style:solid;border-width:5px border-s..

[파이썬] 구글 앱 엔진: No module named urllib 에러 * 맥에서 구글 앱엔진을 사용하다가 대뜸 위와 같은 에러가 났다.: 에러를 보니 File "/System/Library/Frameworks/Python.framework/Versions/2.6/lib/python2.6/cgi.py", line 31, in import urllib ImportError: No module named urllib : 위와 같은 에러가 났다. 얼마전까지는 문제없이 됐는데 대뜸 이렇게 에러가 나는걸 보니 파이썬 2.6하고 연결되어있어서 문제가 있는듯 싶다. : 따라서 GoogleAppEngineLauncher를 실행하고 Preference가서 파이썬의 경로를 바꿔줘야했다.- 현재 파이썬의 경로, /usr/..

[PHP] 파일 업로드 (AJAX, XMLHttpRequest나 form 등으로 file 첨부), 에러나는 이유와 처리 방법 * 클라이언트 측 파일 업로드는 이전에 다뤄봤으니 이번에는 서버측 PHP에서 어떻게 파일을 다룰지 한번 알아보고 파일 업로드를 하게 될 때 일어나는 에러들의 이유와 그 처리 방법을 살펴보자. : 클라이언트 부분은 이전에 작성했던 글을 참고하면 될 것이다. 2012/10/10 - [Programming/Web Programming] - [Javascript] AJAX 비동기로 파일 첨부하기 (IE도 지원하게 만들기) : 솔직히 클라이언트쪽 세팅만 잘해줬으면 PHP 쪽은 할일이 거의 없다. 만약 올리는 쪽에서 input의 name이 "uploadFile"이라고 했다면, PHP쪽에서는 ..

[Javascript] Removing all children using DOM * HTML로 프로그래밍하다보면 모든 자식 노드를 삭제해야하는 경우가 생긴다 그럴때 사용하면 되는 간단한 팁이다. var cell = document.getElementById("cell"); while ( cell.hasChildNodes() ) { cell.removeChild( cell.firstChild ); }

* Apache로 웹 프로그래밍을 하다보면 에러 로그를 봐야하는 경우가 자주 생긴다. 특히 운영 중인 서버인 경우 어떠한 에러들과 경고들이 있었는지 확인하고 이러한 문제들을 해결하는 것이 서버를 쾌적하게 유지하는데 1순위 과제일 것이다. : 기본적으로 설정을 바꾸지 않은 Apache 서버의 로그 위치는 아래와 같다./var/log/httpd/error_log 이 위치는 RHEL / Red Hat / CentOS / Fedora Linux Apache/var/log/apache2/error.log 이 위치는 Debian / Ubuntu Linux Apache/var/log/httpd-error.log 이 위치는 FreeBSD Apache : 하지만 설정이 바뀌었을 경우에는 httpd.conf 파일을 찾아서..

* 이전에 AJAX로 XMLHttpRequest에 파일을 첨부하는 방법을 쓴적이 있다. 2012/10/05 - [Programming/Web Programming] - [Javascript] AJAX (XMLHttpRequest)로 비동기적으로 파일 업로드하기 : 맨날 크롬만 쓰니까 테스트를 하니까 잘 동작하길래 넘어갔는데, 이게 왠걸, Internet Explorer (이하 IE)에서는 돌아가지 않는 것이다. 이놈의 IE 또 무엇이 말썽인건가?! : 개발자 도구를 통해서 확인하니 uploadFile.files가 undefined랜다. 게다가 FormData도 없댄다..헐. 도대체 이것들은 있기는 한가?! http://msdn.microsoft.com/en-us/library/ie/hh772723(v=v..

* PHP에서는 이전부터 등과 같은 short tag로 HTML의 소스 중간에 변수의 출력을 간단하게 축약해서 출력하는 방법이 있었다. 하지만 이제는 그 출력 방식이 더이상 이용하게 되지 않고 있다. : 그 이유는 아주 간단하다. 바로 xml의 헤더에도 : 따라서 PHP는 단순히 와 같은 방식을 사용해야하는 것이다. PHP 5.4 이상 버전에서도 여전히 이러한 축약태그가 지원이 되지만, short_open_tags의 설정을 해줘야하고, 다른 어떠한 서버로 자신의 소스 코드를 옮겼을 때 모든 서버에서 돌아가기를 바란다면 이러한 축약 태그보다는 와 같은 풀 태그를 사용하는 것이 추천되고 있는 것이다.

* PHP 5.2이상 버전에서 활용가능한 json_encode와 json_decode 때문에 이 함수를 따로 수작업으로 구현했던 적이 있다. 2012/10/05 - [Programming/Web Programming] - [PHP] Fatal error: Call to undefined function json_decode() - yum update php를 했을 경우 실제로 업데이트할 내용이 없다고 하여 그냥 수작업으로 만들었지만, CentOS 5.5에는 이미 PHP 5.3 이 있다는 것을 알게 되었다. - yum search php53 을 실행하면 검색할 수 있다. : 하지만 yum install php53을 실행하면 기존에 인스톨된 php 5.1 버전과 conflict가 있다는 메세지를 받게 된다...

* 파일을 post로 첨부를 하였는데 만약에 php에서 #_FILES가 비어있다면, : 첨부한 이름과 가져오는 이름을 확인할 것 : 파일의 크기가 너무 크지 않은지 체크할 것- 만약에 php.ini의 설정을 바꾸지 않았다면 기본적으로 8메가의 제한을 가지고 있다. * 파일 첨부 크기 제한 늘리기: php.ini를 찾아서 post_max_size = 8M 인것을 늘려주고 서버를 재시작하면 된다.- Apache는 service httpd restart로 재시작 가능 끝.

Redhat의 경우 yum을 이용해서 설치를 하게 되면 /etc/php.ini 에 생성하게 된다. 하지만 운영체제나 설정마다 다르기 때문에 확실하게 아는 방법은 바로 phpinfo 페이지에서 찾아보는 것이다. 여기에 php의 설정에 대한 거의 모든 정보가 들어있으니 참고하자. * phpinfo 페이지 만드는 방법: 서버에 info.php 파일을 하나 만들어서 아래와 같이 쓰자. : 그리고 이 페이지로 접근을 하게 되면 다음과 php에 대한 정보들이 쭉 나오는데 아래쪽에 보면 "Loaded Configuration File" 에 "/etc/php.ini" 라고 나와있는 것을 볼 수 있다. : 이런 정보 페이지를 만드는게 귀찮다면 리눅스 콘솔에서 grep을 사용해서 찾아보는 방법도 있지만, 이 정보 페이지의..

* 다른 사람이 짜놓은 라이브러리를 가져다가 열심히 코딩하는데 에러가 났다. [error] PHP Fatal error: Call to undefined function json_decode() in /var/www/html/example/lib/ApiRestHandler.php on line 147, referer: http://example/open_api.html : 에러를 해석하자면, json_decode()라는 함수가 정의되지 않았는데 호출이 되었다는 것이다. 위치는 ApiRestHandler.php의 147번째 줄이다. : 이미 상용화를 하고 있는 문제없는 소스일텐데 에러가 났다. json_decode() 함수가 없다는 것이다. 그럼 라이브러리가 제대로 로드가 안되었거나 버전이 무언가 안맞던가..

오늘 PHP로 작업하다가 일반적인 언어의 유효영역(scope)로 생각하다가 한시간을 낭비한 일이 있었다. : 위와 같이 썼는데, 당연히 전역변수로 선언한 $apiHandler가 함수 내에서 $apiHandler 이렇게 바로 접근하면 될 줄 알았는데, object가 undefined라고 자꾸 나와서 왜그런가 했더니 로컬 함수 영역은 글로벌과는 별로도 따진다는 것이다. 만약에 함수 밖에 선언한 전역 변수를 사용하고자 한다면, function doFunction1(){ global $apiHandler; $apiHandler->call("foo");} : 이렇게 global로 정의를 해주면 전역변수로서 $apiHandler를 접근하게 된다. 이외에서 $GLOBALS 를 사용하는 방법도 있다. function ..

[자바스크립트] Uploading file with AJAX (XMLHttpRequest) : 지금까지 웹 언어들을 사용할 때 파일을 업로드 할때에는 form과 input type="file"을 이용해왔다. : 위의 구현은 php.net에 있는 내용을 가져온 것으로 태그 안에 단순히 form을 submit하는 것만으로 쉽게 구현이 가능했지만, 이러한 방법은 페이지 새로 고침(refresh) 현상을 유도하게 되고 이는 사용자 경험에 있어서 마이너스가 된다. (비동기를 적용하게 되는 것은 클라이언트 쪽이니까 서버측 구현은 일단 무시하자.) : 하지만 이러한 방법이 이제 어려워지는 가장 큰 이유는 바로 HTML5를 적용한 웹페이지들이 많아지면서 일 것이다. HTML5에서 HTML은 MVC 모델에서 철저하게 V..