Web Club

JavaScript/Core & 개념ㆍ용어 검색 결과

해당 글 52건

동기와 비동기 방식(Asynchronous processing model)

동기식 처리 모델 vs 비동기식 처리 모델 해당 내용은 동기식 처리 모델 vs 비동기식 처리 모델 에 대한 글을 발췌한 포스팅임을 알려드립니다. 동기식 처리 모델(Synchronous processing model) 동기식 처리 모델(Synchronous processing model)은 직렬적으로 태스크(task)를 수행한다. 즉, 태스크는 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 작업은 대기하게 된다. 예를 들어 서버에서 데이터를 가져와서 화면에 표시하는 작업을 수행할 때, 서버에 데이터를 요청하고 데이터가 응답될 때까지 이후 태스크들은 블로킹(blocking, 작업 중단)된다. 동기식 처리 모델(Synchronous processing model) 다음은 동기식으로 동작하는 코드로, 순차적..

JavaScript/Core & 개념ㆍ용어 2018. 10. 18. 09:52

생성자 상속과 생성자 훔치기

JS : prototype constructor inheritance & constructor stealing이 포스팅에서는 예제를 통하여 생성자를 상속하고 생성자를 훔치는 코드에 대해 살펴보도록 합니다. prototype constructor inheritance다음의 예제 코드를 살펴보도록 합니다. javascript function Rectangle(length, width) { this.length = length; this.width = width; } Rectangle.prototype = { getArea : function () { return this.length * this.width; }, toString: function () { return "[Rectangle : " + this..

JavaScript/Core & 개념ㆍ용어 2017. 2. 24. 07:00

JavaScript : 프로토타입(prototype) 이해

JavaScript Prototype JavaScript는 클래스라는 개념이 없습니다. 그래서 기존의 객체를 복사하여(cloning) 새로운 객체를 생성하는 프로토타입 기반의 언어입니다. 프로토타입 기반 언어는 객체 원형인 프로토타입을 이용하여 새로운 객체를 만들어냅니다. 이렇게 생성된 객체 역시 또 다른 객체의 원형이 될 수 있습니다. 프로토타입은 객체를 확장하고 객체 지향적인 프로그래밍을 할 수 있게 해줍니다. 프로토타입은 크게 두 가지로 해석됩니다. 프로토타입 객체를 참조하는 prototype 속성과 객체 멤버인 proto 속성이 참조하는 숨은 링크가 있습니다. 이 둘의 차이점을 이해하기 위해서는 JavaScript 함수와 객체의 내부적인 구조를 이해 해야합니다. 이번 글에서는 JavaScript의..

JavaScript/Core & 개념ㆍ용어 2016. 12. 9. 12:05

JavaScript Hoisting (호이스팅, 끌어올리기)

호이스팅(hoisting): 분산된 var 선언의 문제점 자바스크립트에서는 함수 내 여기저기서 여러 개의 var 선언을 사용할 수 있지만, 실제로는 모두 함수 상단에서 변수가 선언된 것과 동일하게 동작하게 됩니다. 이러한 동작 방식을 '호이스팅(hoisting, 끌어올리기)'이라고 합니다. 때문에 함수 안에서 변수를 사용한 다음에 선언하면 로직상의 로직상의 오류를 일으킬 수 있습니다. 자바스크립트는 동일한 유효범위(즉, 동일한 함수) 안에 있는 변수는 var 선언 전에 사용해도 이미 선언된 것으로 간주합니다. 다음의 예제를 살펴보도록 합니다. javascript // 안티 패턴 name = 'global'; // 전역 변수 function func() { console.log(name); // 'unde..

JavaScript/Core & 개념ㆍ용어 2016. 10. 7. 08:50

event 객체의 프로퍼티 및 메서드

이벤트 발생시 콜백함수로 넘어오는 event 객체 이벤트가 발생되면 이벤트에 매개변수로 넘긴콜백함수가 호출되는데, 이때 매개변수로 event 객체를 넘겨줍니다. 이 event 객체의 프로퍼티에는 이벤트 발생 시 얻을 수 있는 정보가 들어 있으며 이벤트 모델의 전파 과정을 컨트롤할 수 있는 메서드와 브라우저의 기본 동작이 발생하지 않도록 하는 메서드가 포함되어 있습니다. Event Object 다음은 event 객체가 넘어오고 프로퍼티와 메서드를 사용한 예입니다. javascript $('selector').on('eventType', function (event) { event.property; // 이벤트 객체의 프로퍼티 값 얻어오기 event.method(); // 이벤트 객체의 메서드 호출하기 })..

JavaScript/Core & 개념ㆍ용어 2016. 9. 29. 09:32

다양한 즉시실행함수 호출패턴

다양한 즉시 실행함수 호출 패턴 가끔 자바스크립트 소스 중에 생소한 패턴의 함수 선언을 본 적이 있습니다. 자바스크립트는 문법, 타입이 엄격하지 않아서 특성에 대해 정확이 이해하고 있지 않다면 해당 코드가 어떤 동작을 하게 될지 짐작하기 어려울 수도 있습니다. 다음의 코드는 우리가 흔히 사용하고 있는 자가실행 함수의 호출패턴입니다. JavaScript (function () { console.log("Hello World!"); })(); (function () { console.log("Hello javaScript!"); }()); 함수를 선언과 동시에 ()괄호 연산자를 바로 사용,호출하여 함수를 즉시 실행하도록 합니다. 다음의 코드는 생소한 패턴의 즉시 실행(자가실행)함수 호출 패턴입니다. Java..

JavaScript/Core & 개념ㆍ용어 2016. 9. 29. 09:31

String 클래스

String 클래스란? String 클래스에는 문자열을 생성하는 기능은 물론 문자열과 관련된 다양한 기능을 가지고 있습니다. 문자열 처리를 문자열 리터럴인 "문자열" 형태로 많이 사용했기 때문에 간과할 수도 있겠지만 사실 문자열 리터럴은 자동으로 String(문자열) 클래스로 변환되어 사용되어 집니다. 주요 기능 String 클래스에서 자주 사용되는 프로퍼티와 메서드는 다음과 같습니다. 프로퍼티 목록 프로퍼티 내 용 (설명) length 문자열 개수 메소드 목록 프로퍼티 내 용 (설명) charAt(n) n번째 문자 구하기 charCodeAt(n) n번째 문자의 코드 값 구하기 concat(str) 문자열 뒤쪽에 str 을 연결해서 새로운 문자열을 만들기 indexOf(substr) substr 문자열이..

JavaScript/Core & 개념ㆍ용어 2016. 9. 29. 09:30

javascript void 연산자

void 연산 void는 단항 undefined 연산자입니다. 피연산자로 무엇을 지정하든간에 연산의 결과는 undefined 값이 됩니다. 구체적인 예를 살펴보도록 하겠습니다. javascript // 피연산자가 숫자 console.log(void 0); // undefined 가 기록 // 피연산자가 문자열 console.log(void "문자열"); // undefined 가 기록 var x = 0; void x++; // 피연산자를 먼저 평가하기때문에 x 는 증가됩니다. console.log(x); // 1 이 기록 console.log(void(x)); // 피연산자를 괄호로 감싼 것은 잘 실행되어 undefined 가 출력 어디에 쓰는지 알기 어려운 연산자이지만 클라이언트 사이드 자바스크립트에서..

JavaScript/Core & 개념ㆍ용어 2016. 9. 29. 09:30

예외 처리 - throw 및 try/catch/finally

throw & try/catch/finally(Exception Handling) 이 글에서는 예외 처리 방식에 대해 알아봅니다. 프로그램이 실행되는 동안 문제가 발생하면 프로그램이 자동으로 중단됩니다. 이럴 경우에 프로그램이 대처할 수 있도록 처리하는 것이 예외 처리(Exception Handling)라고 합니다. 프로그램 실행 중에 발생하는 오류를 예외(Exception)라고 하고, 프로그래밍 언어의 문법적인 오류를 에러(Error)라고 합니다. 예외가 발생하는 이유는 여러가지가 있겠지만 일반적으로 잘못된 코드를 작성했거나 사용자가 개발자가 원하지 않는 방향으로 프로그램을 사용했을 수도 있습니다. 예외는 기본 예외 처리와 고급 예외 처리 두 가지 방법으로 처리합니다. 예외가 발생하지 않게 사전에 해결..

JavaScript/Core & 개념ㆍ용어 2016. 9. 29. 09:30

연관 배열로서의 객체 (=유사배열 객체)

자바스크립트 연관 배열 자바스크립트 객체의 프로퍼티명을 키, 프로퍼티 값을 값이라고 하며 객체 리터럴이 다중값 데이터 표현으로서의 객체라고 할 수 있습니다. 이 글에서는 자바스크립트에서 사용되는 연관 배열과 관련된 용어를 간단히 정리해 보도록 하겠습니다. 일반적으로 숫자를 키로 값을 뽑을 수 있는 데이터 구조를 배열이라고 합니다. 배열은 대부분의 프로그래밍 언어에 있는 기본적인 데이터 구조입니다. 배열의 키는 연속하는 숫자이므로 순서가 있는 값의 모음으로 볼 수 있습니다. 숫자 이외의 키는 대부분 문자열이지만 문자열에 한정되지 않고 임의의 타입인 키를 이용하여 키와 값의 모음을 다루는 데이터 구조를 연관 배열이라고 합니다. 그리고 연관 배열을 맵이나 사전이리고 부르는 언어도 있으며 내부 구현에서는 해시(..

JavaScript/Core & 개념ㆍ용어 2016. 9. 29. 09:29

자바스크립트 constructor & instanceof

constructor property 생성자 인스턴스에는 자신의 생성자함수를 가리키는 속성이 있습니다. 객체를 인스턴스로 만들면 이 객체/인스턴스에는 constructor 라는 속성(프로퍼티)이 자동으로 추가되는데, 이 속성은 해당 객체를 만든 생성자 함수를 가리키게 됩니다. 다음은 사용자 정의의 객체에서 constructor 속성을 사용할 수 있는지를 알아보겠습니다. var obj = {}; // 객체 리터럴로 객체를 생성한 후 obj 변수에 객체를 저장. console.log(obj.constructor === Object); /** * Object() 가 obj 를 만들었으므로 true 가 출력된다. */ console.log(obj.constructor); // Object()인 생성자 함수를 가..

JavaScript/Core & 개념ㆍ용어 2016. 9. 29. 09:29

자바스크립트의 배열(Array) 기초

배열(Array) 배열은 자바스크립트 객체의 특별한 형태입니다. 즉, C나 자바의 배열과 같은 기능을 하는 객체이지만, 이들과는 다르게 굳이 크기를 지정하지 않아도 되며, 어떤 위치에 어떤 타입의 데이터를 저장하더라도 에러가 발생하지 않습니다. 자바스크립트 배열은 어떤 타입이던지간에 그 타입의 데이터를 연속된 공간에 저장하는 자료구조입니다. 그리고 각 데이터 저장 위치는 인덱스를 부여해서 접근할 수 있습니다. 배열 리터럴 배열을 사용하기 위해서는 Array() 를 이용하는 방법도 있지만 포스팅에서는 자주 이용되는 배열리터럴에 대해 알아보겠습니다. 배열 리터럴은 자바스크립트에서 새로운 배열을 만드는 데 사용하는 표기법입니다. 객체 리터럴이 중괄호( {} )를 이용한 표기법이었다면, 배열 리터럴은 대괄호( ..

JavaScript/Core & 개념ㆍ용어 2016. 9. 29. 09:28

자바스크립트에서 함수는 값으로 취급된다

값으로서의 함수 자바스크립트에서는 함수도 객체입니다. 다시말해서 일종의 값입니다. 거의 모든 언어가 함수를 가지고 있지만 자바스크립트 함수가 다른 언어의 함수와 다른 점은 함수가 값으로 사용될 수 있다는 점입니다. 그렇다면 값이라는 것은 어떤 특징을 가지고 있을까? 예를 들어, 값은 어떠한 변수에 'value'라는 문자열을 담을 수 있습니다. var a = 'value'; 값은 어떠한 변수에 'value'라는 문자열을 담을 수 있습니다. value 라는 문자열을 담을 수 있는 이유는 value 라는 것이 값이기 때문입니다. 자바스크립트의 함수 역시도 변수에 담을 수 있는 속성을 가지고 있다고 할 수 있는데 이는 다른 언어의 함수와 다른 점입니다. function a() {} 위에 정의된 함수는 a라는 자..

JavaScript/Core & 개념ㆍ용어 2016. 9. 29. 09:26

디자인 패턴 그리고 모듈

디자인 패턴 (Design Pattern) 자바스크립트는 언어적인 차원에서 라이브러리를 작성하고 관리하는 기능을 제공하지는 않는다. 그러나 디자인 패턴을 사용해 재사용 가능한 독립적인 자바스크립트 라이브러리를 작성할 수 있다. 코드를 작성하는 방식이나 스타일에 대한 이슈는 특정 언어와는 상관없이 어떤 언어를 사용하든 발생할 수 있는 문제다. 디자인 패턴에 관해 설명하자면 디자인 패턴이란 프로그래밍 과정에서 발생하는 특정 이슈들을 해결하기 위해 여러 사람들이 내놓은 해결책등의 코드 패턴들을 일컫는다. 모듈(Module) 프로그램은 작고 단순한 것에서 크고 복잡한 것으로 진화한다. 그 과정에서 코드의 재활용성을 높이고, 유지보수를 쉽게 할 수 있는 다양한 기법들이 사용된다. 그 중의 하나가 코드를 여러개의 ..

JavaScript/Core & 개념ㆍ용어 2016. 9. 29. 09:26

클로저(closure) 그리고 모듈과 네임스페이스

함수 유효범위와 클로저(Closure) 클로저는 외부함수(포함하고 있는)의 변수에 접근할 수 있는 내부 함수를 말합니다. 스코프 체인(scope chain)으로 표현되기도 합니다. 클로저는 세가지 스코프 체인을 가지고 있습니다. 클로저 자신에 대한 접근(자신의 블럭내에 정의된 변수), 외부 함수의 변수에 대한 접근, 그리고 전역 변수에 대한 접근. 이렇게 3단계로 구분할 수 있습니다. 내부 함수는 외부 함수의 변수뿐만 아니라 파라미터에도 접근할 수 있습니다. 단, 내부 함수는 외부 함수의 arguments 객체를 호출할 수는 없습니다. (하지만, 외부 함수의 파라미터는 직접 호출할 수 있습니다.) 함수 유효범위와 클로저 자바스크립트 인터프리터가 함수를 호출하게 되면 인터프리터는 호출 객체(활성화 객체로도..

JavaScript/Core & 개념ㆍ용어 2016. 9. 29. 09:25