All-round programmer

* 이번에는 자바스크립트의 최대 강점이자 가장 독특한 특징 중 하나인 closure에 대해서 알아보자. - 이전 글 2012/12/10 - [속깊은 자바스크립트 강좌] 시작 (예고편) 2012/12/17 - [속깊은 자바스크립트 강좌] 자바스크립트의 Scope와 Closure 기초 2013/01/07 - [속깊은 자바스크립트 강좌] function declaration vs function expression 차이점 2013/01/10 - [속깊은 자바스크립트 강좌] 함수를 호출하는 방법과 this의 이해 * 이번편을 읽기 전에 closure와 scope에 대한 기본적인 지식이 있어야하니까 아래의 이전 글을 읽고 오면 이해하는데 도움이 될 것이다. 2012/12/17 - [속깊은 자바스크립트 강좌] 자바..

* 목표: 엑셀에서 선택한 영역을 가져와서 각 문자열의 문자 중에 입력한 단어가 있으면 색을 변환하는 매크로 작성 * 작성 환경: 엑셀 2010 : 예를 들면 아래와 같은 엑셀이 있을 경우 'fer'를 빨간색으로 변환하고 싶다. 1. 매크로 생성 : 위의 메뉴바에서 보기 > 매크로 > 매크로 보기를 선택 : 매크로 이름에 'WordColor' 등 매크로 이름을 넣으면 오른쪽에 '만들기' 버튼이 활성화 된다. : '만들기' 버튼 클릭 : 그러면 아래와 같이 비쥬얼 베이직 모듈 작성 윈도우가 열린다. 여기다가 매크로를 작성한다. 2. 매크로 작성 : 아래의 소스를 매크로에 작성한다.Sub WordColor() Dim cell As Range, word As String, startIndex As Intege..

* 이번에는 많은 개발자들이 처음으로 자바스크립트를 접하고 가장 헷갈려하는 this가 결정되는 방법에 대해서 공부를 해보자. - 이전 글 2012/12/10 - [속깊은 자바스크립트 강좌] 시작 (예고편) 2012/12/17 - [속깊은 자바스크립트 강좌] 자바스크립트의 Scope와 Closure 기초 2013/01/07 - [속깊은 자바스크립트 강좌] function declaration vs function expression 차이점 * 함수(function)의 호출 : this가 어떻게 결정되는지 알려면 일단 먼저 함수를 호출하는 방법에 대하여 알아보아야한다. 함수의 호출은 크게 4가지로 분류할 수 있다. 이 4가지에 대하여 아주 간단하게 어떻게 호출되는지 알아보고 각 경우에 대하여 this가 결정..

* 이번에는 자바스크립트의 가장 중요한 function에 대해서 살펴볼건데, 자바스크립트에서 함수는 쉽게 넘어가면 아주 쉽게 넘어갈수 있기도 하지만, 깊게 들어간다면 정말 깊게 들어갈수도 있는 부분이다. 자바스크립트에서는 이러한 부분이 가장 중요하기 때문에, 함수의 선언과 사용에 멈추는 것이 아니라 함수를 호출하는 방법에 의해 this가 결정되는 부분까지 알아보자. - 이전 글 2012/12/10 - [속깊은 자바스크립트 강좌] 시작 (예고편) 2012/12/17 - [속깊은 자바스크립트 강좌] 자바스크립트의 Scope와 Closure 기초 * function과 자바스크립트 : 자바스크립트는 다른 언어들보다도 function이 아주 중요한 위치를 차지하고 있다. 다른 언어에서는 class나 object가..

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

