recent mode 질문

안녕하세요 강의 잘 듣고 있습니다.

강의와 같이 소스를 작성했는데, MetaMask 연결 요청이 뜨지 않고, react 로고화면(초기화면)만 나오고 있습니다.
recent mode로 접근하지 않는 것 같은데,

무엇이 잘못 되었는지 궁금합니다. 작성한 App.js 같이 남깁니다!

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Web3 from 'web3';

class App extends Component{
  async componentDidMount() {
    await this.initWeb3();
  }
  initWeb3 = async() => {
    if (window.ethereum) {
      console.log('recent mode');
      this.web3 = new Web3(window.ethereum);
      try {
          // Request account access if needed
          await window.ethereum.enable();
          // Acccounts now exposed
          // this.eth.sendTransaction({/* ... */});
      } catch (error) {
          // User denied account access...
          console.log(`User denied account access error : ${error}`);
      }
    }
   // Legacy dapp browsers...
   else if (window.web3) {
     console.log('legacy mode');
      this.web3 = new Web3(Web3.currentProvider);
      // Acccounts always exposed
      // web3.eth.sendTransaction({/* ... */});
    }
   // Non-dapp browsers...
   else {
      console.log('Non-Ethereum browser detected. You should consider trying MetaMask!');
   }
  }
  render(){
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;