[React Native] 초초초간단 왕초보 앱 만들기(1) - 설정부터 앱 실행까지

들어가기 전에

배경지식을 공부하지 않고, 일단 내 핸드폰에서 실행되는 어플을 보고 싶다면
일단 한번 따라해보자.

 

앱개발 설정

1. 노드와 npm을 설치한다.

노드(node.js) 홈페이지에서 LTS 버전을 OS에 맞게 설치한다.
다운로드 페이지 : https://nodejs.org/en
위의 페이지에서 노드를 설치하면 npm(node package manager)은 자동으로 같이 설치된다.
 
이미 설치되어 있다면 생략한다.
설치되었는지 확인하는 방법은 아래와 같다. (설치된 버전의 확인방법과 동일하다)

// node.js 버전 확인
node -v

// npm 버전 확인
npm -v

 

2. VS code를 실행한다.

VS code가 없다면 먼저 설치하고, (다운로드 페이지 : https://code.visualstudio.com/download)
개발을 시작하고자 하는 폴더 위치로 프로젝트를 연다.
[파일] -> [폴더열기] -> 원하는 폴더 선택
 

3. 터미널창을 연다.

터미널 창의 단축키
window 기준 [ctrl] + [shift]+ [`] 
mac 기준 [ctrl] + [`]
 
[`]는 역따옴표이고,
맥에서는 영문으로 두고 [₩] 키를 누르면 역따옴표가 나온다.
 

4. expo 앱을 만든다.

3번에서 열었던 터미널창에서 위의 빨간색 박스 부분에
mac은 [zsh], window는 [PowerShell] 로 창이 열리도록 선택한다.
 
그리고 아래 코드를 복사해서 붙여넣고 엔터(Enter)를 친다.
[AwesomeProject] 는 내가 만들고 싶은 프로젝트명으로 변경해서 입력해도 된다.

npx create-expo-app AwesomeProject

cd AwesomeProject
npx expo start

 
 

5. expo 프로젝트를 실행시킨다.

4번을 실행한 후 기다리면 아래와 같은 화면이 나온다.
아래 내용을 읽어보면,
프로젝트를 실행하기 위해 디렉토리로 이동을 하고 npm 명령어를 실행하라는 문구가 있다.

 
위의 상태는 이미 프로젝트 앱이 실행된 상태이므로, 나중에 다시 실행하려할때는 아래와 같은 명령어를 입력한다. 
프로젝트 이름을 변경해서 만든경우 cd 뒤에 AwesomeProject 대신 변경한 이름을 입력한다.

//디렉토리 이동
cd AwesomeProject

//아래 세가지중 원하는 os를 선택해서 실행
npm run android
npm run ios
npm run web

 
 

앱 실행해보기

5번까지 완료했을때는 앱 서버가 실행된 상태이다. (192.168.0.15:8081 주소로 실행된 상태이다.)
이제 실제 앱에 접속해볼 수 있는 두가지 방법이 있다.

1. 시뮬레이터로 실행하기

5번에서 사용하던 터미널창에서 아래로 명령어를 입력할 수 있다.

 

안드로이드로 실행

[a] 키를 입력한다.

안드로이드 sdk 설치가 필요하고 복잡하기 때문에 여기에서는 패스하겠다.

 

ios로 시뮬레이터 실행

[i] 키를 입력한다.

mac에서만 사용이 가능하다. 
아래는 맥에서 ios로 시뮬레이터를 실행시킨 화면이다.

 

web으로 실행 

[w] 키를 입력한다.

web은 바로 실행되지 않고, 아래와 같은 메시지가 나온다.

 

터미널창에서 [+]버튼을 클릭하여 터미널 새창을 열고, 아래 명령어로 라이브러리를 설치한다.

npx expo install react-native-web@~0.19.6 react-dom@18.2.0 @expo/webpack-config@^19.0.0

 

다시 원래 터미널로 돌아가서 [w]버튼을 누른다. (또는 새로운창에서 `npm run web`을 실행한다.)

그러면 아래와 같이 웹 브라우저에서 앱이 실행된다.

 

2. 핸드폰으로 실행하기

핸드폰으로 실행하기 위해서는 [Expo Go] 라는 앱이 필요하다.
앱을 설치하고나서 위의 QR코드를 핸드폰 카메라앱에서 스캔한다. 

 
링크를 누르면 앱이 핸드폰에서 실행된다.
이때 앱을 실행시키는 핸드폰과 앱서버가 있는 컴퓨터가 같은 인터넷 망을 사용해야 한다.
그러므로 노트북과 핸드폰이 같은 와이파이를 사용하게 해야 한다.
만약 인터넷망을 다르게 사용한다면 아래와 같은 화면이 나올것이다. (왼쪽은 갤럭시 안드로이드, 오른쪽은 아이폰 ios)