본문 바로가기

JavaScript

(52)
자바스크립트 기본서에 대해서, Basic JavaScript for Beginner 자바스크립트의 영역이 날로 넓어지고 있습니다.일전에는 클라이언트 영역에서 팝업창을 띄우고 사용자들과 약간의 인터랙션을 위해 사용되었던 언어였다면, 현재는 클라이언트를 넘어 서버 측까지 확장을 하였고, 모바일 앱개발까지 그 영역을 뻗치고 있는 언어입니다. Node.js의 등장으로 이제는 IoT 영역에서도 활약을 하고 있는 요즘 가장 Hot한 언어라고 볼 수 있습니다. (하태하태!) 또 Python이라는 언어와 함께, 개발 입문자들이 처음에 접하기 쉽다는 이유로, 언어에 대한 진입 장벽이 낮다는 이유로 많은 사람들이 배우려고 하는 언어입니다. (사실, 저는 이 의견에 동의하지는 않습니다…) 그래서 제가 직접 접해본 자바스크립트에 대한 의견을 정리해보았습니다. 시중에 출시되는 자바스크립트 관련 도서들이 정말 ..
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처럼 자바스크립트에서 미리 만들어 놓은 배열 객체의 생성..
#Javascript 에서의 include ( 외부 소스 코드 삽입하기 ) #JavaScript에서 외부 소스 코드 삽입하기0. evaleval 은 전역객체의 함수 프로퍼티이다.eval 함수를 사용하면 자바스크립트 소스 코드를 동적으로 로드하여 실행할 수 있다.하지만 eval 함수로는 보안상 위험이 존재하기 때문에 그리고 eval 함수 이외에도 동적으로 자바스크립트 소스 코드를 실행할 수 있는 방법이 많이 존재하기 때문에 권장되지 않는 방법이다. 자바스크립트 컴파일러가 미리 최적화시킬 수 없기 때문에 코드 최적화에 대한 이야기에 단골로 등장하는 함수가 eval 함수이다.eval 함수의 파라미터로 넘어온 String 인자는 Javascript Parser에 의해 파싱되고 실행된다. 1. Ajax Loading12345678910111213function require(script..
[JS_Design Pattern] 2. 모듈 패턴 ( Module Pattern ) Module Pattern 자바스크립트의 모듈 패턴은 javascript 의 코드 관리 기법 중 하나로 객체 핸들링을 위한 방법론 중 하나이다. 객체에 유효범위를 주어 private, public을 구분하여 캡슐화를 할 때 사용하는 방법이다. Namespace pattern에 Lexical Scope를 추가한 것으로 보면 된다. Module Pattern 이란, 즉시 실행 함수(Immediately Invoked Function)에 this인자를 넘겨주고 함수 내부에서 exports란 인자로 접근할 수 있는 패턴을 말한다. basic>123(function(){ //something to do})();cs 모듈 패턴을 사용하는 예를 코드를 통해 살펴보자.code>12345678910111213141516..
[JS_Design Pattern] 1. 네임 스페이스 패턴 ( NameSpace Pattern ) NameSpace Pattern 전역 변수를 기초로 하는 JavaScript의 단점 때문에, 여러 스크립트가 한 페이지 안에 함께 있는 소스코드에서는 변수가 많아질 수록 이름이 겹칠 우려가 있다. 이는 협업에서도 상당히 중요한 부분이다. 뿐만 아니라 어느 곳에서도 접근할 수 있는 전역 변수이기에 소스의 신뢰도가 낮아질 수 있다. 이러한 단점들을 보완하기 위한 패턴이 네임스페이스 패턴이다. 네임 스페이스란 구분이 가능하도록 정해놓은 범위나 영역을 의미한다. 이름 그대로, 이름 공간을 선언하여 다른 공간과 구분하도록 하는 것이다. 객체 리터럴 네임 스페이싱(Object Literal NameSpacing) 하나의 전역 객체를 생성한 다음. 모든 함수, 객체, 변수를 이 전역객체에 추가하여 구현하는 방법이다...
$proxy 메소드에 대해서 알아보자. $proxy 메소드에 대해서 알아보자. 123456789function Person(el) { this.name = ''; var self = this; // store reference to this $(el).change(function(event) { self.name = this.value; // captures self in a closure });}Colored by Color Scriptercs this.name에서의 this는 Person이라는 함수를 가리키고 있을 것이다. Person 함수를 내부에서도 가리킬 필요가 있다면 어떻게 해야할까? 우리는 이 함수를 생성한 객체를 가리키고 있는 this를 끌고 내려오기 위해, this의 주소를 self라는 변수에 저장하여 끌고 내려왔다. 이렇게 ..