All-round programmer

* Closure는 자바스크립트에서 수 많은 응용들을 할 수 있는 정말로 중요한 개념이나 자바스크립트라는 언어를 더욱더 빛내줄 수 있는 특징이다. Closure를 모르고 자바스크립트를 개발하는 것은 10년전의 웹 언어 중심의 개발 방법론에 머무르고 있는 것과 같은 것이기 때문에 10년전 웹개발자에서 진정한 자바스크립트 개발자로 나아가기 위한 기본을 이제부터 들여다보자. - 이전 글 2012/12/10 - [속깊은 자바스크립트 강좌] 시작 (예고편) 2012/12/17 - [속깊은 자바스크립트 강좌] 자바스크립트의 Scope와 Closure 기초 2013/01/07 - [속깊은 자바스크립트 강좌] function declaration vs function expression 차이점 2013/01/10 - ..

* 이번에는 자바스크립트의 최대 강점이자 가장 독특한 특징 중 하나인 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 - [속깊은 자바스크립트 강좌] 자바..

* 이번에는 많은 개발자들이 처음으로 자바스크립트를 접하고 가장 헷갈려하는 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가..

* 이번에는 저번의 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..

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

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

* 이번에는 이전의 라이프사이클에 이어서 앱을 실행 중일때 설정이 바뀌는, 대표적인 예로 화면 회전이 일어나는 경우 처리하는 방법에 대해서 알아보자. 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 ..

* 이번에는 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..

* 이론공부는 지긋하다! 잠시 외도를 해서 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?: 기존의 웹이라하면 텍스트와 정보 기반으로 형성되어왔다면 이제는 다양한 창의적인 표현과 데이터 비쥬얼라이제이션과 정보를 잘 효과적으로 보여주는 것이 중요해지면서 그래프나 다양한 그래픽과 미디어들이 활용되기 시작했다. 이..

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

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

* 이번에는 간단한 인터페이스 구현과 다른 Activity로 넘어가는 방법을 알아보자. 2012/11/05 - [Android(안드로이드) 앱 개발 기초] Eclipse 개발환경 설정하기, Android SDK 설치하기 2012/11/07 - [Android(안드로이드) 앱 개발 기초] 안드로이드 프로젝트 생성하고 에뮬레이터로 앱 실행하기 * 인터페이스 구성 : 안드로이드의 인터페이스는 XML을 기반으로한 문법으로 ViewGroup과 View가 구조적 엮어져 있는 구성을 하고 있다. : ViewGroup은 Linear layout과 같이 보이지 않는 컨테이너를 나타내고, View는 button 또는 text field와 같은 UI 위젯을 나타낸다. * Linear layout 구성하기 : 다시 Eclip..

