javascript

자바스크립트에서 일정 시간 동안 발생하는 프로그램의 움직임을 어떻게 표현하고 나타낼 것인지에 대해 그동안 많은 연구가 있었다. 오늘은 그러한 연구의 결과 중 하나인 비동기성(Asynchrony)에 대해서 알아보고자 한다. 프로그램에서 '지금'에 해당하는 부분 그리고 '나중'에 해당하는 부분 사이의 관계가 바로 비동기 프로그래밍의 핵심이다. 자바스크립트 프로그램은 .js 파일 하나로도 작성될 수 있지만 보통은 여러 개의 덩이(chunk), 곧 '지금' 실행 중인 프로그램 덩이 하나 + '나중'에 실행할 프로그램 덩이들로 구성된다. 가장 일반적인 프로그램 덩이 단위는 함수이다. 여기서 명심해야 할 부분은 프로그램은 '지금'과 '나중' 사이에 중단되지 않으며 이 때 작업이 비동기적으로 처리되어 단지 '지금' ..

자바스크립트 객체와 클래스에 대한 포스팅에 이어 이번에는 프로토타입에 대해서 정리해 보려고 한다. [[Prototype]] 자바스크립트 객체는 [[Prototype]]이라는 내부 프로퍼티가 있고 다른 객체를 참조하는 단순 레퍼런스로 사용한다. [[Prototype]]은 어디에 쓰이는 걸까? 객체 프로퍼티를 참조할 때(myObject.a), 객체는 기본적으로 객체 자체에 해당 프로퍼티가 있는지를 찾고, 만약 있다면 그 프로퍼티를 사용한다. 하지만 만약에 myObject에 a라는 프로퍼티가 없다면 그 다음에는 이 객체의 [[Prototype]] 링크다. 두 번째 예제에서 connectObject는 anotherObject와 [[Prototype]]이 링크되었다. 분명히 connectObject.a 라는 프로..

이번 포스팅에서는 자바스크립트 클래스에 대해서 정리해 보려고 한다. 클래스 이론 클래스와 상속은 특정 형태의 코드와 구조를 형성하며 실생활 영역의 문제를 소프트웨어로 모델링 하기 위한 방법이다. 객체 지향 또는 클래스 지향 프로그래밍에서 데이터는 자신을 기반으로 하는 실행되는 작동(behavior)과 연관되므로 데이터와 작동을 함께 잘 감싸는(캡슐화) 것이 올바른 설계라고 강조한다. 예를 들어, 일련의 문자들은 보통 String이라는 단어를 나타낸다. 여기서 데이터는 문자들인데, 우리는 이 데이터를 가지고 원하는 작업을 하는 것이 관심사이므로 데이터에 적용 가능한 작동들을 모두 String 클래스의 메서드로 설계한다. 그래서 어떤 문자열이 주어지더라도 데이터와 작동이 잘 포장된 String 클래스의 인스..

이번 포스팅에서는 자바스크립트 객체에 대해서 공부한 내용을 정리해 보려고 한다. 객체 타입 객체는 선언적(Declarative, 또는 Literal) 형식과 생성자 형식, 두 가지로 정의한다. 그리고 객체는 언어 타입(Language Types)이라 불리는 7개의 주요 타입 중 하나를 가지고 있다. null undefined boolean number string object symbol(ES6에서 추가) 참고로 여기에서 단순 원시타입(Simple Primitives) 5개(string, number, boolean, null, undefined)는 객체가 아니다. 그리고 복합 원시타입(Complex Primitives)이라는 독특한 객체 하위 타입도 존재한다. 예를 들면 function 타입이 여기에 ..

오늘은 자바스크립트에서 많은 개발자들이 헷갈려하는 this 키워드에 대해서 확실하게 짚고 가보려고 한다. 많은 개발자들은 this를 다음 두 가지 의미로 많이 생각한다. 함수 그 자체를 가리킴 함수의 스코프(scope)를 가리킴 결론적으로 둘 다 올바른 의미로 이해한 것은 아니다. 하나씩 설명해 보려고 한다, 자기 자신으로의 this 함수가 내부에서 자기 자신을 가리킬 일이 언제 있을까? 재귀 로직이 들어가는 경우도 있고 최초 호출 시 이벤트에 바인딩 된 함수 자신을 언바인딩 할 때도 자기 참조가 필요하다. 아래의 코드는 함수가 this로 자기 참조를 할 수 없다는 것을 보여주는 예제이다. foo.count = 0을 하면 foo라는 함수 객체에 count 프로퍼티가 추가된다. 하지만 this.count에..

JavaScript ES6에서 기존의 ES5와 비교해 보았을 때 많은 변화가 생겼다. 그 중의 하나는 ES6에서 컴포넌트 정의를 위한 모듈 형태를 지원한다는 것이다. 이 과정에서 기존의 자바스크립트에서 모듈을 정의한 방법인 AMD, CommonJS와는 다른 방식으로 모듈을 사용하게 되었다. 바로 import/export 문을 통해서 언어 내부적으로 자바스크립트 모듈 의존성을 지원하게 된 것이다. 이 글은 (과거의 나처럼) 기존의 CommonJS 방식의 require로 모듈을 불러오는 방식과 ES6의 import로 모듈을 불러오는 방식을 혼동하는 사람들을 위해서 작성하게 되었다. 먼저 기존의 CommonJS 방식의 모듈 사용 방식과 비교해 보았을 때 ES6 방식이 가진 장단점을 살펴보고 가자. ES6 방식..