* 이번에는 저번의 GPS 위치 가져오기 이후에 지도 위에 말풍선을 띄우는 것을 한번 공부해보자. - 이전 글 목록2012/11/05 - [Android(안드로이드) 앱 개발 기초] Eclipse 개발환경 설정하기, Android SDK 설치하기2012/11/07 - [Android(안드로이드) 앱 개발 기초] 안드로이드 프로젝트 생성하고 에뮬레이터로 앱 실행하기2012/11/10 - [Android(안드로이드) 앱 개발 기초] 간단한 인터페이스 구현과 다른 Activity로 넘어가기2012/11/21 - [Android(안드로이드) 앱 개발 기초] Activity 라이프사이클 공부2012/11/24 - [Android(안드로이드) 앱 개발 응용] Google Map API로 지도 보여주기(MapView..

* 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 의 검색 스타일..

* C나 자바를 접하던 사람들이 처음으로 자바스크립트를 접하면 혼란스러워하는 것이 바로 scope와 this의 상이함일 것이다. 처음에 접할 때에는 객체지향 언어에서는 이해할 수 없는 동작들을 하고 있기 때문에 이것이 뭔가 싶다가도 자바스크립트가 이상하다고 스스로 판정을 내리게 된다. 하지만 이것들은 자바스크립트의 원리만 이해하면 아주아주 쉽고, 오히려 객체지향 언어보다 놀라운 유연함에 감탄을 하게 될 것이고, 자바스크립트를 하다가 다시 C나 자바를 하게 되면, '자바스크립트라면 쉽게 해결할 수 있는데..'라며 자바스크립트를 아쉬워하게 될 것이다. 그럼 이번에는 일단 자바스크립트의 가장 '기본'인 scope와 closure에 대해서 알아보자. - 이전 강좌 2012/12/10 - [속깊은 자바스크립트 강..

* 현재 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); // === ..

* '자바스크립트'하면 제일 먼저 떠오르는 생각이 무엇인가? * 자바스크립트? : 맨 위의 질문에 대한 대답을 다양한 대답들이 나올 것이다. '자바스크립트'라는 이름 때문에 '자바'의 하위에 존재하는 언어, 또는 '스크립트'라는 이름 때문에 손쉬운 스크립트 언어라고 하는 사람들도 있을 것이고, 직접 자바스크립트를 사용해본적이 있는 사람이라면 아주 쉬운 언어, 배우기 쉽고 적용하기 쉬운 언어라는 의견도 있을 것이고 또는 성능이 느린 언어나 디버깅하기 안좋은 매우 짜증나는 언어라는 생각도 있을 것이다. c나 자바의 주류 언어로 프로그래밍을 많이 해오던 사람들이라면 웹프로그래머들이 웹페이지, 홈페이지를 구축하는데 있어서 사용하는 스크립트 언어라는 인식이 있을 것이고, 웹프로그래머들은 클라이언트 사이드에서 무언..

* 이번에는 약간 이론과 실제 구현을 섞어서 한번 프로젝트를 진행해보자. 공부할 내용은 Python과 구글 앱엔진을 통해서 자료 구조를 구축하는 방법에 대해서 공부하면서 진행할 것이다. 1:1, 1:N, 그리고 N:M의 관계들에 대해서 알아보고 서버측 데이터 설계를 완성할 것이다. * 공부하면서 구현하는 것이고 테스트를 차후에 기능들을 구현하면서 할 것이기 때문에 문법상, 구조상 다소 오류가 있을 수 있습니다. - 이전 관련 글들..2012/10/06 - [NY-School] Google App Engine과 Python 시작하기전에 공부하기2012/10/06 - [NY-School] Google App Engine과 Python 시작하기 - Hello world2012/10/06 - [NY-School..

* 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에 적용시켜줄 수 있는 유용한 도구이..

* 이번에는 이전의 라이프사이클에 이어서 앱을 실행 중일때 설정이 바뀌는, 대표적인 예로 화면 회전이 일어나는 경우 처리하는 방법에 대해서 알아보자. 2012/11/05 - [Android(안드로이드) 앱 개발 기초] Eclipse 개발환경 설정하기, Android SDK 설치하기2012/11/07 - [Android(안드로이드) 앱 개발 기초] 안드로이드 프로젝트 생성하고 에뮬레이터로 앱 실행하기2012/11/10 - [Android(안드로이드) 앱 개발 기초] 간단한 인터페이스 구현과 다른 Activity로 넘어가기2012/11/21 - [Android(안드로이드) 앱 개발 기초] Activity 라이프사이클 공부2012/11/24 - [Android(안드로이드) 앱 개발 응용] Google Map ..

* 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 를 통해서 새로 생겨난 다양한 form들을 살펴보자. * 이번에는 브라우져들이 상당부분 지원해주지 않고 있는 부분이라 가장 많은 부분을 지원해주고 있는 Opera 브라우져와 크롬 브라우져를 쓴다면 다양하게 잘 보일 것이다. 아직까지 브라우져마다 지원해주고 있는 현황이 다르기 때문에 체험을 해보려면 2가지 이상의 브라우져를 사용할 것을 권하고, 오페라와 크롬을 사용하면 2개로 거의 모든 것을 체험할 수 있다. 익스플로러10 이전 버전에는 현재 거의 아무것도 적용이 안되어있으니 이미지만 참고하면 될 것이다. 2012/10/25 - [HTML5 튜토리얼] HTML5의 등장 배경과 여러 가지 개발 환경 및 현재 현황2012/11/03 - [HTML5 튜토리얼] 기초 및 기본 구조, 프로그..

* 이번에는 Location Manager를 이용해서 현재 사용자의 위치를 측정하는 방법을 공부해보자. 2012/11/05 - [Android(안드로이드) 앱 개발 기초] Eclipse 개발환경 설정하기, Android SDK 설치하기2012/11/07 - [Android(안드로이드) 앱 개발 기초] 안드로이드 프로젝트 생성하고 에뮬레이터로 앱 실행하기2012/11/10 - [Android(안드로이드) 앱 개발 기초] 간단한 인터페이스 구현과 다른 Activity로 넘어가기2012/11/21 - [Android(안드로이드) 앱 개발 기초] Activity 라이프사이클 공부2012/11/24 - [Android(안드로이드) 앱 개발 응용] Google Map API로 지도 보여주기(MapView), Ove..

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

* 이론공부는 지긋하다! 잠시 외도를 해서 Google Map API를 활용하는 방법을 공부해보자! 2012/11/05 - [Android(안드로이드) 앱 개발 기초] Eclipse 개발환경 설정하기, Android SDK 설치하기 2012/11/07 - [Android(안드로이드) 앱 개발 기초] 안드로이드 프로젝트 생성하고 에뮬레이터로 앱 실행하기 2012/11/10 - [Android(안드로이드) 앱 개발 기초] 간단한 인터페이스 구현과 다른 Activity로 넘어가기 2012/11/21 - [Android(안드로이드) 앱 개발 기초] Activity 라이프사이클 공부 * Google Map API 설치하기 : Google Map API는 Google API에 포함되어 있으며, Android SDK..

* 이제 html5 태그상에서 지원해주는 video와 audio에 대해서 공부해보자.2012/10/25 - [HTML5 튜토리얼] HTML5의 등장 배경과 여러 가지 개발 환경 및 현재 현황2012/11/03 - [HTML5 튜토리얼] 기초 및 기본 구조, 프로그래밍상 기존의 HTML과 바뀐 점2012/11/05 - [HTML5 튜토리얼] HTML5에 추가된 Element들 그리고 문서의 구조화2012/11/18 - [HTML5 튜토리얼] Canvas 기초 강좌* Video와 Audio?: 기존의 웹이라하면 텍스트와 정보 기반으로 형성되어왔다면 이제는 다양한 창의적인 표현과 데이터 비쥬얼라이제이션과 정보를 잘 효과적으로 보여주는 것이 중요해지면서 그래프나 다양한 그래픽과 미디어들이 활용되기 시작했다. 이..

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

* 이번에는 안드로이드 앱의 기초 단위인 Activity의 lifecycle에 대해서 공부해보자. 2012/11/05 - [Android(안드로이드) 앱 개발 기초] Eclipse 개발환경 설정하기, Android SDK 설치하기2012/11/07 - [Android(안드로이드) 앱 개발 기초] 안드로이드 프로젝트 생성하고 에뮬레이터로 앱 실행하기2012/11/10 - [Android(안드로이드) 앱 개발 기초] 간단한 인터페이스 구현과 다른 Activity로 넘어가기 * Activity 라이프 사이클: 사용자가 앱을 시작하고 앱 안에서 앞으로 뒤로 이동하고 다른 앱을 실행하는 등의 행위를 컨트롤하는 것이 바로 Activity이다. 이러한 Activity는 처음 시작할때, 전면에 나와서 사용자의 포커스를..

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

* 이번에는 HTML5의 강력한 기능 중 하나인 태그에 대해서 알아보자. 2012/10/25 - [HTML5 튜토리얼] HTML5의 등장 배경과 여러 가지 개발 환경 및 현재 현황 2012/11/03 - [HTML5 튜토리얼] 기초 및 기본 구조, 프로그래밍상 기존의 HTML과 바뀐 점 2012/11/05 - [HTML5 튜토리얼] HTML5에 추가된 Element들 그리고 문서의 구조화 * 소개 : 태그는 자바스크립트를 통해 다양한 그림을 그릴 수 있는 공간을 제공해준다. 해상도 독립적으로 SVG 그래픽을 활용하고 있어서 그래프를 그리거나 게임 그래픽이나 다른 기타 이미지를 실시간으로 그려서 사용할 수 있는 기능을 제공해준다. : 기존의 HTML은 매우 정적인 느낌이라면, canvas는 이러한 정적인 ..

* 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의 프로토콜 핸들러를 찾아서 파일에 접근하게 된다. 만약 프로토콜이 명시되지 않았다면 서버 로컬의 일반적인 파일로 판단하여 찾게 된다. 만약 로..