[미리 설치해야할 것](윈도우 사용자)https://nodejs.org/download/release/v12.19.1/node-v12.19.1-x64.msi-node, npm설치 https://code.visualstudio.com/-visual code설치(맥 사용자)https://apps.apple.com/kr/app/xcode/id497799835?mt=12-Xcode설치 https://nodejs.org/download/release/v12.19.1/node-v12.19.1.pkg-Node, npm설치[오늘 요약]1. NVM설치:https://github.com/coreybutler/nvm-windows/releases2 . node 12버전 설치 후 사용:nvm install 12이후 nvmuse 12.22.123. expo-cli설치:npm install-g expo-cli 4. expo실행 및 배포:expo start-tunnel 5. 플레이 스토어에서 expo-go검색 후 서버에 표시된 QR로 접속[미리 설치해야할 것](윈도우 사용자)https://nodejs.org/download/release/v12.19.1/node-v12.19.1-x64.msi-node, npm설치 https://code.visualstudio.com/-visual code설치(맥 사용자)https://apps.apple.com/kr/app/xcode/id497799835?mt=12-Xcode설치 https://nodejs.org/download/release/v12.19.1/node-v12.19.1.pkg-Node, npm설치[오늘 요약]1. NVM설치:https://github.com/coreybutler/nvm-windows/releases2 . node 12 버전 설치 후 사용: nvm install 12 이후 nvmuse 12.22.123. expo-cli 설치: npm install – gexpo-cli 4. expo 실행 및 배포: expostart-tunnel 5. 플레이스토어에서 expo-go 검색 후 서버에 표시된 QR로 접속[목차] 0. Expo란 무엇입니까?1 환경설정(0)-nvm에서 노드 버전 관리 2. 환경설정(1)-expo-cli 설치 3. 환경설정(2)-EXPO 가입 4. 테스트용 EXPO 프로젝트 작성 및 실행 5. QR코드를 사용하여 서버 접근[목차] 0. Expo란 무엇입니까?1 환경설정(0)-nvm에서 노드 버전 관리 2. 환경설정(1)-expo-cli 설치 3. 환경설정(2)-EXPO 가입 4. 테스트용 EXPO 프로젝트 작성 및 실행 5. QR코드를 사용하여 서버 접근0. Expo가 뭐예요?1. 리액트 네이티브는 JS 언어 하나이고 안드로이드와 IOS 앱 두 가지를 개발하는 데 도움이 되는 라이브러리 2. Expo는 이 리액트 네이티브를 보다 쉽게 개발할 수 있는 도구입니다.1. 리액트 네이티브는 JS 언어 하나이고 안드로이드와 IOS 앱 두 가지를 개발하는 데 도움이 되는 라이브러리 2. Expo는 이 리액트 네이티브를 보다 쉽게 개발할 수 있는 도구입니다.[그림1].Expo의 역할위 그림과 같이, 리액트 네이티브를 감싸 안드로이드, IOS 코드로 컨버전 해주는 역할인 것 같아..~ 생각중이다.안드로이드 하려면 [코틀린, 자바]를 알아야 하고 IOS를 하려면 [스위프트]를 알아야 하는데 개발자가 Expo를 사용하면 해당 언어를 공부할 필요가 없다. 그럼 Expo가 무조건 좋겠구나?expo의 단점(1) 결국 expo라는 서비스를 이용하여 개발을 하기 때문에 깊은 수준의 기능 구현이 어렵다(2) 그래서 나중에는 expo를 제거하고 (3) 순수한 React Native를 사용해야 하는데 (4) 그전까지 배포도 해보고 간단하게 테스트하기 쉬우니까 사용하는 것이다환경설정(0)-nvm에서 노드버전 관리요즘 js는 대부분 노드 js 위에서 동작한다고 한다.노드 js는 별거 아니라 자바스크립트를 프로그래밍 언어처럼 쓰려고 만든 것으로 대충 이해하면 될 것 같다.때문에 노드 버전이 계속 업데이트 되고 있지만 버전이 높거나 낮으면 충돌 등의 문제가 발생한다. 그러면 노드 버전 관리를 해줘야 하는구나?nvm을 사용하는 이유# # nvm 치크 도윈(1-우링치)https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh # nvm 설크 설링(2-MAC)curl -o- https://github.com/coreybutler/nvm-windows/releases | bash# # nvm 치크 도윈(1-우링치)https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh # nvm 설크 설링(2-MAC)curl -o- https://github.com/coreybutler/nvm-windows/releases | bash[그림 2]. Windows 설치 파일[NVM 버전 주소]Node.jsNode.js는 Chrome의 V8 자바스크립트 engine.nodejs.org 상에 구축된 자바스크립트 런타임입니다.Node.jsNode.js는 Chrome의 V8 자바스크립트 engine.nodejs.org 상에 구축된 자바스크립트 런타임입니다.[nvm 설치 (12 버전 기준)] # nvm install 12 [설치 확인] # # nvm ls[nvm 설치 (12 버전 기준)] # nvm install 12 [설치 확인] # # nvm ls[그림3]. 설치된 nvm 버전 정보 조회 예[만약 nvm버전을 바꾸고 싶다면?] ? =>아래는 12버전으로 낮추는 명령어] #nvmuse12[cmd로 할 때는 관리자 권한으로 켜주세요, 아니면 아래와 같은 오류가 발생합니다.][오류로그] nvmuse 오류 관련 오류를 찾아보니까 관리자 권한으로 실행이 안 돼서 그래. cmd를 관리자 권한으로 해서 문제를 만들어서… blog.naver.com2. 환경설정(1)-expo-cli 설치[Expo 툴다발설치] # npm install -g expo-cli + permition deny 에러발생시 (MAC기준) # sudonpm install -g expo-cli-g옵션 : Global 약자로 컴퓨터 어디서나 expo-cli를 꺼내 사용할 수 있도록 처리하는 3. 환경설정(2)-EXPO 가입[그림 3]. 엑스포 툴과 엑스포 서비스가 수행하는 일[Expo 가입 링크] #https://expo.io/signup상기 사이트에 가입한 후 로컬 환경의 expo 툴 묶음을 연결시키면 된다.expo login –username “Expo에 가입한 name 정보”expo login –username “Expo에 가입한 name 정보”[그림4].expo 가입 이름가입명은 Expo 사이트에서 profile에 들어가면 아코롬 표기되어 있다.아래와 같이 입력하면 로컬과 해당 EXPO 서비스가 연결된다.[그림 5].expoLogin 예4. EXPO 테스트 프로젝트 작성 및 실행# wegram이라는 테스트 프로젝트를 만들려면?? expo init wegram# wegram이라는 테스트 프로젝트를 만들려면?? expo init wegram[그림6] .expo를 이용한 테스트 프로젝트 작성 (하늘: blank)expo init [프로젝트명] 명령어로 생성 가능하다 빈 프로젝트를 작성해라 blank 옵션을 선택해줬다 어?? 오류가 나는데?JavaScript종속의 인스톨에 잘못이 있는 경우. 실 로그를 확인하세요. 앱의 초기화를 계속합니다. ·이슈#2105·expo/expo-cliyrjwcharm이 2020년 5월 12일 말했습니다 2 giovannids와 iakashsrivastava가 thumbs up emoji에서 반응했어요 2020년 5월 12일에 멤버 brentvatne이 말했습니다만, 프로젝트 디렉터리에 들어 실을 보내겠습니다.아마 당신의 머신에 문제가 있을까요. 5 giovannids, Chandu4221… github.comJavaScript 의존 관계의 인스톨에 오류가 있는 경우. 실 로그를 확인해 주세요. 앱 초기화를 계속합니다. · 이슈#2105·expo/expo-cliyrjwcharm이 2020년 5월 12일에 코멘트했습니다 ➂ 2giovannids와 iakashsrivastava가 thumbs upemoji로 반응했습니다 2020년 5월 12일에 멤버 brentvatne이 코멘트했는데 프로젝트 디렉토리에 들어가서 실을 달립니다.아마 당신의 기계에 문제가 있는 것 같습니다. 5 giovannids, Chandu4221… github.com[그림7]. 에러발생 및 해결방법expoinit의 경우 yarn 방식이 default인데 기존 yarn 패키지가 설치되어 있지 않아서 생기는 문제인 것 같다.–npm 옵션을 통해 yarn 대신 npm에서 의존성을 받아 오도록 하면 된다.”warn init” cli (warn native tip)tl:dr-run expo init ‘project_name’ -npm 이 가이드에서는 npm 사용법을 소개합니다. dev.to”warn init” cli (warn native tip)tl:dr-run expo init ‘project_name’ -npm 이 가이드에서는 npm 사용법을 소개합니다. dev.to방법(1):expo init wegram–npm 방법(2):npm installyarn에서 yarn 패키지를 설치한 후 expo init wegram방법(1):expo init wegram–npm 방법(2):npm installyarn에서 yarn 패키지를 설치한 후 expo init wegram[그림 8] 나는 방법 2를 사용했다.[프로젝트 실행 및 배포] expostart 혹은 expostart–tunnel 중 하나를 하면 된다.[프로젝트 실행 및 배포] expostart 혹은 expostart–tunnel 중 하나를 하면 된다.[그림9]. 정상 실행 화면5. QR코드를 이용하여 서버 접속[그림10]. 플레이스토어, 앱스토어에서 ExpoGO 설치[그림11]. 카메라로 QR코드를 찍어 접속하면 서버접속 성공 앱스토어와 같은 곳에 Expo Go를 검색하여 설치하고 [그림9]에 나오는 QR코드로 휴대폰 카메라에 접속하면 서버 응답을 얻을 수 있다(단, 현재는 같은 네트워크에 있어야 한다) =>와이파이 등..) #본 게시물은 스파르타코딩클럽 강의내용 정리입니다 #게시 첨부된 이미지의 일부는 스파르타코딩클럽 수업 중 발췌한 자료입니다. 오늘 하루도 공부하게 되어 정말 감사합니다. 2022-09-11 개발자 최창혁