"하엘파파"
1467
-
[비공개] 자바스크립트_JSON 파일 불러오기
자바스크립트_JSON 파일 불러오기 JSON (JavaScript Object Notation) 파일의 정보를 가져오기 위해서제이쿼리의 $.getJSON() 메소드를 사용할 수 있습니다. 하지만 이번 포스팅에서는 순수 자바스크립트 코드로 JSON의 데이터를 객체로 담아보도록 하겠습니다.우선 기본적으로 콜백함수를 기반으로한 2가지 함수가 필요합니다. function init() {loadJSON(function(response) {var actual_JSON = JSON.parse(response);});} function loadJSON(callback) { var xobj = new XMLHttpRequest();xobj.overrideMimeType("application/json");xobj.open('GET', 'data.json', true);xobj.onreadystatechange = function () {if (xobj.readyState == 4 &.......추천 -
[비공개] 프론트엔드 웹개발자 도구_걸프(Gulp)
프론트엔드 웹개발자 도구_걸프(Gulp) 프론트 웹 개발을 하면서 필요한 개발도구를 정리하였습니다.출처는 슬라이드쇼 입니다. -의존성 관리를 위한 도구-웹서버 실행-코드품질관리-전처리보어 : http://bower.io/브라우저파이 :http://browserify.org/ 그런트JS : http://gruntjs.com/걸프JS : http://gulpjs.com/ JS힌트 : http://jshint.com/플로우타입 : http://flowtype.org/리세스 : http://twitter.github.io/recess/ 사스 : http://sass-lang.com/레스 :http://lesscss.org/ 다음은 그런트를 대신할 걸프(Gulp)에 대해 간단히 알아보도록 하겠습니다.우선 그런트와 비교해 걸프의 가장 큰 장점은 속도입니다.이러한 속도향상이 돋보이는.......추천 -
[비공개] 자바스크립트 기초_호이스팅
자바스크립트 기초_호이스팅 자바스크립트에서 호이스팅이란 기본적으로 내장된 기능으로 var 선언문 전에 변수를 사용해도 이미 사용된것으로 간주됩니다. 즉, 변수가 선언되기 전에 사용이 가능하다는 뜻입니다. 우선, 아래 예문을 살펴보면 자바스크립트는 실행시 모든 변수가 선언 됩니다. 아직 변수를 정의하기 전이라 undefined 가 출력되고 선언 이후에 값이 나오는 것을 알 수 있습니다. alert(typeof fn1); // undefinedalert(typeof value1); // undefined var fn1 = function(){ ; };var value1 = 'value1'; alert(typeof fn1); // functionalert(typeof value1); // string 하지만, 함수 리터럴 방식이 아닌 함수 선언문 방식으로 작.......추천 -
[비공개] HTML5_SVG 와 캔버스 (canvas) 비교 분석
HTML5_SVG 와 캔버스 (canvas) 비교 정리 SVG SVG는 Scalable Vector Graphics의 약자로 메모리 내에서 유지되며 렌더링시 코드 결과를 통해 조작 할 수 있는 유지 모드 그래픽 모델입니다. 이는 직접 실행모드와 반대되는 개념으로 두 모델 모두 HTML5에서 제공됩니다. 이는 1999년 Microsoft와 Adobe의 제안에 대한 대응으로 도입 되었다고 합니다. 요소가 문서에 추가되면 이 요소는 처럼 동작합니다. HTMLDocument에 속하지만 추가적인 인터페이스인 SVGDocument를 포함합니다. 간단한 예제를 보도록 하겠습니다.추천 -
[비공개] 객체지향 프로그래밍_자바스크립트
객체지향 프로그래밍_자바스크립트 (Object-Oriented Programming, OOP) 객체 지향 프로그래밍은 컴퓨터 프로그래밍의 한 패러다임입니다. 컴퓨터 프로그램을 명령어의 목록이 아닌 여러개의 독립된 단위, 즉 "객체"들의 모임으로 파악하는 방법입니다. 이러한 방법은 프로그램을 유연하고 변경이 용이하게 만들기 때문에 대규모 소프트웨어 개발에 많이 사용하고 있습니다. 또한, 보다 직관적인 코드 분석을 가능하게 합니다. 이러한 객체 지향 언어의 기본 구성 요소는 다음과 같습니다. 클래스 (class)문제 해결을 위해 같은 집단에 속하는 속성(attribute)과 행위(behavior)를 정의한 객체 지향의 기본적인 사용자 정의 데이터형입니다.객체.......추천 -
[비공개] 제이쿼리 강좌_jQuery 플러그인 살펴보기
제이쿼리 강좌_제이쿼리 플러그인 살펴보기 자바스크립트 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)_자바스크립트 프로젝트 자동화 도구
그런트(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 attribute 속성 사용하기 with ..
HTML5 강좌_ Data 속성 사용하기 data-* attributes의 등장으로 개발자는 더 이상 classList, 비기준 속성, setUserData 사용없이HTML 시멘틱 마크업게 맞게 엑스트라 정보를 엘리먼트/태그에 명시할 수 있게 되었습니다.놀랍게도, 이를 사용하는 문법은 매우 간단합니다.data-를 시작으로 뒤에는 어떠한 이름도 올 수 있습니다.주의할점이 있다면 뒤에는 대문자가 올 수 없으며 한 글자 이상을 꼭 써주셔야 합니다. 위의 데이터를 자바스크립트에서 읽는 방법또한 매우 간단합니다.바로, getAttribute() 메서드를 사용하면 됩니다.하지만, 좀 더 공식적으로는 dataset을 통한 DOMStringMap을 추천합니다. 우선 id로 해당 엘리먼트롤 불러온 뒤 변.......추천 -
[비공개] Node.js 강좌_ 서버설치 및 기본 사용법
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에 할당되는 것.......추천
1510개
1051157개
717748개
