JavaScript

Promises의 all, race, allSettled 사용하기

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..

이더리움 지갑과 관련된 javascript 라이브러리들 살펴보기

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 ..

Optional chaining (?.)에 대해서

ES 2020에서 새로운 자바스크립트 문법을 지원하게 되었다. Optional chaining은 다음과 같이 작성할 수 있다. const a = {}; const b = a?.name; // a && a.name 위의 예제처럼 사용할 수 있는데, b의 값은 물론 undefined이다. 하지만, 위의 예제로는 이 문법의 유용함을 알리기에 조금 무리가 있다. React에서 자바스크립트를 사용할 때 유용하게 사용할 수 있었는데, props로 받은 객체 데이터에 어떤 데이터는 있을 수도 있고 없을 수도 있다. 이럴 때 만약 객체 내부에 있을 수도 있고 없을 수도 있는 데이터가 객체이고, 그 객체의 데이터 내부의 프로퍼티에 접근할 일이 있을 수 있다. 이때 별도로 조건문을 설정하지 않으면, 존재하지 않는 객체 (..

Queue in Javascript

큐는 FIFO(First In First Out)의 특징을 가지는 자료구조이다. 자바스크립트에서 큐를 만든다면, 가장 쉬운 방법은 다음과 같이 .shift()를 사용하는 방법이다. const queue = []; // 큐에 삽입 queue.push(2); queue.push(3); queue.push(4); console.log(queue); // [ 2, 3, 4 ] // 큐에서 하나씩 꺼내기 const one = queue.shift(); const two = queue.shift(); const three = queue.shift(); console.log(one, two, three); // 2, 3, 4 하지만, 자바스크립트를 사용할 수 있는 많은 코딩테스트에서 shift()를 사용하면, 효율적..

간단 SCSS 사용법

SCSS는 CSS를 편하게 사용하고 코딩하듯이 사용하기 위해서 만들어졌다. Sass 버전 3에 추가된 것이 Scss이다. 변수 사용 $color: red; $default-margin: 15px; $colors: red, blue, green, black, white; $map: ( morning: white, night: black ); p { color: $color; } @import를 통해서 scss파일을 불러와 그 파일의 변수를 사용할 수 있다. 함수 사용하기 @function box-calculator($row: 4, $pixel: 512) { @return $pixel / $row; } .flex-box { flex: box-calculator(4, 1024); } 반복문 // for ol ..

자바스크립트(javascript) 비동기, 동기 - Promise, Callback, async, await

자바스크립트는 비동기로 작동한다. 하지만 웹 페이지의 로딩을 기다리거나, 입력을 기다리거나, 다운로드가 완료된 후에 실행되야 하는 코드가 있을 수 있다. 따라서 이때는 동기적으로 작동이 될 수 있도록 한다. // 비동기 const printHi = () => { setTimeout(() => { console.log("안녕!") }, Math.random() * 100); } const printWhat = () =>{ setTimeout(() => { console.log("우리 뭐할까?"); }, Math.random() * 100); } const printBye = () => { setTimeout(() => { console.log("잘가!") }, Math.random() * 100); } p..

자바스크립트 enum 사용하기 Object.freeze()

자바스크립트 enum과 같은 변수를 만들기 위해서 Object.freeze()를 사용할 수 있다. const obj = { a: 1, b: 2, } obj.a = -1; console.log(obj); // {"a": -1, "b": 2} Object.freeze(obj); obj.b = -2; console.log(obj); // {"a": -1, "b": 2} 위와 같이 Object.freeze()를 적용하면, 더 이상 객체의 프로퍼티가 수정되지 않는다. Object.isFrozen() 메서드를 통해서 이 객체가 freeze 되었는지 판별할 수 있다. console.log(Object.isFrozen(obj)); // true 참고자료 : https://developer.mozilla.org/ko/d..

npm & package.json에 대해서

package.json은 프로젝트에 대한 정보를 가지고 있다. 이를 통해서 협업할 때 같은 버전의 모듈들로 프로젝트를 함께 진행한다. 이것으로 협업때 다른 모듈 버전을 사용함으로써 생길 오류를 방지한다. 우리들은 선배들이 먼저 만들어 놓은 모듈을 사용하여 빠르고 검증된 라이브러리를 사용할 수 있다. node.js에서 외부 라이브러리를 받는 가장 대표적인 방법이 npm(Node Package Manager)를 사용하는 것이다. 그리고 프로그램이 실행되기 위해서 어떤 패키지가 필요한지 적어둔 것이 바로 package.json이라고 할 수 있다. package.json에는 여러 속성이 있다. name, version, desciption은 프로그램의 정보를 담고 있다. scripts를 통해서 CLI에서 사용 ..