ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [VSCODE] react native, node.js 실행 / 실행 오류 해결
    개발 프로젝트: 핀더펜 2022. 2. 10. 01:30
    728x90

    지난 포스팅에서 clone한 프로젝트를 실행해보겠습니다.

    react native 실행

    터미널 창을 열고

    client 폴더에 접근해서 npm start로 react native를 실행합니다.

     

    그런데....

    'expo'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.

    위와 같은 오류가 생겼습니다...ㅜ

    그래서 구글에 찾아보니 npm 폴더의 위치를 찾아서 환경변수에 등록하라고 해서 그대로 해봤습니다.

    cmd에서 npm -g root 로 npm 폴더의 위치를 찾습니다. 그리고 환경변수 설정에서 path에 C:\Users\[사용자명]\AppData\npm을 추가해줍니다.

     

    그런데도 동일한 오류가 발생했습니다.... 그래서 프로젝트 폴더를 확인해봤더니 expo-shared는 있는데 expo는 없더라구요... 그래서 expo를 추가해줬습니다.

    expo 설치

    그런데도 다음과 같은 오류 발생....

    Unable to find expo in this project - have you run yarn / npm install yet?

    그래서 오류에서 힌트를 준 대로 npm install을 했더니

    프로젝트 폴더에 node_modules 가 생겼고 오류 없이 실행할 수 있었습니다! 깃 허브에 올라가지 않은 폴더가 있어서 오류가 났었습니다.ㅜㅜ 제 경우 처음부터 npm install을 했더라면 문제 없이 실행할 수 있었을 듯 합니다...ㅜ

    실행 결과 화면

    실행결과에 나온 url로 들어가 보면

    위와 같은 화면이 웹페이지에 뜹니다. 터미널창과 웹페이지에 동일한 QR 코드를 확인할 수 있는데요. 이 코드를 이용해서 핸드폰에서 앱을 확인할 수 있습니다.

    • 안드로이드에서는 'expo' 라는 앱을 다운받아 코드를 찍으면 앱에 접근할 수 있습니다.
    • ios에서는 기본 카메라로 코드를 찍어 접근할 수 있습니다.

    안드로이드 expo앱
    실행 결과

    터미널에서 QR코드 밑에 위와 같은 도움말이 있었습니다. 그래서 노트북 환경에서 앱을 실행히보기 위해 'a'를 입력해보니

    android amulator가 실행되면서 앱이 깔리고 위와 같은 화면이 나타났습니다. android amulator는 안드로이드 스튜디오를 설치하고 가상 디바이스를 생성해야 합니다.

     

    ctrl + c 로 react native를 종료하고 이제 node.js를 실행해보도록 하겠습니다.

     

    node.js 실행

    server 폴더에 접근하고 npm run start로 실행합니다.

    결과 페이지

    이 또한 ctrl + c로 종료합니다.

    728x90

    댓글

Designed by Tistory.