All-round programmer

* 이번에 간단하게 웹을 통해서 몇백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 : 그럼 다시 작업시작! 끝.

* 이번에는 마우스 오버 이미지 배너를 만드는 방법을 알아볼 것이다. 이러한 마우스 오버될 때 이미지가 변경되는 것은 다양한 방법들이 있는데, 이러한 방법들을 해당 태그의 중요도나 위치에 따라서 다르게 구현하는 방법들을 적용하면 UX가 향상된 홈페이지를 만들 수 있을 것이다. 만약 모든 경우에 오직 한가지 방법만 고집한다면 각 방법들의 적용 방법을 익혀서 필요에 따라서 사용한다면 아주 좋을 것이다. - 이전글2013/11/01 - [밑바닥부터 홈페이지 만들기] 예고편2013/11/01 - [밑바닥부터 홈페이지 만들기] HTML5 기본 템플릿, DOCTYPE 종류2014/01/13 - [밑바닥부터 홈페이지 만들기] 최종 목표 예고 - toc21.com2014/01/15 - [밑바닥부터 홈페이지 만들기] n..

* 지난번에 이어서 이번에는 HTML과 CSS로 드롭다운(드랍다운/drop down) 가로형 메뉴를 만드는 것을 해보자. 기존에는 플래시를 이용하거나 복잡한 자바스크립트를 사용해야했지만 이제는 CSS와 HTML만으로도 다양한 효과의 드랍다운 메뉴를 만들 수 있게 되었다. 물론 IE9이상 버전이어야 좀 제대로 보이기는 할테지만 CSS를 기반으로 만들게 되면 IE8에서도 투박하기는 하지만 기능은 제대로 동작하게 된다. 지금까지 있었던 그러한 투박한 드랍다운 메뉴를 생각한다면 CSS3를 얕보고 있는것이다. CSS3는 웹개발자 본인의 능력에 따라서 얼마든지 화려한 기능을 부여할 수 있다. "물론 CSS3는 IE 사용자인 경우 10버전 이상에 한해서 멋지게 되는 것이지만 말이다. 다른 브라우져는 다 잘된다!" *..

* 자바스크립트의 간단한 함수들을 이용하면 진수변환을 아주 쉽게할 수 있다. 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진수 -> ..

* 원래 웹사이트의 아이콘을 먼저 만드는 작업을 하려고 했는데, 디자이너의 작업이 늦어지면 이러한 아이콘 또한 늦게 나오기 마련이다. 따라서, 먼저 대략적인 구조를 받기 전에 요즘 웹페이지에 거의 들어갈만한 메뉴를 html과 css로 만들어보자. 화려한 애니메이션이나 이러한 옵션은 나중에 기획이 확정되면 넣기로 하고 일단 기본적인 틀만 만들어보자. - 이전글 2013/11/01 - [밑바닥부터 홈페이지 만들기] 예고편 2013/11/01 - [밑바닥부터 홈페이지 만들기] HTML5 기본 템플릿, DOCTYPE 종류 2014/01/13 - [밑바닥부터 홈페이지 만들기] 최종 목표 예고 - toc21.com * 작업하던 소스 : 지난번에는 기본적인 템플릿을 만들어서 기본 html 개발을 하기 전에 준비 단계..

* 그동안 퇴근 이후에 짬짬히 만들면서 쓰려고 했던 시리즈가 본업이 바빠지면서 전혀 진행을 못했었는데, 부업으로 개발을 하던 홈페이지가 베타로 오픈을 하게 되어서 일단 현재 베타의 상태를 현재 쓰고 있는 '밑바닥부터 홈페이지 만들기' 시리즈의 최종목표가 될 것이라는 생각이 들어서 먼저 최종 목표와 다루게 될 내용들을 먼저 정리하고자 한다. - 이전 글 2013/11/01 - [밑바닥부터 홈페이지 만들기] 예고편 2013/11/01 - [밑바닥부터 홈페이지 만들기] HTML5 기본 템플릿, DOCTYPE 종류 * 목표 : 뭐든지 목표 설정이 중요하기 때문에, 현재 생각하고 있는 목표는 "toc21.com"의 홈페이지에 나와있는 컴포넌트들에 대해서 만드는 방법들을 설명하는 것이다. http://www.toc..