* 이번에는 기본 앱을 생성해서 에뮬레이터로 실행해보는 것을 해보자. 2012/11/05 - [Android(안드로이드) 앱 개발 기초] Eclipse 개발환경 설정하기, Android SDK 설치하기 * 이클립스로 프로젝트 생성: New > Android Application Project 선택 : 새로운 프로젝트의 이름과 패키지를 입력하고 빌드에 사용할 SDK와 최소요구 SDK를 선택한다.* 최소요구 SDK의 기능들을 기준으로 컴파일이 되기 때문에 대상으로 하는 SDK를 잘 선정해야한다. 어떠한 제품군을 대상으로 개발을 할 것인지, 현재 운영체제 버전별 분포도가 어떻게 되는지에 따라 조사를 하고 결정하는 것이 좋을 것이다. : 버전별 분포 관련글 참고2012/11/07 - [Programming/An..

* 이클립스 개발환경을 설정하고 안드로이드 SDK를 설치하는 방법을 알아보자. 1. 이클립스를 실행2. Help > Install New Software3. 오른쪽의 Add.. 버튼 클릭4. https://dl-ssl.google.com/android/eclipse/를 추가5. Developer Tools 를 체크하고 Next 6. 라이센스 사용에 동의하고 Finish 7. 설치가 완료되면 이클립스 재시작8. SDK Manager를 열어서 Android SDK를 설정 (설치가 안되었다면 Android SDK도 설치하자) * 이렇게 하면 일단 개발환경은 설정된것이다. 다음에는 간단한 앱을 한번 만들어서 실습해보자. 끝. - 다음 글2012/11/07 - [Android(안드로이드) 앱 개발 기초] 안드로이..

* 이번에는 HTML5에 새로 추가된 문서 규격과 관련된 태그들과 문서의 구조화에 대해서 살펴보자. 2012/10/07 - [HTML5 튜토리얼] 공부 시작 - 계획2012/10/25 - [HTML5 튜토리얼] HTML5의 등장 배경과 여러 가지 개발 환경 및 현재 현황2012/11/03 - [HTML5 튜토리얼] 기초 및 기본 구조, 프로그래밍상 기존의 HTML과 바뀐 점 * 새로추가된 태그들- 구조적인 표현을 위해 추가된 태그들 태그: 일반적인 문서나 앱의 섹션을 나타낸다. h1, h2, h3, h4, h5, h6등과 같은 태그와 함께 문서의 구조를 나타낼때 사용할 수 있다. 태그: 문서내의 하나의 독립적인 컨텐츠 부분을 나타낸다. 블로그 엔트리 또는 뉴스 기사 등에 사용 태그: 나머지 문서와는 아주..

* 이번에는 HTML의 기초와 기본구조를 한번 살펴보도록 하자. 2012/10/25 - [Programming Lecture/HTML5] - [HTML5 튜토리얼] HTML5의 등장 배경과 여러 가지 개발 환경 및 현재 현황 : 이전 글에 있었던 XHTML의 해더를 다시한번 살펴보자. 12 : HTML에 익숙하지 않는다면 이게 뭔가 싶을수도 있을 것이고, xhtml에 익숙했던 사람들이라면 지긋지긋하게 외우기도 했을 문서의 형식과 스펙, 그리고 validation 스펙을 정의하는 헤더이다. XHTML에서는 이 헤더가 아주 중요한 역할을 하고 있었다. XHTML은 XML과 동일하게 사용을 하고자 했기 때문에 XML의 엄역한 validation을 똑같이 적용하고자 했던 것이다. xml에 익숙한 사람들이라면 헤..

* 이번에는 저번에 만들었던 틀에서 사용했던 연관배열과 prototype에 대해서 공부해보도록 하자. 2012/10/04 - [Programming Lecture/Javascript Library] - [자바스크립트 라이브러리 만들기] 1. 개요2012/10/04 - [Programming Lecture/Javascript Library] - [자바스크립트 라이브러리 만들기] 2. 시작 - 사전조사 및 설계2012/10/11 - [Programming Lecture/Javascript Library] - [자바스크립트 라이브러리 만들기] 3. 기본 지식 - 모듈과 네임스페이스2012/10/15 - [Programming Lecture/Javascript Library] - [자바스크립트 라이브러리 만들기..

* HTML5에 대한 공부를 시작하기 전에 먼저 HTML의 간단한 역사와 등장 배경 그리고 현재의 HTML5 표준화 상황에 대해서 알아보자. 2012/10/07 - [Programming Lecture/HTML5] - [HTML5 튜토리얼] 공부 시작 - 계획 * HTML (Hyper Text Markup Language): HTML은 웹에서 여러 가지 컨텐츠들을 보여주기 위하여 등장했던 언어이다. 기본적으로 의 여는 태그와 의 닫는 태그로 둘러쌓이는 형식을 취하고 있으며, 그 안의 컨텐츠들도 이러한 여러 가지 태그들로 둘러쌓여서 브라우져에서 뿌려지게 되는 것이다. : 처음에 등장한 것은 기존의 터미널이나 텔넷과 같은 텍스트 기반의 정보 수집에서 벗어나 웹과 브라우져를 통한 정보 수집이 새로운 이슈가 되..

* 이번에는 지난번에 공부했던 내용을 토대로 실제로 적용해서 모듈에 만들어보도록 하자. 2012/10/04 - [Programming Lecture/Javascript Library] - [자바스크립트 라이브러리 만들기] 1. 개요2012/10/04 - [Programming Lecture/Javascript Library] - [자바스크립트 라이브러리 만들기] 2. 시작 - 사전조사 및 설계2012/10/11 - [Programming Lecture/Javascript Library] - [자바스크립트 라이브러리 만들기] 3. 기본 지식 - 모듈과 네임스페이스 * 처음에 설계를 했던대로 네임스페이스는 utree, 그리고 내부에서 tree와 node 객체를 생성하는 기본적인 골격을 프로그래밍 해보자. :..

* 오늘은 라이브러리를 만드는데 필요한 기본 지식인 모듈과 네임스페이스에 대해서 공부하자. 2012/10/04 - [Programming Lecture/Javascript Library] - [자바스크립트 라이브러리 만들기] 1. 개요2012/10/04 - [Programming Lecture/Javascript Library] - [자바스크립트 라이브러리 만들기] 2. 시작 - 사전조사 및 설계 * 배경: 초창기 웹 개발이 자바스크립트 이루어지기 시작했을 때에는 자바스크립트는 HTML 페이지의 상단 : 이번에는 YUI를 한번 보자. 아래는 야후의 유용한 자동완성 위젯의 예를 가져온 것이다.- 참고 : http://developer.yahoo.com/yui/autocomplete/var myAutoCom..

HTML5에 대해서 공부를 하면서 그 내용들을 정리하고자 한다. 앞으로 정리하고자하는 내용은 다음과 같다. [HTML5 튜토리얼] HTML5의 등장 배경과 여러 가지 개발 환경 및 현재 현황[HTML5 튜토리얼] 기초 및 기본 구조, 프로그래밍상 기존의 HTML과 바뀐 점[HTML5 튜토리얼] HTML5에 추가된 Element들 그리고 문서의 구조화[HTML5 튜토리얼] Canvas 기초 강좌[HTML5 튜토리얼] Video와 Audio 태그 기본[HTML5 튜토리얼] 새로운 form element 들[HTML5 튜토리얼] Web storage (localStorage, sessionStorage)[HTML5 튜토리얼] navigator.geolocation 위치 정보 수집 APIWeb SQL Datab..

[Building a Javascript Library] 2. The beginning - state-of-art and basic designing 2012/10/04 - [Programming Lecture/Javascript Library] - [자바스크립트 라이브러리 만들기] 1. 개요 : 구글 검색 결과 - 일단 '트리를 그리는 자바스크립트 라이브러리'를 시작하기 전에, 다른 유사한 라이브러리들은 어떻게 동작하는지 보고 설계를 생각해보는 것도 좋은 방법일 것이다. 구글 검색 결과 트리를 그리는 라이브러리는 아주 '많다'. 상업적 목적이 무료인 라이브러리는 적겠지만, 개인 사용이라면 굳이 구현할 필요는 없을 것이다. 하지만 지금의 목적은 공부를 하기 위한 것이니 그냥 참고만 하자. * dhtmlx..

Building a Javascript Library : 1. Introduction : 최근 HTML5와 함께 새롭게 대두되고 있는 자바스크립트(Javascript)는 오래 전부터 활용이 되어왔지만 최근들어서 jQuery등과 같은 다양한 라이브러리를 통해 개발자들에게 더욱더 쉽게 다가가기 시작하고 있다. 이러한 jQuery 같은 라이브러리를 보면서 '나도 저런 라이브러리를 만들어보고 싶다'라는 생각을 하게 되어서 한번 나만의 라이브러리를 만들어보려고 생각하여 그 과정을 정리해보고자 한다. 지금 기능적으로 다양한 라이브러리를 생각하고 있는데, 지금 당장 자바스크립트로 HTML에 트리구조를 그려줄 수 있는 라이브러리를 만들어보려고 한다. 그러기 위해서 일단 기본적인 구현에 대한 공부를 해야할 것이다. --..