unit test javascript with jest

by

Jest 강좌 플레이리스트 by 코딩앙마

6개 시리즈로 강좌 10분씩 

한국어로 설명하며 가장 좋은 강좌

https://www.youtube.com/playlist?list=PLZKTXPmaJk8L1xCg_1cRjL5huINlP2JKt

image
image
image
image
image
image
image
image
image
image
image

.

비동기 함수 테스트

1. 콜백 함수 테스트

2. 비동기함수에서 에러를 throw하는 것을 테스트에서 catch 하는방법


3. promise를 이용하는 경우

아래에서 return구문 사용한것에 유의




위의 것을 사용해도 되고 아래것을 사용해도 된다

.

.

.

.

.
https://youtu.be/sVX6LNiNAeA

https://youtu.be/2d-SX8YRyis

image

.

.

React Testing Tutorial (Jest + React Testing Library)

20분 분량 설명이 매우 좋다

https://youtu.be/ML5egqL3YFE

image

react component 유닛 테스트를 위해 아래 라이브러리가 추가로 필요하다

image

.

.

afterEach 의 cleanup을 통해 화면(screen)을 클리어 해준다.

image
image

.

.

snapshot을 위해 react-test-renderer를 사용한다.

image
image

코드 작성후 npm run test를 해주면 아래와 같이 스냅샷이 만들어지고 저장된다.

image

다시한번더 npm run test를 했을때 스냅샷과 차이가 없으면 pass

차이가 있다면 아래와 같이 에러 발생하고 이상황에서 u를 눌러주면 스냅샷 업데이트가 된다.

image

what is proxy contract

by

original source : https://ethereum.stackexchange.com/a/114811

A proxy contract is a contract which delegates calls to another contract. To interact with the actual contract you have to go through the proxy, and the proxy knows which contract to delegate the call to (the target).

A proxy pattern is used when you want upgradability for your contracts. This way the proxy contract stays immutable, but you can deploy a new contract behind the proxy contract – simply change the target address inside the proxy contract.

Therefore it’s a bit dangerous to use a proxy contract, since there are no guarantees that the underlying (target) contract hasn’t been changed to a malicious one. There is no strict definition on how to detect a proxy contract, but basically it’s anything that delegates the functionality to another contract. You have to analyze the source code to be able to decide.

ethereum , solidity file 크기 줄이는 방법

by

https://ethereum.stackexchange.com/a/124027

  • Get rid of any library (like that of OpenZeppelin’s Enumerable or Ownable) whose only few functions you would need. Instead, define those specific functions yourself. (이 방법은 실제로 stellaiam 개발시 사용해봄 효과 있음)
  • Identify any public variables that can be made private, the compiler adds a getter function by itself which adds to the code size.
  • If you have a lot of comments, get rid of them or shorten them.
  • The last resort: try to shorten the error message, variable names.

.

.

.

modifier에 코드를 작성해서 그냥 사용하지 말고 다른 함수에 코드를 작성하고 modifier에서는 함수를 호출하는 방식으로 하면 사이즈가 줄어든다. 실제 Ownable 코드를 확인해 보면 이미 안에 이런 형식 형식으로 작성되어있다. 그래서 stellaiam개발시 사용해보지는 못했다.

 https://youtu.be/XDqD3X8DCiw

metamask를 사용하는 사용자 주소와 같이 ethers js를 이용 스마트 컨트랙트와 통신하는 방법

by 
const provider = new ethers.providers.Web3Provider(window.ethereum, "any");
// Prompt user for account connections
await provider.send("eth_requestAccounts", []);
const signer = provider.getSigner();
console.log("Account:", await signer.getAddress());

https://stackoverflow.com/a/67836760

node개발팁 공부 요약

by

node가 front end처럼 작동할때는 fs에 접근이 불가능하다. 즉 front end에서는 보안문제 방지를 위해 사용자의 컴퓨터 파일 시스템에 접근이 불가능하다. 

.

.

npm canvas를 이용해서 front end쪽에서 이미지를 create 한경우 fs 라이브러리를 사용할수 없기때문에 만들어진 이미지를 저장할수는 없지만 src path를 얻어서 바로 ui에 포함시킬수 있다.

https://stackoverflow.com/a/67231182

canvas.toDataURL()

.

.

민감한 정보는 dot env를 통해 따로 관리힌다

official doc : https://www.npmjs.com/package/dotenv

react 개발팁 공부 요약

by

create-react-app 으로 만들어진 앱의 경우 webpack config 화일은 

The files are located in your node_modules/react-scripts folder 안에 있다.

https://stackoverflow.com/a/48395890

.

.

react checkbox event handle

https://stackoverflow.com/a/51264645

.

.

object를 가지고 있는 useState 업데이트 방법

// To resolve that you need to use object destructing every time
// results will be state = {first: 3, second: 2}
setState(prev => ({...prev, first: 3}))

https://stackoverflow.com/a/71093607

.

.

react와 dot env를 같이 사용하는 경우 주의 사항이 있는데 확인해야 한다

https://medium.com/how-to-react/using-env-file-in-react-js-b2714235e77e

node npm webpack error 해결

by

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

https://stackoverflow.com/a/65556946

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")

module.exports = {
    // Other rules...
    plugins: [
        new NodePolyfillPlugin()
    ]
}