리액트네이티브의 cli를 가장 먼저 설치해주자.
cli는 "명령줄 인터페이스"이다. 기존의 화면에서 보이는 GUI와 달리, 가벼워서 사용된다고 한다.
npm install -g react-native-cli
다음으로는 리액트 네이티브를 설치해주자
npm install react-native
그렇다면 환영한다는 문구와 함께, 안드로이드와 윈도우에서 실행하는 방법을 안내해준다.
위에서 나온 내용보다는 블로그에 있는 내용을 따라 실행해보자. ( 블로그 내용이 굉장히 친절하다 )
지금 하고있는 것은 안드로이드 시뮬레이터를 구동시키기 위한 환경설정이다. (꽤나 오래걸릴 수도 있다.)
https://velog.io/@choel0304/TIL-React-Native
TIL - React Native (윈도우로 환경설정 및 첫 프로젝트)
윈도우로 리액트 네이티브를 실행하기 위한 환경설정
velog.io
위 글 내용 요약정리
- 자바 설치하고, 시스템변수 설정해주기
- 안드로이드스튜디오설치하고, SDK설치하고 시스템변수 설정해주기
이런.,. 나는 위에 링크를 따라했지만, 제대로 작동하지 않았다.
오류는 아래와 같다. 아마 empty result라는 것이 파일경로를 못찾은 것 같다.
헤헤 다행히도 똑같은 에러상황을 해결한 블로거를 찾았고, 폴더경로에서 한글폴더를 바꿔주었더니 해결되었다.
https://zibu-story.tistory.com/187
React Native Cli 초기세팅(윈도우), 오류시 해결방법
난위도 : ★★★★★ React 초기세팅은 프로젝트를 많이해서 어려움이 없었지만 React Native는 또 다른 느낌에 초기세팅이다. 솔직하게 구글링으로 처음부터 끝까지 혼자힘으로 했지만 시간을 많이
zibu-story.tistory.com
이거때문에 윈도우 컴퓨터내의 OneDrive의 동기화를 끊고, 로컬 바탕화면으로 전체파일을 옮기는 작업까지 진행했다. (OneDrive 가끔 이상해서, 언젠가 옮기려고 했음)
해결하고 아래 명령어로 실행해준다.
npm run android
이제 안드로이드를 실행하면, 정상적으로 시뮬레이터가 작동하는 화면이 보인다. (필자는 6분정도 걸렸다.)
기존 리액트와 다르게, 초기 환경설정에 시간이 굉장히 많이 들었다.
생각해보면, 한글폴더만 아니였다면 금방 되었을 것 같긴하지만..
다음 포스팅에는 메인페이지에 약간의 기능과 디자인을 넣어보자.
지금은 React-Native cli를 활용을 하였으나,
expo또한 expo-cli만 설치하여 프로젝트를 만들면 안드로이드 시뮬레이터가 잘 작동한다!
'React-Native' 카테고리의 다른 글
리액트 네이티브는 무엇인가? (0) | 2023.01.09 |
---|