본문 바로가기

Dev.

 (341)
11. 자바스크립트의 함수 호출과 this Chapter 11. 함수 호출과 This모든 함수는 실행할 때마다 this라는 객체가 추가된다. 앞 포스팅에서 설명한 arguments 객체와 함께 함수 내부로 암묵적으로 전달되는 것이다. 자바스크립트에서의 this 는 여러가지 이유로 상황에 맞게 모습을 달리한다. (그래서 너무 어렵다. console.log()의 힘을 빌려 연습하자) 함수가 호출되는 방식, 즉 호출 패턴에 따른 this 바인딩을 알아보자. 상황 1. 객체의 메서드를 호출할 때 this 바인딩 객체의 프로퍼티가 함수일 경우 메서드라고 부른다. this는 함수를 실행할 때 함수를 소유하고 있는 객체(메소드를 포함하고 있는 인스턴스)를 참조한다. 즉 해당 메서드를 호출한 객체로 바인딩된다. code>12345678910111213var m..
10. 자바스크립트 내장객체 - arguments Chapter 10. 자바스크립트의 내장 객체 - argument 자바스크립트에서는 함수를 호출할 때 함수 형식에 맞춰 인자를 넘기지 않더라도 에러가 발생하지 않는다. 정의된 함수의 인자보다 적게 인자를 넘겨주면 넘겨지지 않은 인자에 대해서는 undefined 값이 할당되고 정의된 함수의 인자보다 많게 인자를 넘겨주게 되면 초과된 인수는 가볍게 무시된다! 자바스크립트의 이러한 특성 때문에 함수 코드를 작성할 때, 런타임 시에 호출된 인자의 개수를 확인하고 이에 따라 동작을 다르게 해줘야 할 경우가 있다. code> 1234567function func (arg1, arg2){ console.log(arg1, arg2);}func( ); // > undefined undefinedfunc(1); // > ..
9. 자바스크립트의 내장 객체 - 배열 ( Array ) Chapter 9. 내장 객체로서의 배열 배열 객체 객체는 여러 개의 멤버로 구성되지만 이러한 구성 값은 정렬되지 않는다. 객체를 구성하는 멤버에는 고유한 이름이 부여되어 있는데, 특정 값에 접근하려면 이름으로 접근할 수 있다. 하지만 자바스크립트에도 넘버링되어 순차적으로 구성되어있는 객체가 존재한다. 이 경우에는 해당 값의 인덱스를 이용할 수 있다. 이 객체를 배열(array)라고 한다. 배열의 요소로는 다른 배열 객체에 대한 참조 변수, 객체, 함수 등 어떤 데이터 타입의 값도 포함될 수 있다. var ar = new Array( ); var ar = { }; 후자의 방법인 객체 리터럴을 통해 배열 생성하기를 권장한다. Array 도 Object처럼 자바스크립트에서 미리 만들어 놓은 배열 객체의 생성..
Web Component - Ploymer Web Component 재사용 가능한 컴포넌트를 만들 수 있는 표준 기술들의 모음 구성요소 Custom Elements커스텀 태그를 통한 요소 생성 새로운 HTML 요소를 생성하여 다른 요소에 확장한다. HTML ImportsHTML 페이지 로딩 HTML/CSS/JS를 묶음 형태로 사용한다. 단일 URL로 호출한다. 다른 도메인의 리소스를 로딩하기 위해서 CORS 활성화가 필요하다. HTML Templates템플릿 태그 내 태그들은 사용되기 전까지는 파싱은 되나 렌더링되지 않는다. 비활성화 상태의 복제 가능한 DOM chunk Shadow DOMDOM과 스타일의 캡슐화 별도의 스코프를 갖는 DOM을 말한다. 폴리머에서 생성하는 모든 요소들은 shadowDOM으로 처리한다. Polymer Polymer는..
JavaScript Module bundler Webpack, 자바스크립트 모듈 번들러 웹팩 등장배경 Javascript가 많은 곳에서 쓰이게 되면서 모듈화의 필요성 증대되었다.범용적인 목적으로 JavaScript를 사용하기 위해 필요한 선결 조건은 모듈화이다. 모듈화는 세 부분으로 이루어진다. 스코프(Scope) 모든 모듈은 자신만의 독립적인 실행 영역이 있어야 한다. 자바스크립트의 언어적인 특성상 전역변수와 지역변수를 분리하는 것이 매우 중요하다. 정의(Definition) 모듈 정의는 exports 객체를 이용한다. 사용(Usage) 모듈 사용은 require 함수를 이용한다. 브라우저에는 모듈화를 지원하기 위해 Common JS or AMD(Asynchronous Module Definition)의 스펙을 구현한 많은 라이브러리가 있다.그 중 대표적으로 널리 쓰이는 것이 Require J..
크로스 브라우징 이슈에 대응하는 프론트엔드 개발자들의 전략 Cross Browsing 프론트 엔드 개발자를 대상으로 실시한 설문조사 결과 ( 2014 )IE6 때문에 업무량이 얼마나 더 추가되었나요?20~30%!! 대한민국 프론트 개발의 현 주소...안타깝게도 IE 구 버전을 사용하는 고객이 정말 많다... 사실 사용하시면서도 IE 구 버전인지는 모르고 인터넷이라고 알고 계실 것이다.개발자들은 어떻게 해야하는가? 가능만하다면, 직접가서 브라우저를 바꿔주고 싶다.또 모바일 기기들이 등장하면서, 모바일 기기내에 탑재되는 브라우저까지 생각해야 한다. 다행히, ( 다행인지는 모르겠으나... N-Screen... )모바일 기기 내부에 탑재되는 브라우저들은 대체로 HTML5나 ECMAScript5와 같은 최신 기능을 대부분 지원한다.즉, PC보다 라이브러리의 필요성이 상대..
#Javascript 에서의 include ( 외부 소스 코드 삽입하기 ) #JavaScript에서 외부 소스 코드 삽입하기0. evaleval 은 전역객체의 함수 프로퍼티이다.eval 함수를 사용하면 자바스크립트 소스 코드를 동적으로 로드하여 실행할 수 있다.하지만 eval 함수로는 보안상 위험이 존재하기 때문에 그리고 eval 함수 이외에도 동적으로 자바스크립트 소스 코드를 실행할 수 있는 방법이 많이 존재하기 때문에 권장되지 않는 방법이다. 자바스크립트 컴파일러가 미리 최적화시킬 수 없기 때문에 코드 최적화에 대한 이야기에 단골로 등장하는 함수가 eval 함수이다.eval 함수의 파라미터로 넘어온 String 인자는 Javascript Parser에 의해 파싱되고 실행된다. 1. Ajax Loading12345678910111213function require(script..
#반응형 웹과 적응형 웹에 대한 고찰 반응형 웹 디자인 ( RWD; Responsive Web Design ) 반응형 웹다지안은 가로 크기에 변화를 줄 때, 컨텐츠들이 사이즈에 맞춰 유동적으로 재배치 되는 형태. " 너가 어떤 화면 크기를 갖고 있는 디바이스일지 몰라서 모두 다 준비해봤어!걱정은 하지마 너의 디바이스 크기대로 바뀔테니!! " 적응형 웹 디자인 ( AWD; Adaptive Web Design ) 브라우저 크기를 줄여도 한동안 반응이 없다가 정해진 해상도가 되면 레이아웃이 갑자기 재배치 되는 형태. 스크린에 맞는 성능을 보장하지만 모든 디바이스에 맞춘 화면을 설계한다는 것은 불가능에 가깝다. " 너가 그 크기라면 이것을 줄게! 물론 그 크기도 내가 따로 준비했지! 헉헉... " 웹 디자인의 현주소N-Screen의 모바일 시대다...

티스토리툴바