화제의 Vue Native를 Expo를 사용하여 개발 환경을 만듭니다.

Vue Native가 신경이 쓰였으므로, Vue Native의 개발 환경을 만들어 보았습니다.
수중의 iPhone 디바이스상에서 Expo로부터 개발을 할 수 있을까 시험해 보았던 곳, 움직일 수 있었으므로 그 방법을 써 보겠습니다.

(처음에는 Expo의 CLI에서 프로젝트를 만들고 Vue Native의 종속성을 해결하는 방법으로 시도했지만 잘 가지 않았기 때문에 Vue Native를 통해 프로젝트를 만들어 Expo를 통해 작동시키는 아래의 단계 시도한 곳 문제없이 움직였습니다.)

환경


  • Node: 9.9.0
  • NPM: 6.0.1
  • Expo(exp): 54.0.0
  • OS: Elementary OS(Linux x360 4.13.0-43-generic)

  • Vue Native 도구 설치


    npm install -g vue-native-cli
    

    프로젝트 만들기


    vue-native init Hogehoge
    

    Expo를 사용하기 전에 시작하여 확인해 보았습니다.
    cd Hogehoge
    yarn start
    

    잠시 시간이 걸리지만 시작됩니다. Android 에뮬레이터를 시작해 보았는데 문제없이 시작하는 것을 확인할 수 있었습니다.

    Expo를 사용하여 iPhone 기기에서 확인



    기존의 React Native 프로젝트(이번에 있으면 방금 작성한 Hogehoge 프로젝트)에 어떻게 Expo로 기동시킬 것인지, 지금까지는 Expo의 명령으로 밖에 프로젝트를 만들지 않았기 때문에 기존 프로젝트에 대한 Expo 대응을 알고 문서를 찾지 못했지만 대응 절차로는 찾을 수 없습니다. 의존하는 것이 없을까라고 생각해, 다음과 같이 시험에 exp 커멘드로 프로젝트를 시작해 보았습니다.
    exp start
    

    그러자 QR 코드가 보이는 평소의 Expo 프로젝트로서 일어났습니다!
    떨리는 손으로 우뚝 솟는, iPhone에서 Expo 앱을 시작해 본 곳 방금 만든 프로젝트명이 나와 있었으므로 그것을 클릭하면, Expo 앱상에서, Vue Native가 일어나는 것을 확인할 수 있었습니다.

    에디터에서 App.vue를 수정하면(My Vue Native App 뒤에!!! 추가) 아래 그림과 같이 수정이 반영되었으므로 Vue Native 앱 개발을 수중의 iPhone 디바이스에서도 할 수 있게 되었습니다!



    일단 Linux상에서, Vue Native 앱을 괴롭히게 되었으므로, 앞으로 여러가지 놀아 보고 싶습니다.

    좋은 웹페이지 즐겨찾기