객체지향 프로그래밍_자바스크립트 (Object-Oriented Programming, OOP) 객체 지향 프로그래밍은 컴퓨터 프로그래밍의 한 패러다임입니다. 컴퓨터 프로그램을 명령어의 목록이 아닌 여러개의 독립된 단위, 즉 "객체"들의 모임으로 파악하는 방법입니다. 이러한 방법은 프로그램을 유연하고 변경이 용이하게 만들기 때문에 대규모 소프트웨어 개발에 많이 사용하고 있습니다. 또한, 보다 직관적인 코드 분석을 가능하게 합니다. 이러한 객체 지향 언어의 기본 구성 요소는 다음과 같습니다. 클래스 (class)문제 해결을 위해 같은 집단에 속하는 속성(attribute)과 행위(behavior)를 정의한 객체 지향의 기본적인 사용자 정의 데이터형입니다.객체.......

제이쿼리 강좌_제이쿼리 플러그인 살펴보기 자바스크립트 vs. 제이쿼리 var tab1 = new TabMenu("#tabMenu1");tab1.setSelectMenuItemAt(1); $("#tabMenu1").selectTabItemAt(1); 제이쿼리 플러그인 기본 구조 분석 (function($){ $.fn.changeColor = function(){ this.each(function(index){ $(this).css("border", "4px solid #f00"); }); return this; } })(jQuery) $(document).ready(function(){ $("p").changeColor(); }); 제이쿼리 플러그인 기본 구조는 위와 같습니다. 구조를 살펴보면 this.each()가 맨 처음 나옵니다. 여기선 this는 changeColor를 호출한 jQuery객체를 가리키며 each()메소드를 호출하.......

그런트(Grunt)_자바스크립트 프로젝트 자동화 도구 그런트는 Task중심의 빌드 도구로서 많은 프론트 웹개발자에게 꼭 필요한 프로그램입니다. 대항마로는 Glup와 같은 새로운 도구가 있습니다. npm을 기반으로한 모듈의 의존성인 package.json 파일이 실행시 필요합니다. npm install -g grunt-cli 명령어를 사용하여 그런트 테스크 러너에 필요한 인터페이스를 먼저 설치한 뒤 grunt를 설치해 주시면 됩니다. package.json을 살펴보면 다음과 같습니다. 아래에서 grunt-contrib- 의 의미는 그런트 개발팀에서 개발한 공식 플러그인이라고 합니다. { "name": "my-project-name", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.5", "g.......

HTML5 강좌_ Data 속성 사용하기 data-* attributes의 등장으로 개발자는 더 이상 classList, 비기준 속성, setUserData 사용없이HTML 시멘틱 마크업게 맞게 엑스트라 정보를 엘리먼트/태그에 명시할 수 있게 되었습니다.놀랍게도, 이를 사용하는 문법은 매우 간단합니다.data-를 시작으로 뒤에는 어떠한 이름도 올 수 있습니다.주의할점이 있다면 뒤에는 대문자가 올 수 없으며 한 글자 이상을 꼭 써주셔야 합니다. 위의 데이터를 자바스크립트에서 읽는 방법또한 매우 간단합니다.바로, getAttribute() 메서드를 사용하면 됩니다.하지만, 좀 더 공식적으로는 dataset을 통한 DOMStringMap을 추천합니다. 우선 id로 해당 엘리먼트롤 불러온 뒤 변.......

Node.js 강좌_ 서버설치 및 기본 사용법 1. Node.js 소개/설치Node.js는 구글의 V8 자바스크립트 엔진을 기반으로 서버 사이드 웹 어플리케이션 제작을 위한 플랫폼 환경을 제공합니다. 특히, V8 가상 머신은 ECMA 스크립트 표준을 준수하기 때문에 자바스크립트의 새로운 기능을 브라우저가 항상 제공하고 있습니다. 기존 인터프리트 방식에서 JIT(Just in Time) 방식을 사용해서 즉시 기계어로 컴파일이 가능하기 때문에 큰 성능향상을 가져왔습니다. 또한, 단일 스레드 모델과 Non-blocking I/O를 채택하여 작업 수행 시간을 크게 단축 시켰습니다. 우선, 맥OS를 기준으로 Node.js를 설치하는 하도록 하겠습니다. 공식 사이트인 https://nodej.......

웹성능 최적화_브라우저 속도 향상 빠른 웹사이트를 구축하는데 메모리 관리는 매우 중요합니다. 오늘날, 대부분의 자바스크립트 런타임들은 가비지 컬렉션(garbage collection)을 구현하고 있습니다. 하지만 이러한 자동 메모리 관리로 인해 메모리를 찾는 동안 런타임 전체가 멈춰 버립니다. 응용프로그램의 사용량이 늘어나면서 사용되지 않는 객체를 찾아 힙(heap: 브라우저가 사용하는 메모리) 전체를 뒤지는 데 필요한 시간이 늘면서 결국 사용자는 불편함을 느낍니다. 웹 성능 최적화와 관련된 또 하나로 가상 메모리가 있습니다. 운영체제에는 실제 물리적 메모리와 가상 메모리가 있습니다. 물리적 메모리는 컴퓨터의 RAM에 할당되는 것.......

CSS 강좌_폰트/텍스트 숨김처리 마크업을 하다보면 화면상에서는 보이지 않지만스크린 리더기와 같은 보조기술을 통해 내용을 전달해야 할 때가 있습니다.이럴 때 사용하는 것이 바로 CSS 텍스트/폰트 숨김 처리 방법입니다. 숨김처리를 하는 방법에는 여러 가지가 있습니다.오늘든 간단한 것들에 대해 알아 보도록 하겠습니다.예전에 포스팅한 "이미지 대체텍스트 기법"을 참고하셔도 좋습니다.이번 포스팅은 css의 매우 기본적인 내용이라아마 이 글을 보시는 많은 분들에게 매우 쉬운 내용일 것입니다:)그냥 간단히, 복습 차원에서 봐주세요! 1. 우선 간단히, visibility:hidden 과 display:none에 대해 알아보겠습니다.두 스타일 모두 텍스트.......

HTML강좌_웹접근성 교육_WAI-ARIA 소개 웹콘텐츠는 위젯, 구조, 행동에 관한 시멘틱 정보가 필요합니다. 이러한 정보들은 스크린 리더기와 같은 도움을 주는 기계를 통해서 몸이 불편한 사람들에게 정확한 정보를 제공합니다. 이번 아티클에서는 이와 연관되어 있는 role, states, 그리고 properties 에 관한 내용을 알아 보도록 하겠습니다. 이러한 기능들은 접근성을 향상 시키며 웹 콘텐츠와 어플리케이션에 관한 명확한 정보를 전달해줍니다. 이 글의 내용은 다음 사이트를 참고하였습니다. http://www.w3.org/WAI/intro/aria.php WAI-ARIA를 사용함으로써 사용자는 커스텀 위젯에 관한 정확한 정보를 얻을 수 있습니다. 이는 웹에대한 접근.......