-
MIT 라이센스 링크는 이제 mit-license.org로
지금까지 많은 사람들이 Open Source Initiative의 MIT 라이센스 페이지를 이용하여 MIT 라이센스를 명시해 왔습니다. 왜냐하면 라이센스 전문을 복사해서 쓰는 번거로움을 피할 수 있었기 때문이죠. 보통 권리자의 이름...
Category: 자료 - 웹개발, Reactions: 9, Views: 809,267, Author: 파이어준
-
Node.JS와 Express를 이용한 디렉터리 파싱
어떠한 데이터라도 받기만 하면 비주얼라이제이션하는 데에는 자신있다고 자부해 왔습니다. 그러나 며칠간 고민에 빠져들게 하는 과제가 하나 생겼습니다. 그것은 바로 '/dir1/dir2/file.name'과 같은 형식으로 반환되...
Category: 자료 - 웹개발, Reactions: 7, Views: 466,848, Author: 파이어준
-
아이폰 4S의 제품 슬라이드로 배우는 애니메이션 기법
애플 홈의 아이폰 4S 제폼 웹페이지에서 메인 비주얼를 장식하는 슬라이드는 총 6개의 애니메이션 시퀀스로 구분된 제품 특징들로 구성되어 있습니다. 이 제품 슬라이드를 구현하는 CSS 애니메이션과 자바스크립트...
Category: 자료 - 웹개발, Reactions: 11, Views: 225,000, Author: 파이어준
-
Node.JS에서 대용량 파일 전송을 미친듯 빠르게
요즘 OpenStack Object Storage(Swift)를 가지고 놀고있습니다. Swift는 아마존(Amazon)의 S3 서비스와 유사한 오픈소스화 된 오브젝트 스토리지 서비스이며 최근 주목받는 클라우드 솔루션입니다. 두드러진 특징은 ReSTful API를...
Category: 자료 - 웹개발, Reactions: 18, Views: 181,108, Author: 파이어준
-
섹시한 자바스크립트 코딩 컨벤션
자바스크립트를 코딩함에 있어서 그동안 습득했던 문법 규칙, 팁, 노하우, 등을 이곳에 정리합니다. 여기에서 다루는 내용은 읽는 사람에 따라서는 저수준 리팩토링일 수 있고, 성능 최적화일 수도 있고, 가독성...
Category: 자료 - 웹개발, Reactions: 32, Views: 81,370, Author: 파이어준
-
HTML5를 이용한 네이티브 앱 개발 도구들
새로 들어간 회사일로 HTML5를 이용하여 네이티브 앱 개발을 할 수 있는 도구들을 조사했습니다. 대표적으로 Appcelerator에서 개발한 Titanium과 Nitobi에서 개발한 PhoneGap이 있습니다. 이들은 급변하는 환경에 발빠르게 ...
Category: 자료 - 웹개발, Reactions: 11, Views: 175,647, Author: 파이어준
-
순수 자바스크립트로 만들어진 로더 - spin.js
Felix Gnass씨가 배포한 spin.js는 추가적인 이미지나 CSS를 호출하지 않고 순수 자바스크립트만으로 만들어지는 로딩 알리미입니다. 특정 자바스크립트 라이브러리에 종속적이지 않으며, IE6에서도 사용할 수 있습니다...
Category: 자료 - 웹개발, Reactions: 5, Views: 136,141, Author: 파이어준
-
Nine Image Expander Thing
Chris Coyier씨는 예술가인 Zoran Pekoviċ씨의 플래시로 만들어진 작품을 HTML, CSS, 그리고 약간의 자바스크립트를 이용하여 보여지도록 변환했습니다. 파이어폭스와 웹킷 계열 브라우저(사파리, 크롬 등)에 정상적으로 ...
Category: 자료 - 웹개발, Reactions: 1, Views: 104,333, Author: 파이어준
-
사이트 미니맵(아웃라인) 위젯 추가
jQuery.fracs은 현재 보고있는 페이지의 뷰포트(보여지는 일부분)와 상호 작용하여 특정한 요소들이 정해진 조건으로 뷰포트에 지속해서 노출될수 있도록 만들어주는 jQuery용 플러그인 입니다. 브라우저의 창 크기에...
Category: 자료 - 웹개발, Reactions: 3, Views: 75,250, Author: 파이어준
-
실시간 스타일시트 변동사항 자동반영 - Vogue
크로스-브라우저 이슈를 가지각색으로 안고있는 스타일시트를 다루는 작업은 클라이언트-사이드 개발자들을 매우 피곤하게 합니다. 코드를 수정하고 여러 브라우저에서 확인하고 다시 수정하고 확인하는 테스트...
Category: 자료 - 웹개발, Reactions: 8, Views: 64,576, Author: 파이어준
-
Cloud9 IDE 기능 확장하기
Cloud9 GitHub에 놀러갔다가 뭔가 심상찮은 변화가 있는 듯하여 "git pull" 때렸더니 소스가 주룩주룩 갱신됩니다. 서브 모듈들도 왕창 업데이트 되었더군요. 참고로 저는 devel 브랜치를 빌드해서 운용합니다. 로그인 기...
Category: 자료 - 웹개발, Reactions: 3, Views: 102,570, Author: 파이어준
-
Socket.IO 학습 - 패킷을 절약하여 효율성 높이기
이전 학습에서 Socket.IO의 퍼블릭/브로드캐스트/프라이빗 전송 개념에 대해 알아보았습니다. 프라이빗 전송을 이용하면 특정 대상에게만 패킷을 소비할 수 있다는 사실을 알 수 있었죠. 이를 응용하여 이 번 시간에...
Category: 자료 - 웹개발, Reactions: 7, Views: 66,499, Author: 파이어준
-
Socket.IO 학습 - 퍼블릭/브로드캐스트/프라이빗 구분
퍼블릭/브로드캐스트/프라이빗 전송 개념은 Socket.IO를 사용하면서 익혀야할 중요한 서버-사이드 개념입니다. 퍼블릭(Public)은 발송자를 포함한 모든 클라이언트들에게, 브로드캐스트는 발송자를 제외한 다른 모든...
Category: 자료 - 웹개발, Reactions: 4, Views: 50,455, Author: 파이어준
-
Socket.IO 사용시 집고 넘어야 할 한 가지
웹소켓과 폴링(polling)방식의 소켓이 공존하는 Socket.IO를 사용해 보면서 간과해서는 안될 점에 대해서 별도의 포스트로 작성합니다. 이전 포스트에 작성한 내용이지만 주제와 무관하여 다시 작성했습니다. 지금까...
Category: 자료 - 웹개발, Reactions: 10, Views: 64,674, Author: 파이어준
-
Socket.IO 0.8.2 릴리즈 - MozWebSocket 지원
Socket.IO는 요 며칠간 하루 간격으로 메이저, 마이너 업데이트를 정신없이 하고 있습니다. 수정/보완이 필요한 변동사항은 없다고 합니다. 조금 살펴보니 0.8.2부터는 파이어폭스 6에 실험적으로 들어가 있는 웹소켓...
Category: 자료 - 웹개발, Reactions: 1, Views: 92,796, Author: 파이어준
-
Node.JS용 MVC 프레임워크 Express - 문서 번역
Node.JS용 MVC 프레임워크인 Express를 사용해 보면서, 쓰면 쓸수록 잘 만들었다는 생각이 들어 학습에 목적을 둔 날번역을 주말내내 진행했습니다. 생각보다 양이 많지 않아 약 50% 정도 진행되었으며, 주중으로 마무리...
Category: 자료 - 웹개발, Reactions: 16, Views: 176,336, Author: 파이어준
-
Cluster를 이용한 Node.JS의 멀티-코어 서버 관리
얼마전 LearnBoost에서 개발한 Cluster라는 Node.JS용 모듈을 알게되었습니다. 이 모듈은 노드 애플리케이션을 멀티-코어로 구동시켜 줍니다. 마스터, 워커로 간단하게 구성된 계층구조를 가지며 워커는 하나의 물리적인...
Category: 자료 - 웹개발, Reactions: 7, Views: 88,343, Author: 파이어준
-
리얼타임 서버 스테이트 비주얼라이제이션
지난번에 소개한 Jason Davies씨의 websocket-activity-monitor 소스 리파지토리를 포크해서 재구성해보았습니다. 이것은 실시간으로 서버의 활성상태를 모니터링하는 프로젝트입니다. iostate에서 흘려주는 정보들을 조금더...
Category: 자료 - 웹개발, Reactions: 12, Views: 71,216, Author: 파이어준
-
Socket.IO를 이용한 리얼타임웹 구현하기
Socket.IO가 왜 크로스-브라우저를 지원하는지, 어떻게 구동되는지 이해하기 위해 소스를 살짝 들여다 보았습니다. Socket.IO에서 제공되는 이벤트 핸들러 외 nativeJSON 애뮬레이션 그리고 코드의 대부분이 통신 방식에...
Category: 자료 - 웹개발, Reactions: 12, Views: 138,637, Author: 파이어준
-
Node.JS와 Socket.IO를 이용한 웹채팅
웹소켓을 설치하려고 참 별짓을 다했습니다. jetty7쪽으로 방향을 잡았다가 웹소켓 서버 구현은 Node.JS가 효율적이라는 말에 솔깃하여 RPM으로 설치한 JDK, Jetty서버 다 지워버리고 안정적이라는 node-v0.4.10.tar.gz 받아서...
Category: 자료 - 웹개발, Reactions: 16, Views: 258,179, Author: 파이어준
-
자바스크립트로 SVG 지원여부 확인하기
푸하하! 결국에는 SVG 로고를 홈페이지에 적용했습니다. 위 화면은 적용후 파이어폭스 5에서 300% 확대하여 캡쳐한 화면입니다. SVG지원 여부를 판단하기 위한 스크립트를 서너개 찾았는데 그 중에서도 애플에서 사...
Category: 자료 - 웹개발, Reactions: 14, Views: 124,932, Author: 파이어준
-
네비게이션 메뉴에 SVG 적용한 애플홈
최근 홈페이지 리뉴얼 프로젝트를 중간에 인수받아 우여곡절 끝에 마무리하고 성공적으로 오픈했습니다. 안정화 기간이라서 여러 개선/교정/변경 사항들이 속출하고 있는 가운데 참 재미있는 항목이 하나 있었습...
Category: 자료 - 웹개발, Reactions: 23, Views: 93,621, Author: 파이어준
-
Reflow 원인과 마크업 최적화 Tip
CSS를 이용한 복잡한 페이지 디자인과 Javascript를 이용한 동적변화가 매우 다양하게 이용되고 있는 상황에서 이에 따른 속도저하 등의 문제점이 발생하고 있다. 이를 원천적으로 해결할 수는 없겠으나 조금이라도...
Category: 자료 - 웹개발, Reactions: 0, Views: 24,700, Author: 파이어준
-
웹캠과 페이스 트래킹을 이용한 패럴랙스 효과
이번에도 웹캠을 이용한 페이스 트래킹을 이용하여 패럴랙스 효과에 적용해 보면 재미있겠다는 생각이 떠올라 만들었습니다. 얼굴인식을 시작하면 웹캠화면은 사라지고 현재 얼굴이 위치한 곳에 빨간 사각형이...
Category: 자료 - 웹개발, Reactions: 5, Views: 352,814, Author: 파이어준
-
웹캠을 이용한 페이스 트래킹
자바스크립트 얼굴인식 엔진을 이용하여 웹캠에서 출력되는 영상에 실시간 면상 추적 기능을 만들면 재미있겠다는 생각이 들어 급조해 보았습니다. Video conferencing API는 아직도 드래프트 상태더군요. 왠 뻘짓이냐...
Category: 자료 - 웹개발, Reactions: 5, Views: 41,850, Author: 파이어준
-
자바스크립트와 HTML5 Canvas를 이용한 얼굴인식
Devon Govett씨는 자바스크립트와 HTML5의 Canvas API를 이용하여 사진에서 얼굴을 발견하는 프로그램을 작성했습니다. iPhoto나 Picasa에서 제공하는 얼굴 감지 기능과 같은 것입니다. 얼굴을 감지해 내는 알고리즘은 C기...
Category: 자료 - 웹개발, Reactions: 11, Views: 77,691, Author: 파이어준
-
WebGL 레슨 5 - 텍스쳐에 대하여
다섯 번째 WebGL 레슨에 오신 것을 환영합니다. 이 학습은 "NeHe OpenGL의 여섯 번째 튜토리얼"을 바탕으로 하고 있습니다. 이번 레슨에서는 지금까지 만들었던 3D 오브젝트에 텍스처(Texture)를 입혀봅니다. - 별도로 준비...
Category: 자료 - 웹개발, Reactions: 7, Views: 34,272, Author: 파이어준
-
WebGL 레슨 4 - 실제 3D 개체
네 번째 WebGL 레슨에 오신 것을 환영합니다. 이번에는 실제 3D 개체를 화면에 그려봅니다. 이 학습은 "NeHe OpenGL의 다섯 번째 튜토리얼"을 기반으로 하고 있습니다. 다음 동영상은 이번 학습에서 만들어 볼 WebGL 컨텐...
Category: 자료 - 웹개발, Reactions: 10, Views: 29,389, Author: 파이어준
-
WebGL 레슨 3 - 회전 운동
세 번째 WebGL 레슨에 오신 것을 환영합니다. 레슨 2에 이어 이번 레슨에서는 객체가 회전 운동을 할 수 있도록 합니다. 이번 학습은 NeHe OpenGL의 네 번째 튜토리얼을 바탕으로 합니다. 다음 동영상은 이번 레슨에서...
Category: 자료 - 웹개발, Reactions: 4, Views: 34,087, Author: 파이어준
-
WebGL 레슨 2 - 색상 추가
두 번째 WebGL 레슨에 오신 것을 환영합니다. 레슨 1에서 만든 삼각형과 사각형에 색상을 추가하는 방법에 대하여 알아보겠습니다. 이번 학습 역시 NeHe OpenGL 세 번째 튜토리얼을 바탕으로 하고 있습니다. 다음은 학...
Category: 자료 - 웹개발, Reactions: 7, Views: 31,775, Author: 파이어준
-
WebGL 레슨 1 - 삼각형과 사각형
첫 번째 WebGL 레슨에 오신것을 환영합니다. 이 학습은 게임 개발자를 위한 3D 그래픽 학습 수단으로 인기가 높은 NeHe OpenGL 두 번째 튜토리얼을 바탕으로 하고 있습니다. 고작 삼각형과 사각형이라니, 어찌보면 흥미...
Category: 자료 - 웹개발, Reactions: 21, Views: 74,753, Author: 파이어준
-
체크박스 라디오버튼 스크롤바로 만든 게임 - BreakDOM
BreakDOM은 Hakim El Hattab씨가 만든 고전 게임인 블록깨기입니다. 스크롤바는 플레이어, 라디오버튼은 볼, 체크박스는 블록으로 삼았습니다. 기발하네요. jQuery 라이브러리를 사용하고 있으며, 자바스크립트 원본 소스...
Category: 자료 - 웹개발, Reactions: 12, Views: 48,342, Author: 파이어준
-
WebGL 레슨 0 - 시작하기
WebGL을 스스로 학습하기 위한 목적으로 Giles Thomas씨가 운영중인 Learning WebGL의 레슨을 번역하며 실행해 보기로 마음먹었습니다. Giles씨 역시 WebGL을 학습하기 위한 목적으로 시작한 레슨이라고 합니다. 여기에 소개...
Category: 자료 - 웹개발, Reactions: 28, Views: 80,837, Author: 파이어준
-
요소들아 부들부들 떨어라! - jRumble
페이지내 모든 HTML 요소를 부들부들 떨게 만들어 주는 jQuery 플러그인인 jRumble을 소개합니다. 아래와 같은 옵션 수치를 조정하여 다양한 떨림 효과를 부여할 수 있으며, 마우스오버, 클릭, 마우스다운 이벤트 또는...
Category: 자료 - 웹개발, Reactions: 6, Views: 25,958, Author: 파이어준
-
Canvas 요소를 쉽게 다루는 jQuery 플러그인 - gury
Gury는 Canvas 요소를 이용하여 간단하게 개체를 렌더링하거나 애니메이션을 추가하고, 게임과 같은 인터랙션 컨텐츠를 손쉽게 구현할 수 있도록 도와주는 jQuery용 플러그인입니다. 사용 방법은 다음과 같습니다..
Category: 자료 - 웹개발, Reactions: 5, Views: 32,429, Author: 파이어준
-
프론트-엔드 엔지니어링
프론트-엔드 업무에 대해 논란이 되고 있는 듯하여 제가 경험한 것에 빗대어 노가리나 풀어보려고 합니다. 우리 회사에는 프론트-엔드라는 명확한 포지션이 있습니다. 처음부터 있던건 아니었지만 모던 웹을 개...
Category: 자료 - 웹개발, Reactions: 32, Views: 25,943, Author: 파이어준
-
HTML5 오디오 플레이어 - XEN
CSS3를 이용하여 umbrUI를 만든 Simon씨가 최근 작업한 음악 재생기인 XEN 플레이어입니다. jQuery 라이브러리와 jPlayer 플러그인을 기반으로 만들어 졌으며, 재생/일시정지 기능을 가지고 있습니다. CSS3를 이용하여 간결...
Category: 자료 - 웹개발, Reactions: 23, Views: 45,350, Author: 파이어준
