[React] react 에서 vConsole 사용하기(console) - 떽떽대는 개발공부

 

 

만약 react 로 모바일 환경을 코딩한다면 console. 창을 볼 수 없어 개발에 어려움이 생길 것이다.

모바일환경 개발 시 console 창을 구현할 수 있도록 vConsole 이라는 라이브러리가 있으니 활용 해보도록 하겠다.

// 라이브러리 설치
npm install vconsole

 

그리고 리액트의 가장 첫 부분인 index.js 에서 render 하기 전에 불러준다.

src/index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "@components/App";

window.onload = async () => {
    const { default: VConsole } = await import('vconsole');
    window._vconsole = new VConsole();

    console.log('vConsole opened!!')
    render()
}

function render(){
    ReactDOM.render(
        <App />
    , document.getElementById("app"));
}

 

App 컴포넌트가 render 되기 전에 vConsole 을 먼저 구현하기 위해 window.onload 를 이용하였고, async, await 를 이용하여 import 되는동안 기다릴 수 있도록 했다.

이렇게만 하면 구현은 모두 완료 되었는데 아래와 같이 오류가 발생했다.

Uncaught ReferenceError: regeneratorRuntime is not defined

사실 모바일 환경에서 위와 같은 오류가 발생하는 지 확인도 불가능하겠지만.. 일단 나는 데스크탑에서 확인중이니..ㅎㅎ

아무튼 이건 내가 await, async 를 사용해서 발생했다.

Chrome 55 부터 사용 가능한 기능이라, 이 부분에 대해 설정을 해주어야 한다.

이럴 경우 babel-polyfill 을 임포트 하면 해결할 수 있다고 하지만 난 그냥 .babelrc 에서 설정을 변경 해 줄 것이다.

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {"chrome": "55"},
        "debug": true
      }
    ], 
    "@babel/preset-react"
  ]
}

 

위와 같이 적용하면 완료!

이제 개발자모드 적용하지 않아도 vconsole 을 통해 콘솔 로그를 확인할 수 있다.