문제 풀기 React - web3 연결

실제 화면에 함수로 구현하는 부분은 React를 활용하였지만 class로 작성을 하였기 떄문에 따로 참고를 하지 않았습니다.

React에서도 Web3를 사용하는 방법은 제가 배웠던 방법과 많이 다르지 않았습니다.

일단 기본적으로 window.addEventListener("load")를 통해서 윈도우가 로딩될떄를 활용하였습니다.

총 3단계를 통해서 접속을 시도 하게 되는데

처음에는 window.ethereum입니다.

window에 ethereum이 있는지를 확인하고 해당 값을 사용합니다.

만약 이 부분이 통과되지 않는다면 window.web3를 활용합니다.

이후 최후의 보루로는 직접 Ganache에 연결을 시도 합니다.

window.addEventListener("load", async () => {
            // Modern dapp browsers...
            if (window.ethereum) {
                const web3 = new Web3(window.ethereum);
                try {
                    await window.ethereum.enable();
                    resolve(web3);
                } catch (error) {
                    reject(error);
                }
            }
            // Legacy dapp browsers...
            else if (window.web3) {
                // Use Mist/MetaMask's provider.
                
                const web3 = window.web3;
                resolve(web3);
            }
            // Fallback to localhost; use dev console port by default...
            else {
                const provider = new Web3.providers.HttpProvider(
                    "http://127.0.0.1:9545"
                );
                const web3 = new Web3(provider);
                resolve(web3);
            }
        });

이후의 함수적인 활동은 class를 활용하였기 떄문에 제가 알고 있는 방식과 달라서 참고하지 못하였습니다.

시간이 많이 없기 떄문에 최대한 배속으로 진행을 하였고 전체적으로 어떻게 접속을 하고 어떻게 테스트를 할 수가 있었는지 알 수가 있는

의미있는 경험이였다고 생각합니다.

대충 코드를 확인해보니 web3.js 라이브러리를 활용한다는 점까지는 파악 했습니다.

후에 다시 코딩할 일이 생기면 연결 부분부터 또 활용까지 좀더 심도있게 공부해볼 생각입니다!!