FEDev Story

참고문서 : Beautiful Javascript 다음 조건문은 프로퍼티가 존재하는지 확인한다. 만약 존재하지 않으면 메서드를 호출한다. if ( !this.username ) { this.setUsername(); } username이 없으면 username 을 설정한다. 그러나 논리 연산자 OR을 사용하면 더욱 간결한 방법으로 같은 것을 표현할 수 있다. this.username || this.setUsername() username이 존재하지 않으면 username을 설정한다는 표현식이다. 다음은 username에 대한 배열을 살펴보자. username이 없으면 배열에 username을 추가하고자 한다. if ( users.indexOf(this.username) == -1){ users.push(..

출처 : A fresh look at JavaScript Mixins 믹스인이란 프로토타입을 바꾸지 않고 한 객체의 프로퍼티를 다른 객체에게 ‘복사’해서 사용하는 방식이다. 이 믹스인 패턴은 어디에 쓰일 수 있을까? 이 패턴은 기존에 있던 객체의 기능을 그대로 가져가면서 다른 객체에 추가할 때 주로 사용된다. 예를 들어 이벤트를 지원할 때는 상속보다는 믹스인이 더 어울린다. 아래는 믹스인과 관련된 유용한 정보를 담고 있다. https://vnthf.github.io/blog/mixin/ 아래는 원형, 타원, 네모 버튼을 생성하는 사례를 구현하고자 기능과 동작을 정의하는 전통적인 믹스인 오브젝트를 프로토타입 방식으로 정의하였다. var Circle = function() {}; Circle.prototyp..

웹사이트 제작시 많이 사용되는 webfont는 시스템 폰트보다 훨씬 큰 용량을 차지한다. 그런 이유로 웹폰트 제작업체는 webfont의 로딩후 콜백함수를 호출하는 등 작업에 필요한 API를 제공하는게 보통이다. 하지만 API를 제공하지 않는다면? 페이지를 정상적으로 렌더링하려면 이미지, css, 자바스크립트 등 많은 resource 파일들이 정상적으로 먼저 로딩되어야 한다. 하지만 큰용량을 차지하는 webfont의 로딩을 관리하는 API가 제공되지 않는다면 생각지 못한 오류를 만날 수 있다. fontfaceonload.js fontfaceonload.js (github.com/zachleat/fontfaceonload) 플러그인은 webfont가 정상적으로 로딩되었는지 실패하였는 지에 따라 콜백함수를 실..

터치 이벤트 모바일 웹 페이지에선 더블탭에 대한 이벤트가 없다. 따라서 이러한 동작들을 터치 이벤트를 통해 분석해야 한다. 터치 이벤트의 종류 touchstart: 스크린에 손가락이 닿을 때 발생 touchmove: 스크린에 손가락이 닿은채로 움직일 때 발생 touchend: 스크린에서 손가락을 뗄 때 발생 touchcancel: 시스템에서 이벤트를 취소시킬 때 발생. 표준이 없으므로 touchend 이벤트로 간주해도 무방 터치이벤트의 특징 2, 3개의 손가락으로 화면 조작을 하는 경우가 있어서 각 터치에 대한 정보를 모두 포함한다(안드로이드 3.0미만 브라우저는 그렇지 않다). 손가락 접촉면이 크기 때문에 접촉 표면의 평균 좌표값을 얻는다. Mouseover이벤트에 해당하는 이벤트가 없다. 터치 이벤트..

출처 : http://mactraining.tistory.com/148 터미널은 OS X를 떠 받치는(?) 강력한 도구로 GUI 환경에서는 접근할 수 없는 시스템 또는 응용 프로그램의 주요 설정까지도 임의로 변경할 수 있도록 도와줍니다. 강력한 권한이 따르는 만큼 그 책임도 크기 때문에 터미널을 사용하기전에 반드시 (Time Machine을 통해) 시스템을 백업해 둘 것을 권장합니다. 터미널 응용 프로그램 열기 응용 프로그램 → 유틸리티 폴더에서 '터미널' 응용 프로그램을 실행합니다. 다음 그림과 같이 터미널 윈도우가 나타나며 (적색 밑줄로 마킹한) command line에는 '컴퓨터 이름:', '사용자 ID'과 $' 기호와 함께 사용자의 명령을 기다리는 '프롬프트'가 나타납니다. 터미널 윈도우의 외형,..

제이쿼리에서는 이벤트 핸들러의 반환값을 검사해 이벤트 처리를 계속할 지 결정한다. 제이쿼리의 이벤트 핸들러에서는 주로 false를 반환한다. 이 반환 값은 다음 세가지 행동을 수행한다. 제이쿼리가 기본 동작(링크 따라가기, 텍스트 선택 등)을 수행하지 않게 한다. 이벤트 핸들러에서 event.preventDefault()를 호출하더라도 이와 같은 효과를 누를 수 있다. 제이쿼리가 부모 DOM 엘리먼트에서 같은 이벤트를 트리거(이런 동작을 버블링이라 한다)하는 일을 멈추게 한다. 이벤트 핸들러에서 event.stopPropagation()를 호출하더라도 이와 같은 효과를 누릴 수 있다. 해당 이벤트 핸들러 실행을 종료한다. 클릭한 엘리먼트가 이 핸들러 다음에 다른 핸들러에도 연결돼 있다면 순서상 다음번 핸..

자기 실행 익명 함수 (function(){ var private_var = "private"; })(); //변수 private_var이 선언되지 않았다는 에러가 출력된다. console.log(private_var); 위의 함수는 함수명을 지정하거나 함수를 변수에 저장하지도 않고 함수를 바로 실행하기 때문에 자기 실행 익명 함수라고 한다. 자기 실행 익명 함수는 변수 스코프를 제어하는 데 사용하며, 변수가 코드 외부로 노출되지 않게 해준다. 이런 이유로 자바스크립트 플러그인 개발할 때 유용하게 활용할 수 있다. 변수 덮어쓰기를 차단해야 하는 사례로 흔히 제이쿼리와 프로토타입 자바스크립트 라이브러리를 모두 사용하는 경우 두 라이브러리 모두 단일 문자 변수 $를 폭넓게 활용하고 있다. 다음 코드처럼 $ ..

자바스크립트 객체는 프로토타입기반이다. 하지만 new 연산자를 사용하여 클래스 기반으로 객체를 만들 수 있다. 클래스 방식의 객체 만들기 //1단계 : 프로토타입 객체 정의 var proto = { sentence : 4, probation: 2 }; //2단계 : 객체 생성자 정의 var Prisoner = function(name, id){ this.name = name; this.id = id; }; //3단계 : 생성자와 프로토타입 객체 연결 Prisoner.prototype = proto; //4단계 : 객체생성 var firstPrisoner = new Prisoner('Joe', '12A'); var secondPrisoner = new Prisoner('Sam', '2BC'); new연산자..

출처 : http://jsonobject.tistory.com/209 HTML에서 JavaScript 파일 실행하기 HTML 문서에서 독립된 파일의 JavaScript 소스 코드를 실행하기 위해서는 head 또는 body 엘러먼트의 자식 엘러먼트로 아래와 같이 script 엘러먼트를 작성하는 방법이 일반적으로 많이 쓰인다. jQuery를 이용하여 JavaScript 파일을 동적으로 실행해보자 그렇다면 HTML이 아닌 JavaScript 레벨에서 외부의 JavaScript 소스 코드를 실행하는 것이 가능할까? 가능하다. 단순히 script 엘러먼트를 생성하고 src 애튜리뷰트를 부여 후 DOM에 추가하면 된다. jQuery를 사용하면 아래와 같이 한 줄의 명령으로 실행할 수 있다. // Velocity.j..

출처 : http://jsonobject.tistory.com/39 내부 프로젝트에서 코드와 같은 룩업 데이터를 선택하는 화면은 팝업 윈도우로 호출하려는 생각에 팝업 윈도우에서 유저가 선택한 값을 부모 윈도우로 반환하는 방법을 테스트하고 정리하였다. 부모 윈도우에서는 아래와 같이 작성한다. function openNewWindow(url) { var name = '_blank'; var specs = 'menubar=no,status=no,toolbar=no,width=500,height=200'; var newWindow = window.open(url, name, specs); newWindow.focus(); } function getReturnValue(returnValue) { var div =..

출처 : http://insanehong.kr/post/front-end-developer-interview-javascript/Javascript에 관련된 질문들1. Java와 Javascript의 다른 점은 무엇인가요?Javascript 는 애당초 Java 애플릿의 대체자로 만들어지게 된 배경으로 javascript 라는 이름이 사용될뿐 전혀 연관성이 없는 언어이다.java 는 typed static 언어인 반면 javascript는 none typed 언어로서 동적으로 자료형을 검사하게 된다.java는 class 기반 컴파일+인터프린트 oop 언어이지만 javascript 는 prototype 기반의 인터프린트 언어이다.javascript 는 스크립트 언어의 특성상 컴파일 없이 동작하게 됨으로 언어..

출처 : http://ismydream.tistory.com/98event.stopPropagation() event.stopPropagation() 을 이해하기 위해서는 우선 HTML 상에서 사용자 이벤트가 어떻게 전달되는지 이해해야 합니다. 웹에서의 클릭이벤트 전파propagation 의 사전적의미는 전파, 확산입니다. 사용자가 마우스로 웹페이지 내의 버튼을 클릭했을때 대부분의 사람들은 버튼만 반응했다고 생각하게 됩니다. 하지만 웹페이 내부에서는 버튼을 감싸고 있는 부모 태그들 또한 클릭 이벤트에 반응하게 됩니다. 이것을 Bubble Up(버블업)이라고 합니다. 위 슬라이드 우측의 문서구조를 보면 a 태그는 li, ul 의 두개의 부모태그가 있습니다.사용자가 a 태그를 클릭했을때 클릭이벤트는 a 태그..

출처: http://e-rooms.tistory.com/entry/CSS-Linebreak%EC%A4%84%EB%B0%94%EA%BF%88-whitespace-wordwrapwhite-space white-space 속성은 내부에서의 자동 줄 바꿈 여부를 나타내는 값을 지정합니다. 이 속성은 상속됩니다CSSp {white-space: nowrap;} white-space 속성값normal : 기본값으로 글자 줄이 자동으로 바뀝니다. 콘텐츠가 요소의 너비를 초과할 경우 다음 줄로 바뀝니다.nowrap : 줄 바꿈이 실행되지 않습니다. 즉, 콘텐츠가 다음 줄로 바뀌지 않습니다.pre : 줄 바꿈과 기타 공백이 유지됩니다. 이 가능한 값은 !DOCTYPE 선언에서 표준 준수 모드를 지정할 경우에 지원되고 !D..

//새로 고침 방지 기능 실행 function LockF5(){ if (event.keyCode == 116) { event.keyCode = 0; return false; } } document.onkeydown = LockF5; IE8에서 작동하도록 하려면 아래 방법을 사용한다. document.onkeydown=function(e) { var event = window.event || e; if (event.keyCode == 116) { event.keyCode = 0; alert("This action is not allowed"); return false; } }

baidu map api를 사용하는 페이지와 같이 ajax error 경고창이 뜨는 경우, ajax 리퀘스트를 보내고 응답을 받는 도중 새로고침을 하면 에러 메시지가 출력되는 현상이 있다. 아래와 같이 조건문을 넣어줌으로써 에러 메세지가 출력되는 것을 방지할 수 있다. $.ajax({ /* ajax options omitted */ error: function (xmlHttpRequest, textStatus, errorThrown) { if(xmlHttpRequest.readyState == 0 || xmlHttpRequest.status == 0) return; // it's not really an error else // Do normal error handling });

다음은 단축메서드로 $ 함수를 정의하며 이벤트 위임을 사용해서 클릭이벤트가 발생한 'A'태그의 기본동작을 막고 href에서 특정값을 추출하기 위한 구문이다. Gravedigger Save Me var $ = function(id){ return document.getElementById(id); }; $('vids').onclick = function(e){ var src, id; e = e || window.event; src = e.target || e.srcElement; if(src.nodeName !== 'A'){ return; } if(typeof e.preventDefault === 'function'){ e.preventDefault(); } e.returnValue = false; id ..

DOM 업데이트시 브라우저는 화면을 다시 그리고(repaint), 엘리먼트를 재구조화(reflow)하는데, 이 또한 비용이 많이 드는 작업이다. 원칙적으로 DOM 업데이트를 최소화하는 게 좋다. 문서 조각을 생성해 외부에서 수정한 후, 처리가 완전히 끝난 다음에 실제 DOM에 추가하는 방법이 있다. var p, t, frag; frag = document.createDocumentFragment(); p = document.createElement('p'); t = document.createTextNode('first paragraph'); p.appendChild(t); frag.appendChild(p); p = document.createElement('p'); t = document.create..

분리와 점진적 개선을 고려한 이벤트 처리. 자주 사용하는 이벤트 유틸리티는 퍼사드 메서드로 만든다. Click me: 0 var myevent = { 'stop' : function(e){ //퍼사드메서드 // 이벤트 객체를 가져온다. e = e || window.event; // IE 이외의 모든 브라우저 // 기본동작이 수행되지 않게 한다. if(typeof e.preventDefault === 'function'){ e.preventDefault(); } // 이벤트가 상위 노드로 전파되지 않게 한다. if(typeof e.stopPropagation === 'function'){ e.stopPropagation(); } // IE // 기본동작이 수행되지 않게 한다. if(typeof e.retu..

엘리먼트가 data- 속성을 가지고 있다면 data- 속성을 이용하여 엘리먼트를 다음과 같이 선택하여 스크립트 작업을 수행할 수 있다. Search Advanced Search var yOffset = $('[data-section="search"]').hasClass('dark') ? 300 : 500; $content.height(yOffset);

javascript로 PC접속, mobile접속인지 확인하는 방법을 찾아보았다. navigator로 판별 var filter = "win16|win32|win64|mac"; if( navigator.platform ){ if( filter.indexOf(navigator.platform.toLowerCase())

DOM을 깨우치다 (가치에 대한 완전한 이해)코디 린들리 저 안재우 역 비제이퍼블릭 2013.11.22.7.5 네티즌리뷰[3건] 20,000원 → 18,000원(-10%)소개 『DOM을 깨우치다』는 DOM 라이브러리 없이 문서 개체 모델에 대한 스크립트를 작성하여 HTML을 효율적으로 조작하는 방법을 소개한다. 최신 브라우저에 기본적으로 존재하는개념들과 코드를 사용하여 DOM 스크립트에서 JQUERY가 수행하고 있는 역할을 이해하고 오버헤드를 줄여하 하는 모바일 장치 등... 1장. 노드 개요 1.2 노드 개체 유형 모든 노드 유형과 그 값을 출력 1.3 Node 개체로부터 상속받은 하위 노드 개체 1.5 노드의 유형과 이름 식별하기 http://jsfiddle.net/domenlightenment/8E..