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

자바스크립트는 기본적으로 함수 내부에서 선언된 변수를 외부에서 접근할 수 없다.함수 내부의 변수는 함수의 실행이 끝나면 메모리 할당이 해제되기 때문이다.하지만 일급객체의 속성으로 변수에 할당된 함수는 곧바로 할당이 해제 되지 않고, 이때 함수 내부의 변수의 값 역시 남아있게 된다.🥘 일급객체는 변수에 할당될 수 있으며, 다른 함수의 인자로 사용될 수 있고, 다른 함수의 결과로서 리턴될 수 있다.함수 내부에서 이 선언된 변수에 접근할 수 있는 함수를 클로저 라고 한다.이 클로저를 통해서 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 ..

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

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

자바스크립트는 비동기로 작동한다. 하지만 웹 페이지의 로딩을 기다리거나, 입력을 기다리거나, 다운로드가 완료된 후에 실행되야 하는 코드가 있을 수 있다. 따라서 이때는 동기적으로 작동이 될 수 있도록 한다. // 비동기 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()를 사용할 수 있다. 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..