스페이스 루미

ddp라는 (Designer/Developer/Publisher) 모임에서 시작된 [모던 자바스크립트 Deep Dive] 스터디. 어느정도 기초 JS지식이 있는 사람들 약 10명정도로 시작했으며, 꽤 빠른 속도와 분량으로 이탈자들이 속출해 최종 winner는 3명. 많은것을 배운 이번 스터디의 셀프 회고타임을 가져보자. 스터디 방식 1. 학습할 책을 지정하고, 각자 회차에 정해진 챕터를 스스로 공부한다. (공부한 내용은 모두가 볼수있게 블로그, 깃, 노션 등에 public으로 공유해야한다.) 2. 정리한것을 주1회 구글밋업으로 발표하는 시간을 가진다. 참석자 모두가 발표한다. 3. 발표는 사다리타기를 통해서 순서를 정한다. 스터디 방식이 조금 타이트한건지, 아니면 역시 사람은 바쁜것인지 회차를 거듭할수록..

프로미스 Promise 자바스크립트는 비동기처리를 위한 하나의 패턴으로 콜백함수를 사용하는데, 이는 콜백 지옥으로 인해 가독성이 나쁘고, 비동기 처리도중에 발생한 에러처리가 곤란하며, 비동기 처리를 한번에 하는데도 한계가 있다. 콜백지옥, 에러처리 등을 해결하기위해 나온것이 프로미스다. 프로미스는 비동기 처리상태와 처리 결과를 관리하는 객체다. 호출을 하면, 결과값을 주는 일종의 약속. 결과값은 then에 저장되어 원할때 쓸 수 있다. 비동기 함수에서의 콜백함수 호출은 비동기로 동작하기때문에 콜백함수 내부에서 처리 결과를 반환하거나, 상위 스코프의 변수에 할당하면 기대한대로 동작하지 않는다 (setTimeout 함수의 경우, 고유한 타이머 id를 반환하므로 콜백함수에서 값을 반환하는것은 무의미하다.) l..

동기처리와 비동기처리 자바스크립트 엔진은 한번에 하나의 태스크만 실행할 수 있는 싱글스레드 방식으로 동작한다. (단 하나의 실행 컨택스트 스택을 갖는다.) 현재 실행중인 태스크가 종료할때까지, 다음 태스크가 대기하는 방식을 동기처리라고 한다. 싱글 스레드로 동작하는 것은 브라우저가 아니라 내장된 자바스크립트 엔진이다. 브라우저는 멀티스레드로 동작한다. 따라서 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(작업중단)이 발생하는데, 태스크를 블로킹(작업중단)하지 않는 것을 비동기처리 라고 한다. [일반함수가 호출되었을때의 콜스택 플로우] 함수 호출 > 실행 컨텍스트 생성 > 콜스택에 푸시 > 실행 컨텍스트 실행 > 함수 종료 > 콜스택에서 팝 동기처리는 실행순서를 보장하지만, 비동기처리는 순서를 보장하..

호출 스케줄링 일정 시간이 경과된 이후에 호출되도록 함수를 예약하는 것. JS는 타이머함수 setTimeout과 setInterval, 타이머를 제거할수있는 clearTimeout과 clearInterval을 제공한다. 타이머 함수는 호스트객체다. JS는 하나의 실행컨텍스트를 갖기때문에, 두가지 이상의 일을 동시에 처리할수없다(싱글스레드) 따라서 타이머함수는 비동기 방식으로 동작한다. setTimeout n 초뒤 콜백함수를 실행한다. setTimeout(item => console.log(`print ${item}`),1000, 'nintendo'); // 1초뒤 'print nintendo' 출력. 콜백함수, 만료시간, 콜백에 넘길 인자 순 setTimeout은 1초뒤에 태스크 큐에 콜백함수를 등록하는..

