전체 글

이더리움 지갑과 관련된 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 ..

인증 및 보안에 대한 간단 정리 (HTTPS, Hashing, Cookie, Session)

HTTPS (Hyper Text Transfer Protocol Secure Socket layer) HTTPS는 HTTP에 Secure를 포함한 것이다. HTTP에 담긴 데이터를 암호화하여 공격에 대비한다. 🍵 공격자에 의해서 요청 및 응답이 탈취될 수 있다. HTTPS의 특징으로 인증서, CA, 비대칭 키 암호화가 있다. 현업에서 HTTPS 프로토콜을 사용하는 것이 일반적이다. HTTPS 프로토콜은 인증의 중요한 부분을 차지한다. 🍏 인증서를 통해서 데이터 제공자의 신원을 보장하고 도메인에 종속되게 한다. (인증서 도메인과 응답 도메인을 서버가 비교한다.) 🥟 mkcert을 이용해서 로컬 환경에서 신뢰할 수 있는 인증서를 만들 수 있다. 🍖 CA(certificate Authority)는 공인 인증서..

간단하게 Redux Saga 사용하기

redux saga는 redux의 미들웨어로 비동기 액션을 처리하기 위해서 사용하는 라이브러리이다. redux thunk에 비해서 더 많은 기능을 제공하기에 애용되는 라이브러리이다. 다소 설정이 복잡하지만, 반복되는 패턴이 많고 많은 기능을 제공한다. 스토어에 미들웨어 연결하기 ... import {legacy_createStore as createStore, compose, applyMiddleware} from "redux"; import createSagaMiddleware from "@redux-saga/core"; import reducer from "../reducers"; import rootSaga from "../sagas"; const sagaMiddleware = createSagaM..

프로그래머스 코딩테스트 연습 - 마법의 엘리베이터 JavaScript

function solution(storey) { let answer = parseInt(storey); const counting = (num, count) => { console.log(num, count); if(num count + num) { answer = count + num; } if(answer > count + 10 - num + 1) { answer = count + 10 - num + 1; // 10으로 만든 뒤 -10 } return; } const down = parseInt(num % 10); counting(parseInt(num / 10) + 1, count + 10 - down); // 자리 수 올림 counting(parseInt(nu..

프로그래머스 코딩테스트 연습 - 문자열 나누기 JavaScript

function solution(s) { let answer = 0; let first = ""; let same = 0; let notSame = 0; for(let i = 0; i 0) { answer++; } return answer; } 문제를 해결하는 데 있어서 헷갈렸던 부분은 첫 문자와 같은 문자 수와 다른..

useTransition, useDeferredValue에 대해 알아보기

React 18에서 새로이 생긴 훅으로 useTransition, useDeferredValue가 있다. 이 두 훅의 사용으로 쓰로틀링과 디바운싱을 간단하게 해결할 수 있다. useTransition, useDeferredValue를 사용하면 실행순서를 뒤로 미룰 수 있다. useTransition const [isPending, startTransition] = useTransition(); useTransition을 사용하는 대표적인 예로 검색 미리보기를 들 수 있다. 검색 결과가 많으면 렌더링이 많아져 렉이 걸릴 수도 있다. 나중에 업데이트 해도 되는, 우선순위가 낮은 함수를 구분할 수 있게 해준다. startTransition 인자로 콜백 함수를 넣는데 내부에 우선순위가 낮은, 나중에 실행될 함수..

Optional chaining (?.)에 대해서

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

React Native에서 ethers.js 라이브러리 설정하기

ethers를 비롯하여 필요한 라이브러리를 설치한다. npm i ethers @ethersproject/shims react-native-get-random-values 타입스크립트를 사용할 때 npm i ethers @ethersproject/shims react-native-get-random-values @types/react-native-get-random-values import React, {useState} from 'react'; import {Button, SafeAreaView, Text, View} from 'react-native'; import 'react-native-get-random-values'; import '@ethersproject/shims'; import {ethe..