새소식

앱개발(JS)

앱개발 학습. 개발환경 세팅(expo 세팅, 프로젝트 생성 및 확인)

  • -
728x90

VSCode terminal 오류

'expo'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.
'expo' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다.

이 두가지 메세지가 거의 한시간을 괴롭혔다..

터미널에 expo init sparta-myhoneytip-hun 을 입력하면 프로젝트가 생성되어야 하는데..위의 메세지만 뜬다.

powershell 에서는 아래 메세지, cmd에서는 위의 메세지..

구글링을 통해 환경변수 Path 에 npm경로를 넣어주니 해결.

c에 npm깔고 p에 프로젝트를 만들어서 그런걸까. 이유는 모르겠지만 해결.


 

 

// 앱개발 종합반 - 1주차(스파르타코딩클럽)

리액트 네이티브 & Expo  +  JSX 문법 언어

  • React(웹 개발 프레임워크) + Native
  • 라이브러리라고 생각하면됨

Expo란?

  • 완전치 자바스크립트만으로 네이티브한 기능까지 개발하고 싶다면.
  • Expo로 React Native를 조정하는 것
  • Expo를 통해서 배포하면 배포가 정말 쉬워진다함
    • Expo 계정과 안드로이드 ios 계정을 연결시켜줘야 함(한번의 명령으로 배포가 가능함)
  • Expo-cli (expo커맨드라인 다발)설치 중 경고메세지 떴으나 cli설치 자체는 문제없이 진행되었으므로 기록만 해둠
C:\Users\oppa9>npm install -g expo-cli
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.

added 1697 packages, and audited 1698 packages in 49s

126 packages are looking for funding
  run `npm fund` for details

26 vulnerabilities (6 moderate, 17 high, 3 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

로컬에 expo 계정 세팅하기

Expo 프로젝트 만들기

expo init sparta-myhoneytip-hun

// expo init 원하는 프로젝트명

Expo 프로젝트 실행해보기

터미널에 expo start 치면 웹뷰가 자동으로 뜬다 하였으나..... 안나온다

구버전에서 제공하는 기능이란다..강의업데이트를 하든지..자막으로 설명을 좀 달아놓든지..안되면 알아서 하라는 모습이 자꾸 실망스럽다

 

expo start --tunnel 로 실행하고 터미널에서 번들링 결과를 확인하자

 

Expo 프로젝트 폴더 구조

  • asset
  • node_modules : 자바스크립트 도구들이 들어있음. 설치해서 사용하는 형태
  • App.js : 가장 먼저 실행되는 앱 도입부
  • app.json : 앱 설정 설명서(배포시 마켓에서 확인함)

Node.js

  • 자바스크립트 선물상자. 개발환경 구축

NPM

  • 필요한 자바스크립트 앱 개발도구들을 가져와 사용하는 형태
Contents
  • -

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.