이벤트 핸들러 이벤트가 발생했을때 브라우저에 의해 호출될 함수를 이벤트 핸들러 라고 한다. 브라우저에게 이벤트 핸들러의 호출을 위임하는것을 이벤트 핸들러 등록이라고 한다. window, document, HTMLElement 타입의 객체는 onclick과 같이 특정 이벤트에 대응하는 다양한 이벤트 핸들러 프로퍼티를 가진다. 자주 사용하는 이벤트 타입 이벤트의 종류를 나타내는 문자열이다. 약 200가지가 존재하고, 아래는 자주쓰는 이벤트들. 최근에 사용하지않는것들은 생략하였음. click : 마우스 버튼클릭 dblclick : 마우스 더블클릭 mousedown : 마우스버튼 눌렀을때 mousemove : 마우스 커서 움직였을때 mouseenter : 마우스 커서를 HTML요소 안으로 이동했을 때 (버블링되..

DOM (document of model) 문서 객체 모델.. 노드 객체들로 구성된 트리 자료구조를 말한다. DOM 트리 라고도 한다. 노드객체는 종류가있고, 상속 구조를 갖는다. 총 12종류의 노드타입이 있는데, 중요한 노드는 아래와 같다. 문서 노드 : 최상위 루트노드 document 객체. Document, HTMLDocument 인터페이스를 상속받는다. 요소 노드 : html 요소. Element 인터페이스를 상속받는다. 어트리뷰트 노드 : 요소의 어트리뷰트를 가리키는 객체. Attr을 상속받는다. 텍스트 노드 : html 요소의 텍스트를 가리키는 객체. 자식노드를 가질수없는 리프노드이다. CharacterData 인터페이스를 상속받는다. 모든 노드객체는 Object, EventTarget, No..

브라우저 렌더링 과정 1. HTML, CSS, JS, Asset(이미지, 폰트) 등을 Server에 요청한다. 2. 서버에서 받은 응답의 HTML CSS를 파싱한다. (link 태그를 만나면 HTML 파싱을 중단하고 CSS 파싱) 3. DOM, CSSOM 을 생성한다. ( 바이트 > 문자 > 토큰 > 노드 > DOM 생성. Meta 태그의 Charset 인코딩을 기준으로 변환한다.) 4. 렌더트리를 생성한다. 브라우저 화면에 렌더링되지 않는 노드는 포함되지 않는다. 5. 페인팅한다. * DOM(Document object Model)은 HTML 문서를 파싱한 결과물이다. * 파싱 : text문서를 읽어 문자열을 token으로 분해, 문법적 의미와 구조를 반영하여 파스트리 생성 * HTML을 파싱하다가 s..

Set 중복되지 않는 값들의 집합. 배열과 유사하지만, 값이 중복될수없고, 순서에 의미가 없으며 인덱스로 접근할수없다. 교집합, 합집합, 차집합, 여집합 등을 구현할수있다. set 객체는 이터러블이다 for ... of로 순회 가능하며 스프레드, 디스트럭처링의 대상이 될수있다. new 연산자와 함께 Set 생성자 함수로 생성한다. const set = new Set(); console.log(set) // Set(0) {size: 0} const set1 = new Set([1,2,3,3,3]); console.log(set1) // Set(3) {1, 2, 3} // 중복제거 함수 const uniq = (arr) => arr.filter((item, idx, self) => self.indexOf(i..

이터레이션 프로토콜 Iteration protocol ES6에서 도입된 Iterable (순회 가능한) 데이터 컬렉션을 만들기 위해 약속한 규칙이다. 이를 준수한 객체를 이터러블 이라고 한다. 이터러블은 Symbol.iterator를 프로퍼티키로 사용한 메서드를 직접 구현하거나, 프로토타입 체인을 통해 상속받은 객체를 말한다. typeof [][Symbol.iterator] === 'function'; // true typeof ''[Symbol.iterator] === 'function'; // true typeof new Map()[Symbol.iterator] === 'function'; //true typeof new Set()[Symbol.iterator] === 'function'; // tr..

Symbol 이란? ES6에서 도입된 7번째 데이터 타입.. 변경불가능한 원시 타입의 유일무이값이다. 중복위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용된다. 심벌함수는 호출 될때마다 유일무이한 심벌 값을 생성한다. const mySymbol = Symbol(); // new 연산자 없이 생성한다. // ** 그래서 이 mySymbol은 어따쓸수있지??? new Symbol(); // Symbol is not a constructor console.log(mySymbol); // Symbol() 심볼은 값을 외부로 노출하지않는다 const newSymbol = Symbol('test') newSymbol + 1 // Cannot convert a Symbol value to a number !!new..

표준 빌트인 객체 Number 생성자 함수 객체이므로, new와 함께 호출 하여 인스턴스를 생성할 수 있다. new 연산자를 사용하지 않고 호출하면, Number인스턴스가 아닌 숫자를 반환하고, 이를 통해 명시적으로 타입을 변환하기도 한다. Number(true) // 1 Number(false) // 0 Number('0') // 0 Number.EPSILON Number.EPSILON은 2.2204460492503130808472633361816E-16 값으로, 1과 1보다 큰 숫자 중에서 가장 작은 숫자와의 차이와 같다. (이게 몬소리지? 아래 예제를 보자) 부동소수점 산술 연산은 정확한 결과를 기대하기 어렵다. 0.1 + 0.2; // 0.30000000000000004 0.1 + 0.2 === ..

배열 이란? 여러개의 값을 순차적으로 나열한 자료구조. 나열한 값을 요소라고 부른다. 0이상의 정수인 Index를 갖는다. JS에 배열이라는 type은 존재하지않는다. 배열은 객체 타입이다. (해시테이블로 구현된 객체이다.) 자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조인데(밀집배열) 자바스크립트의 배열은 각각의 메모리 공간은 동일한 크기를 갖지 않아도 되며, 연속적으로 이어져있지 않을수도있다.(희소배열) 따라서 엄밀히 말하면 자료구조에서 말하는 일반적인 배열의 동작을 흉내낸 특수객체다. const empty = [ ,2, ,4]; console.log(empty.length); //4 console.log(empty) // [비어 있음, 2, 비어 있음, 4..

JS에서 클래스란? 클래스는 새로운 객체 생성 매커니즘이다. 클래스는 인스턴스를 생성하기위한 생성자 함수다. 기존 프로토타입 기반 패턴을 클래스기반 패턴처럼 사용할 수 있게 해준다. 클래스와 생성자 함수는 매우 유사하지만 몇가지 차이점이 있다. 클래스는 new 연산자없이 호출하면 에러가 발생하지만, 생성자 함수는 일반 함수로서 호출된다. 클래스는 extends, super 키워드를 제공하며, 상속관계 구현에서 더 명료하다. 클래스는 호이스팅이 발생하지 않는것처럼 동작한다. 모든 선언문은 런타임 이전에 먼저 실행되고, var, let, const, function, class 키워드로 선언된 모든 식별자는 호이스팅된다. 다만 TDZ에 빠지기 때문에 호이스팅이 발생하지 않는것처럼 동작한다. 클래스는 암묵적으..

ES6 메서드는 인스턴스를 생성할 수 없는 non-constructor 이다. (생성자 함수로서 호출 할 수 없다) prototype 프로퍼티가 없고, 프로토타입도 생성하지 않는다. *표준 빌트인 객체가 제공하는 프로토타입 메서드와 정적 메서드도 모두 non-constructor이다. 화살표 함수 const arrow = () => {}; const test = x => x * 10; test(3) // 30 const num = (a, b) => ({a, b}) // 객체 리터럴을 반환할 경우 소괄호로 감싼다. num(3,4) // {a: 3, b: 4} // const num2 = (a, b) => {return {a, b}} 이것과 같다 화살표함수도 고차함수(HOF)에 인수로 전달될 수 있다. [1..

표준 빌트인 객체 (Standard built in object) ECMAScript에 정의된 객체로, 전역객체의 프로퍼티로서 제공된다. 전역변수처럼 언제나 참조 가능 Math, Reflect, JSON을 제외한 표준 빌트인 객체는 모두 생성자 함수 객체다. 호스트객체 (Host object) JS실행환경 (브라우저, Node.js 환경)에서 추가로 제공하는 객체. 브라우저에서는 클라이언트사이드 Web API를 제공하고, Node.js환경에서는 고유의 API를 제공한다. 사용자 정의 객체 (user defiend objects) 사용자가 정의한 객체 원시값과 객체 원시값은 객체가 아니므로 메서드나 프로퍼티를 가질수없지만, 원시값을 마침표 표기법이나 대괄호 표기법으로 접근하면, 자바스크립트 엔진은 원시값을..

실행 컨텍스트 소스코드를 실행하는데 필요한 환경을 제공하고, 실행 결과를 관리한다. 식별자와 스코프는 실행 컨텍스트의 렉시컬 환경으로 관리하고, 코드 실행 순서는 실행 컨텍스트 스택으로 관리한다. 실행 컨텍스트는 LexicalEnvironment 컴포넌트와 VariableEnvironment 컴포넌트로 구성된다. 렉시컬 환경은 EnvironmentRecord와 OuterLexicalEnvironmentReference 두개의 컴포넌트로 구성된다. 스코프는 실행 컨텍스트의 렉시컬 환경이다. 코드의 평가와 실행 전역객체 생성 > 전역 코드 평가와 실행 > 함수1 평가와 실행 > 중첩함수2 평가와 실행 > 함수1로 복귀 > 전역코드로 복귀 * 함수1이 실행되면 전역코드의 실행을 일시중단하고 함수내부로 코드제어..

JS에서 this는 자신이 속한 객체, 또는 생성할 인스턴스를 가리키는 자기참조변수다. 자신이 속한 객체 또는 인스턴스를 참조하면서 프로퍼티나 메서드를 참조할 수 있다. this 바인딩은 함수 호출 방식에의해 동적으로 결정된다. 또한 this는 코드 어디서든 참조 가능하다. *strict mode가 적용된 일반함수에서는 undefiend를 가리킨다. 일반함수에서 this는 Window를 가리킨다. console.log(this) // Window function test(){ console.log(this) } test() // 일반함수에서 this는 Window 메서드 내에서 this는 자신을 호출한 객체를 가리킨다 const user = { getThis(){ console.log(this); } }..

strict mode function test(){ x = 'test' } test(); console.log(x) // test 엄격 모드를 선언하지 않으면, 전역 객체에 x 프로퍼티를 동적으로 추가하여, 전역 변수로 사용할수있다. (암묵적 전역) 이는 개발자의 의도가 아니기때문에 오류를 발생시킬수있다. 따라서 언제나 키워드 let, const 를 사용하여 변수를 선언해야한다. 전역의 선두에 use strict;를 추가한다. 'use strict'; function test(){ x = 'test' } test(); console.log(x) // x is not defiend at test 전역에 적용하면, script 단위로 적용된다. 이는 바람직하지 않다. 함수단위로 strict mode를 사용하..

객체는 리터럴로 생성하는것이 일반적이다. 근데 단점은 하나밖에 생성을 못한다는 것. 객체 생성자 함수의 장점은 프로퍼티 구조가 동일한 객체를 많이 만들때, 간편하게 생성할수있다는것이다. 마치 클래스처럼 객체(인스턴스)를 생성할수있다. new 연산자와 함께 호출하면 생성자 함수로 동작한다. 최근 트렌드가 new 연산자는 안쓰는거지만 레거시 코드를 마주할 수 있으니.... 알아보도록 하자~ function Square(n){ this.n = n; this.getSquare = function(){ return n*n; } } const sq1 = new Square(5); // Square {n: 5, getSquare: ƒ} const sq2 = new Square(10); // Square {n: 10,..

Property Attribute JS 내부적으로 실제로 동작하지만, 개발자가 접근할수 있도록 오픈된 프로퍼티는 아니다. 다만, 간접 접근 수단을 제공한다. JS엔진은 프로퍼티 생성시 프로퍼티의 상태를 나타내는 어트리뷰트를 기본값으로 자동 정의한다. 모든 객체는 프로토타입 내부 슬롯 [[prototype]]을 가진다. 이는 __proto__를 통해 접근이 가능하다. 프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티가 있다. const test = {} test.__proto__ 프로토타입 (Prototype) 프로토타입은 어떤 객체의 부모객체의 역할을 하는 객체다. 프로토타입은 자식객체에게 자신의 프로퍼티와 메서드를 상속한다. 하위객체는 부모객체의 프로퍼티나 메서드를 자유롭게 사용할수있다. 프로토타입은 생성자..

스코프(scope)는 식별자의 유효범위다. 스코프가 계층되어 연결되어있는걸 scope chain 이라고 하는데, JS엔진은 변수를 참조할때 상위스코프로 이동하며 가장 가까운 변수를 검색한다. 렉시컬스코프 lexical scope lexical은 어휘의, 사전의 라는 뜻을 가지는데, 사전(辭典)은 어휘를 정의해놓은 책이다. 함수를 어디에 정의했는지에 따라 스코프를 결정한다. 정적(static) 스코프라고도 한다. JS는 렉시컬 스코프를 따른다. 함수의 상위스코프는 자신이 정의된 스코프다. (함수 선언문으로 정의하면 런타임 이전에 함수객체가 먼저 생성된다.) 변수의 생명주기 지역변수는 함수가 생성한 스코프에 등록된다. 지역변수는 이 스코프가 소멸될때까지 유효하다. 따라서 지역변수의 생명주기는 함수의 생명 주..

함수 函數 지닐 함에 셈수를 쓴다. 함이 상자같은걸로 생각하면 편한데, 암튼 상자에 x y 를 넣으면 아웃풋이 뭔가 나오지않는가? 수학적으로 말하자면 Input을 받아 Output을 내보내는 과정이다. 값의 성질을 가진 객체를 일급객체라하는데, JS에서 함수는 일급객체다. 함수를 값처럼 쓸수있다는 뜻이다. 함수는 객체 타입의 값이라서, 변수에 함수리터럴을 할당할수있다. 함수 표현식 함수는 함수이름으로 호출하는것이 아닌, 객체를 가리키는 식별자로 호출한다. let multi = function multipulate(x,y){ // 기명 함수 표현식 return x * y; } multi(3,5) // 15 multipulate(3,5) // Uncaught ReferenceError: multipulate..

객체 客體 객체란 무엇이냐.. (손 객에 몸체 자를 쓴다) 사전적 정의로는 '실제 존재하는 것' 인데 나는 이걸, 다양한 속성을 가지고있는 '무언가' 같은거라고 이해했다. 추상적인 개념도 객체로 표현될수 있으니깐. 컴퓨팅 정의로는 '실제 메모리에 할당되어 존재하는 것' 이라고 한다. 객체는 property의 집합이다. 객체 리터럴의 프로퍼티는, key, value로 구성된다. let myPhone = { model: 'Zplip3', // key: value uniqueness: '이 폰은 반으로 접힌다' // key: value } 자바스크립트에서 원시값을 제외한 모든것은 객체다. 배열도 객체라 볼수있고, 함수도 객체라 볼수있다. let empty = {}; // 중괄호는 코드블럭이 아니다. 따라서 뒤..

string으로 암묵적 변환 0 + '' // '0' [10, 20] + '' // '10, 20' number로 암묵적 변환 '1' * 10 // 10 정말 이상한것은 '0'은 false인데 truthy한 값으로 평가된다니 이게 무슨말인가..? '0' == false // true. ('0'은 false다) !'0' // false (..?) !!'0' // true (..???) 아래 참조 표를 보면, "0"은 비어있는 문자열이 아니기때문에 truthy한 값으로 평가된다. 이런게 js의 괴랄한 점... 빈 문자열에 아무튼 0이 있다.. js equality 확인 사이트 https://dorey.github.io/JavaScript-Equality-Table/ js의 falsy 값은 기억하도록 하자. ..

switch case 언제 if else 쓰고 언제 switch를 써야되지? switch의 case에는 상수만 올수있다. 변수와의 비교가 불가능하다는 얘기.. 비교대상이 '상수'면 switch를 쓰고, 일반적으로는 if문을 쓴다. 구현했을때 가독성이 더 좋을것으로 판단되는걸로 쓴다. 틀린코드 let score = 50; switch (score){ case score >= 0 && score =50 && score = 90: console.log('수석'); break; default: console...

단항산술연산자 증가/감소(++/--) 피연산자의 값을 변경하는 부수효과가 있다. x++; // x = x + 1; 와 같다 1 + true // 2 숫자와 다른값을 산술할때는 암묵적 타입 변환 또는 타입 강제 변환 이 일어날 수 있다. 할당 연산자 x+=5 //x = x+5 x *= 5 //x = x*5 let str = 'i am...' str += 'rumi' //str = str + 'rumi' //i am...rumi 동등/일치 비교 연산자 == 동등 비교 (값이 같음) === 일치 비교 (값과 타입이 같음) != 부동등비교 (값이 다름) !== 불일치 비교 (값과 타입이 다름) 5 == '5' // true NaN === NaN // false 가급적 === 를 쓰자!! 0 == -0 //tru..

자바스크립트에서 var을 쓰지말아야 하는 이유는? var은 함수 레벨 스코프를 지원하므로 의도치않게 전역적으로 선언 될 수 있으므로 let이나 const를 사용한다. let과 const는 ECMA2015(ES6)부터 추가된 스펙으로 블록스코프를 지원한다. let score; // 변수 선언. let score = undefiend;와 같다 score = 100; // 값의 할당 const test; // Err Missing initializer in const declaration const test = 'test'; // 상수 선언은 값의 할당과 같이써야한다. 1. score을 가리키는 메모리 공간에 undefiend가 할당되고 2. 값을 할당하면 다른 메모리 공간에 100이 할당되고 이 주소를 가리..