리액트 네이티브 앱만들기 시작 설치 및 셋팅 react native install

이번 여행 이후 만들고 싶은 앱이 생겨 어플 만들기를 시작했다.

제일 먼저 리액트 네이티브로 앱을 만들기 위한 기본적인 설치와 세팅 방법을 담았다.

유튜브에 검색하여 따라하다가 난관에 부딪혔지만 오류들을 파파고 영어번역기를 돌려가며 해결하여 완성했다.

결국은 유튜버 'hatemogi'님의 영상과 번역기의 도움을 많이 받았다.

1년 전 세팅영상이라 지금과 좀 다른 점은 있으나 따라 하는데 큰 문제없다고 본다. 참고영상은 맨 아래 첨부해 두었다.

 

 

 

 

리액트 네이티브 어플만들기  - 설치 세팅 하기

React Native install

 

---

 

 

우선 터미널 켜기

 

 

폴더를 만들고 그 안에 리엑트네이티브를 설치한다.

 

1. 폴더 만들기

mkdir 만들폴더명

mkdir reactnative

 

2. 폴더로 이동하기

cd 이동할폴더명

 

3. 폴더에 리엑트네이티브 설치하기

npm install expo-cli

 

 

설치 중

 

 

1. 파일 만들기

npx create-expo-app 만들파일명

 

2. 패키지 설치해라

y

y

 

 

설치 중... 너의 프로젝트는 준비됐어!

 

 

 

 

1. 만든 파일로 이동

cd 이동할파일명

 

2. npm start

a를 누르면 안드로이드가 열리고

i를 누르면 아이폰 시뮬레이터가,

w를 누르면 웹이 열린다.

(단 안드로이드, 아이폰은 xcode 설치해야 해당 단축키 입력 시 시뮬레이터가 열린다.)

 

3. 나가고 싶으면 ctrl+c를 눌러라.

 

 

 

1. w를 눌러 웹을 켜려고 하니 다음과 같이 입력하여 설치를 진행하라고 한다. (프로젝트를 진행할 폴더 안에 설치)

npx expo install react-native-web@~0.18.10 react-dom@18.2.0

 

 

 

프로젝트를 진행할 폴더 안에 설치한다. 위와 똑같이 입력한다. (검은색)

 

 

설치가 완료된 후 이제 w를 누르면 웹이 켜진다.

 

웹 성공적으로 완료했어!

 

 

 

이제 vscode를 켜보자.

 

 

App.js에서 <Text></Text> 내용 변경만 간단히 해주었다.

 

 

이제 리액티브 네이티브 설치, 세팅이 완료되었다.

 

 

 

참고영상

https://www.youtube.com/watch?v=TkJtqgd1mKM&t=394s