JavaScript/theory

브라우저/노드 환경에서 모듈, AMD, CommonJS, UMD 알아보기

프론트와 백엔드 공부를 하면서 상당히 혼동을 줬던 개념들이 포함된 개념이다. 브라우저에서 다른 자바스크립트 파일에 선언한 변수들이 같은 공간에서 존재하던 문제도 겪었고 현재 파일에서 다른 파일을 불러올 때 exports/require, export/import 등을 사용해서 불러오는데 무엇을 어느 상황에서 사용해야 하는지, 그리고 왜 babel을 써야 export/import를 사용할 수 있는가..? 등등 여러 문제가 있었다. 그래서 이번 포스팅에서는 모듈이 무엇이고 어떻게 발전해왔으며 프론트와 백엔드에서 어떤 차이가 있는지를 모두 다뤄볼 예정이다. 모듈 모듈을 검색해보면 다음과 같다. 1. (명사) 모듈, 교과목 단위(특히 영국 대학에서 한 교육 과정의 일부가 되는 단위) 2. (명사) 컴퓨터 모듈(특..

자바스크립트의 this는 어떻게 결정되는가?

this 이 포스팅에서는 this 키워드에 대해 알아본다. this는 자기참조변수로, 자신이 속한 객체나 자신이 생성할 인스턴스를 가리킨다. 자바스크립트 엔진에 의해 암묵적으로 생성되며, 어디서든 참조할 수 있다. ※ this의 바인딩은 함수호출방식에 따라 동적으로 결정된다. ★x100개다. 여기서 바인딩은 식별자와 값을 연결하는 과정을 의미하는데, this 바인딩은 식별자이자 키워드인 this에 this가 가리킬 객체를 연결한다는 의미이다. this가 함수 호출 시점에 결정되므로, 개발자가 작성한 코드와 다르게 동작할 우려가 있다. 그러므로 this는 동적으로 결정된다. 는 사실을 꼭 기억하고 this가 필요한 시점에 동작을 예상하며 코드를 작성해야 한다. this는 기본적으로 전역 객체(브라우저의 경..

자바스크립트의 undefined, null에 대해 알아보자.

자바스크립트 데이터의 원시값에는 7가지가 있다. String, Number, Boolean, undefined, null, Symbol, BigInt가 그러하다. undefined, null이 각각 원시 자료형임을 이해하는 것이 우선이다. 이 포스팅에서는 undefined, null은 무엇이며 언제 undefined와 null을 볼 수 있는지 그래서 '개발자가 변수에 직접 이 값을 할당해도 되는지?'에 대한 내용에 대해 다뤄볼 예정이다. undefined undefined가 무엇이고, undefined가 어떤 상황에서 이용되는지 알아보자. undefined는 '정의되지 않은' 이라는 의미이다. 자바스크립트에서 정의란, 변수에 값을 할당해서 변수를 명확히 하는 것을 의미한다. 변수에 값을 할당하기 위해선 ..

자바스크립트 클래스란?

클래스, 객체, 인스턴스 클래스는 객체를 만들어내기 위한 설계도 혹은 틀이며, 연관되어 있는 변수와 메서드의 집합이다. 클래스는 객체 정의를 위한 상태(멤버변수)와 메서드(함수)로 구성된다. 클래스와 객체, 인스턴스 간 연관을 짧게 설명하자면 객체 소프트웨어 세계에서 구현할 대상으로, 클래스에 선언된 형태 그대로 생성된 실체이다. 인스턴스 클래스(설계도)로부터 구현된 구체적인 실체를 의미하며 클래스로부터 객체를 생성했다면, 그것을 인스턴스라고 부른다. 예를 들어, Person 클래스라면 Person 클래스로 구현한 Tom은 인스턴스이다. 객체와 인스턴스의 관계는 다음과 같다. 1. 인스턴스는 객체에 포함된다. 2. oop 관점에서, 객체가 메모리에 할당되어 실제로 사용되면 "인스턴스" 라고 한다. 3. ..

객체 프로퍼티의 getter와 setter

객체 프로퍼티의 종류 객체 프로퍼티는 데이터 프로퍼티, 접근자 프로퍼티로 나뉜다. 데이터 프로퍼티(Data Property) key:value 형태의 값에 문자열, 숫자, 함수, 객체, 배열 등등의 값이 들어간 모든 프로퍼티를 의미한다. 접근자 프로퍼티(Accessor Property) 접근자 프로퍼티는 함수이며, get과 set의 역할을 한다. 그러나, 외부에서 해당 객체를 사용할 때 접근자 프로퍼티를 일반 프로퍼티처럼 사용할 수 있다. Getter & Setter 접근자 프로퍼티는 getter, setter 메서드로 표현될 수 있다. 그리고 객체에서 getter, setter는 각각 get, set으로 나타낼 수 있다. getter 메서드는 객체 프로퍼티를 가져오는 함수이며, setter 메서드는 객..

객체 프로퍼티 플래그와 설명자(Flag & Descriptor)

객체 프로퍼티란? 객체에서는 key:value 쌍으로 프로퍼티가 저장되며 각각을 key : 프로퍼티 이름, value : 프로퍼티 값 으로도 부른다. 그러므로, key:value의 한 쌍을 프로퍼티라고 생각하면 되겠다. 이 포스팅에선 객체 프로퍼티의 특수한 옵션인 플래그(Flag)와 설명자(Descrpitor)라는 강력한 기능을 알아본다. 프로퍼티 플래그 프로퍼티 플래그는 writable, enumarable, configurable의 3가지 속성으로 구성된다. 각각의 개념은 다음과 같다. writable 값 수정 가능성. true일 시 값을 수정할 수 있으며, false일 때는 읽기만 가능하다. enumerable 나열 가능성 ture일 시 반복문 등을 통해 나열이 가능하며, false일 때는 나열이 ..