프론트엔드 공부 블로그 프론트엔드 공부 블로그

제네레이터 함수는 ES6부터 지원되는 자바스크립트의 기능이다. 제네레이터 함수를 사용하면, 실행한 함수를 중간에 중단(pause)한 뒤 다시 재개(resumed)할 수 있다. 제네레이터 함수가 사용되는 대표적인 예로는 redux saga가 있다. 중간 중간에 중단점이 있음으로써, 디버깅에 큰 도움이 된다. const generator = function* () { console.log("1st"); yield; console.log("2nd"); yield; console.log("3rd"); yield 3; }; generator genetator 함수는 위와같이 function*() {} 의 형태로 작성할 수 있다. 기존의 함수 선언식에 *을 붙여준 모양새이다. yield는 단순히 표현하면 중단점으로..

자바스크립트의 스코프와 실행 컨텍스트에 대해서 정리하기로 하였다. 선언된 변수가 어디서 어디까지 유효한지에 대해 정확히 알기위해서는 이 내용들을 알아야겠다고 생각하였다. 스코프 (scope) 스코프는 식별자(변수)에 대한 유효범위로, 현재 실행중인 콘텍스트를 의미한다. 🧃 변수 또는 다른 표현식이 해당 스코프내에 존재하지 않으면 사용할 수 없다. 스코프는 계층적인 구조를 갖기에 하위 스코프는 상위 스코프에 접근할 수 있지만, 상위 스코프는 하위 스코프에 접근할 수 없다. const a = 10; { const b = 20; console.log(a); // 10 console.log(b); // 20 } console.log(a); // 10 console.log(b); // Uncaught Refere..

선언한 변수가 맨 위 상단으로 끌어올려지는 것을 의미한다. 🧁 인터프리터가 변수와 함수의 메모리 공간을 선언(변수, 함수) 전에 미리 할당하는 것을 호이스팅이라고 한다. 선언은 호이스팅되지만, 값의 할당은 호이스팅이 되지 않는다. console.log(name); // undefined var name = "zone"; 위의 코드는 오류가 발생하지 않는데, var 변수 name의 선언 이 먼저 일어났기 때문이다. 다만, 값이 할당되지는 않았기에 undefined이 출력된다. 위와 같은 코드를 let으로 작성하면 오류나 난다. let과 const도 호이스팅은 일어나지만, undefined으로 변수를 초기화하지는 않기 때문이다. 🍲 let과 const는 블록 스코프를 가지고, var은 함수 수준 스코프를 가..

자바스크립트에서 문자열을 동적으로 생성하기 위해서는 보통 ``와 같이 백틱을 많이 사용한다. 하지만 노드 환경에서 제공하는 util의 format 메서드를 사용하면, 마치 C언어에서 문자열을 만드는 것 처럼 동적으로 문자열을 생성할 수 있다. const util = require('util'); const str1 = util.format('%d, %s, %j', 10, '안녕', { name: 'Park'}); console.log("str : ", str1, "\ntype :", typeof str1); /* str : 10, 안녕, {"name":"Park"} type : string */ const endpoint1 = "hi"; const endpoint2 = "bye"; const str2 =..

JSON(JavaScript Object Notation)은 데이터 교환을 위해 만들어진 객체 형태의 포맷이다. 오늘날에는 자바나 파이썬과 같은 언어에서도 많이 사용된다. // JSON 예시 { "text": "Hi, I am human", "readonly": true, "creadtedYear": 2019 } JSON은 자바스크립트의 객체와 유사한 형태를 띄고 있지만, JSON에는 또 다른 규칙들이 있다. 🥙 자바스크립트 객체에서 키는 따옴표 없이 쓸 수 있지만, JSON에서는 반드시 큰 따옴표를 붙여야 한다. 🥨 자바스크립트 객체에서는 문자열의 값에 '나 "나 `와 같이 어떠한 형태의 따옴표도 사용할 수 있지만, JSON에서는 반드시 큰따옴표로 감싸야 한다. 🍝 깊은 복사를 할 때에도 사용될 수 있..

자바스크립트는 기본적으로 함수 내부에서 선언된 변수를 외부에서 접근할 수 없다.함수 내부의 변수는 함수의 실행이 끝나면 메모리 할당이 해제되기 때문이다.하지만 일급객체의 속성으로 변수에 할당된 함수는 곧바로 할당이 해제 되지 않고, 이때 함수 내부의 변수의 값 역시 남아있게 된다.🥘 일급객체는 변수에 할당될 수 있으며, 다른 함수의 인자로 사용될 수 있고, 다른 함수의 결과로서 리턴될 수 있다.함수 내부에서 이 선언된 변수에 접근할 수 있는 함수를 클로저 라고 한다.이 클로저를 통해서 Java의 객체의 private 함수처럼 외부에서 메서드를 통해서만 변경이 가능한 함수 내부의 변수를 만들 수 있다.const closure = () => { let count = 0; function showCoun..

Promises는 자바스크립트에서 비동기를 처리하기 위해서 사용된다. Promises는 처음에는 pending 상태였다가 처리에 성공하면 fulfilled, 실패하면 rejected 상태가 된다. Promises 성공하거나 실패하기만 한다. Promises.race, Promises.all, Promise.allSettled 에 대해서도 알아본다. 기본적인 Promise 사용법 const fn = () => { return new Promise((resolve, reject) => { try { setTimeout(() => resolve("Good!"), 5000) } catch (err) { reject(err); } }); } fn() .then(el => console.log(el)) .catch..

bip39 - Bip39는 Mnemonic과 관련된 내용이 담긴 라이브러리 - Bip39 라이브러리는 generateMnemonic, mnemonicToEntropy, mnemonicToSeed, wordlists, entropyToMnemonic, validateMnemonic 등의 메서드를 제공한다. 🍙 Entropy는 임의의 난수를 의미한다. - 임의의Mnemonic 생성, entropy를 통한 Mnemonic 생성, Mnemonic의 seed 변환, Mnemonic의 wordlist, 유효한 Mnemonic인지 검증하는 기능을 제공한다. https://github.com/bitcoinjs/bip39 GitHub - bitcoinjs/bip39: JavaScript implementation of ..