Persistence

자바스크립트 클래스 필드 원래 자바스크립트의 클래스에서 인스턴스 프로퍼티는 constructor 내부에, 프로토타입 메서드 또는 정적 메서드는 클래스 몸체에 선언해야 한다. class Person { constructor(name) { // name은 인스턴스 프로퍼티 this.name = name; } // printName은 프로토타입 메서드 printName() { console.log(this.name); } } 참고로 이건 이 포스팅 내용과는 상관 없지만 위 코드는 아래 코드랑 거의 비슷하다. 생성자 함수 방식에서는 프로토타입 메서드를 만들려면 프로토타입 프로퍼티에 접근해서 메서드를 추가해야 하지만 클래스에서는 그냥 정의하면 프로토타입 메서드가 된다. const Person = (function..

프로토타입이란 자신의 상위 객체(또는 부모 객체) 역할을 하는 객체로서, 하위(자식) 객체에 프로퍼티와 메서드를 상속한다. 즉 객체는 프로토타입으로부터 메서드를 포함한 프로퍼티들을 상속받는다. 이 상속을 통해 불필요한 중복을 제거할 수 있는데, 예시를 들어보자. // 컨스트럭터(생성자 함수) function Circle(radius) { this.radius = radius this.getArea = function() { return Math.PI * this.radius ** 2; } } // 생성자 함수로 인스턴스 생성 var circle1 = new Circle(1); var circle2 = new Circle(2); circle1.getArea === circle2.getArea; // fal..

스코프 스코프(유효 범위)란 해당 변수가 정의되어 있는 영역, 즉 정의된 변수를 사용할 수 있는 소스코드의 집합. 자바스크립트는 블록 스코프(block scope)가 아닌 함수 스코프를 사용하므로, 함수 내에 정의된 변수는 해당 함수 내에서만 사용할 수 있고 유효하다. 함수 스코프라는 것은 함수 내에서 정의된 변수는 그 함수의 전체에 걸쳐서 유효하다는 뜻이다. (스코프는 유효 범위라는 뜻이니까 함수 스코프 -> 선언된 함수 내라면 어디에서도 유효하다) 이는 변수가 미처 선언되기도 전에 유효하다는 뜻이고, 이런 현상을 호이스팅(hoisting)이라고 일컫는다. var scope = "global"; function f() { console.log(scope); // undefined var scope = ..

any와 unknown 모두 모든 타입들의 super set이다. 즉 어떤 타입도 any와 unknown에 넣을 수 있다. 하지만 unknown은 자기 자신과 any를 제외한 다른 타입에 할당할 수 없다. (Anything is assignable to unknown but unknown isn't assignable to anything but itself and any) const vAny: any = 10; // any에 어떤 것도 집어넣을 수 있다. const vUnknown: unknown = 10; // any처럼 unknown에도 어떤 것도 집어넣을 수 있다. let s1: string = vAny; // any는 어떤 것에도 집어넣어진다. let s2: string = vUnknown; /..

자바스크립트 엔진이 데이터를 저장할 수 있는 두 곳이 있다. 메모리 힙과 스택이다. Heap: dynamic memory allocation object, function을 저장하는 장소. 스택과 달리 정해진 양만큼 할당하는 것이 아니고 필요에 따라 늘어날 수 있다. 데이터 사이즈는 런타임에 알 수 있다. 이 프로세스는 dynamic memory allocation이라고 한다. Stack: static memory allocation 스태틱 데이터를 저장하기 위해 사용하는 자료 구조. 스태틱 데이터는 엔진이 컴파일 타임에 사이즈를 아는 데이터. (Prmitive values and references) 사이즈를 이미 알고 있기 때문에 정해진 양의 메모리만 할당한다. 실행 직전에 메모리를 할당하는 프로세스..

this this란? this는 단어 자체에서 유추할 수 있듯이, 뭔가를 가리키는 대명사다. 이 this가 무엇을 가리키는지 유추하려면 앞뒤 문맥을 알아야 할 것이다. 프로그래밍에서 또한 this는 어떤 컨텍스트(문맥) 내에서 특정 객체나 변수를 가리킨다. Context is always the value of the "this" keyword which is a reference to the object that owns the currently executing code. 컨텍스트는 항상 현재 실행 중인 코드를 소유한 객체를 가리키는 this 키워드의 값이다. * 다만 strict모드를 배제하고 정리하였으며 내가 이해한 부분에 한하여 정리한 것이므로 오류가 있을 수 있음 자바스크립트 this의 특징 ..

스코프란 스코프(Scope, 유효범위)란 식별자(identifier)를 찾아내기 위한 규칙이다. 식별자란 사람으로 따지면 이름, 주민등록번호 같은 것이 될 수 있겠다. 주민등록번호는 단 한개도 겹칠 수 없지만, 이름은 똑같은 사람이 있을 수 있다. 그러면 그 이름이 같은 사람은 어떻게 구별해야 할까? 컴퓨터는 이름이 같은 사람을 어떻게 다르게 구분할 수 있을까? 예를 들어서 강남구에 사는 김나라와 관악구에 사는 김나라는 다르다고 인식할 수 있지 않을까? 프로그래밍할 때도 변수명이나 함수명이 겹칠 수도 있다. 예를 들어 i 같이 흔한 변수명을 사용하는데 모든 코드를 통틀어 i 를 단 한 번밖에 못 쓴다는 건 좀 당황스럽다. 그렇다면 영역을 분리할 수 있지 않을까? 마치 디렉토리 구조를 나누면 각각의 디렉토..

안희종님의 타입스크립트 입문서에서 예제를 가져왔습니다.(ahheejong.gitbook/io/ts-for-jsdev) 타입스크립트의 장점 타입 제공 function preferTypeScript(person) { return person.favoriteLanguages.includes('TypeScript') } 플레인 자바스크립트로 코드를 쓰면 위와 같다. 위의 함수를 보고 예측할 수 있는 점은 preferTypeScript라는 함수의 패러미터는 Object 형태이며, favoriteLanguages 라는 키를 갖는다. (닷노테이션으로 오브젝트 키에 접근하는 방식 사용) 그리고 favoriteLanguages 키는 배열을 값으로 갖는다. (배열 메서드인 includes 사용) 함수는 true나 fals..

TypeScript 특징 오픈소스 프로그래밍 언어(from Microsoft) Typed superset of JavaScript그러니까 자바스크립트의 모든 feature를 포함 + 더 확장된 feature를 포함하는 것이 타입스크립트라는 것 superset: A programming language that contains all the features of a given language and has been expanded or enhanced to include other features as well. 타입스크립트로 작성 > 플레인 자바스크립트로 컴파일 커피스크립트와 달리 extended JavaScript 커피스크립트는 자바스크립트가 아닌 새로운 다른 언어지만, 타입스크립트는 .ts확장자를 ...

ES6 모듈 시스템 export default 디폴트로 export하면 {} 없이 임포트할 수 있고, 이름도 마음대로 지을 수 있다. 예를 들어 export default a 하면 임포트하는 쪽에서 import b 라고 할 수 있다. export 변수명 디폴트를 붙이지 않고 export하면 임포트하는 쪽에서는 {}를 사용해야 하고 이름도 그대로 사용해야 한다. 하지만 이름을 변경하고 싶을 경우 as를 사용하면 된다. 예를 들어 export const c 는 임포트하는 쪽에서 import {c as d} 라고 할 수 있다. import *, export * * 로 import, export할 수 있다. 기본적으로 파일 내의 모든 것을 지칭하고, default도 포함한다. 예를 들어 actionTypes.j..

콜백함수와 프로미스의 차이 function add10(a, callback) { setTimeout(() => callback(a+10), 100); } add10(5, res=> { console.log(res); }) // 15 function add20(a) { return new Promise(resolve => setTimeout(()=>resolve(a+20), 100)) } add20(5).then(console.log); // 25 add20(5).then(add20).then(console.log); // 45 프로미스의 가장 중요한 특징은 콜백함수와 달리 결과를 값으로 받아 저장할 수 있다는 것이다. 프로미스를 받아 then으로 이어 또 다른 작업을 할 수 있기 때문에, 코드도 간결해질..

useEffect Hook 사용하기 useEffect 훅은 함수형 컴포넌트에서 쓰이며 기존 클래스 컴포넌트의 라이프사이클 메서드들을 대체한다. 이를 정리하기 위해 간단히 라이프사이클 메서드를 설명하고, useEffect 훅의 효용을 적는다. LifeCycle Method - componentDidMount, componentDidUpdate 생명주기 메서드는 크게 두 종류이다. Will 메서드 : 어떤 작업이 실행되기 직전에 호출 Did 메서드 : 어떤 작업이 실행된 직후에 호출 생명주기 메서드에서는 Mount라는 단어가 등장하는데, 여기서 마운트는 리액트가 컴포넌트를 실제 DOM에 삽입한다는 것이다. (리액트는 가상DOM을 사용하니까) 예를 들어 componentDidMount는 컴포넌트가 실제 DOM..

this와 함수 Context 루비나 자바에서는 this는(루비에서는 self) 항상 메서드가 정의된 객체를 가리킨다. 예를 들어 Bar 클래스 내부에 foo 라는 메서드를 정의하면 this(또는 self)는 Bar 클래스의 인스턴스를 가리킬 것이다. 자바스크립트에서 function context는 함수가 정의될 때가 아니라 호출될 때에 정해진다. 이것이 자바스크립트가 다른 언어와 구별되는 큰 차이점이라고 한다.(나는 자바스크립트로 시작해서 잘 모르겠지만…) 호출된 함수의 컨텍스트를 정의하는 4가지 함수 호출 패턴이 있다. function invocation pattern method invocation pattern constructor invocation pattern apply invocation ..

ES9 features Object spread operator const animals = { tiger: 23, lion: 5, monkey: 2 } const {tiger, ...rest} = animals; tiger // prints 23 rest // prints {lion: 5, monkey: 2} Finally const urls = [ 'https://jsonplaceholder.typicode.com/users', 'https://jsonplaceholder.typicode.com/posts', 'https://jsonplaceholder.typicode.com/albums' ] Promise.all(urls.map(url => { return fetch(url).then(resp =>..

How Javascript works 자바스크립트 엔진(ex. 크롬의 V8)은 Memory Heap과 Call Stack을 가지고 있다. Memory Heap Memory allocation이 이루어지는 곳. 예를 들어 전역변수를 선언하면 Memory Heap 안의 메모리에 할당된다. 그러나 저장되는 데에 한계가 있어서, 사용되지 않는 메모리가 늘어날 수록 memory leak이 생긴다. Global Variable이 바람직하지 않은 이유다. Call Stack console.log('4') // two함수 위에 위치 two() // one함수 위에 위치 one() // 스택 가장 아래에 위치 위에서부터 아래로 하나씩 실행되며 없어진다. (console.log -> one 함수 순. first in, l..