React-native 시작하기..

이제 드디어 React-native를 시작한다. 

 

마침 개인 학습에 필요한 앱이 생겨서 공부하면서 개발을 해 보려고 한다. 

 

React-native를 위한 프로그램 및 안드로이드/IOS 셋팅은 아래 링크에 잘 나와있다.

 

이 링크를 보고 필요한 안드로이드/IOS 셋팅을 해 주자. (난 이미 환경 셋팅이 되어 있으므로 패스~)

https://www.reactnative.dev/docs/environment-setup

Setting up the development environment · React Native

PC는 MAC을 주로 사용하고, 에디터는 Visual Studio Code (VSCode)를 사용할 예정임. 

이제 프로젝트를 생성하고 시작 해 보자.. 

 

참, 프로젝트를 생성할때 여러가지 방법으로 생성을 할수 있으나.. 나는.. 

 

Create React Native App 을 사용할 예정 

 

왜??

1.Native파일에 접근 권한을 가진 어플 생성(android, ios)
2.expo의 sdk 접근 가능 및 qr코드를 통한 프리뷰 기능 가능 (expo install 커맨드를 입력 받을 수 있게 해 줌)

즉, 기본설정 + expo sdk 기능을 가지고 있기 때문에 앱을 만드는데 아주 유용할 것임. 

 

프로그램 설치

npm i -g create-react-native-app

앱 생성

npx create-react-native-app 를 입력하고 엔터
What is your app named? > 앱 이름 넣고 엔터
How would you like to start > 그냥 엔터(디폴트 사용)

또는

npx create-react-native-app 앱 이름 을 입력하고 엔터
How would you like to start > 그냥 엔터(디폴트 사용)

이상이 없으면 종료 되면서 앱을 실행할 수 있는 명령어를 보여줌 

 

안드로이드 실행 : npm run android
IOS 실행 : npm run ios

앱 생성

 

create-react-native-app 을 사용해서 앱이 생성이 되었으면 code 앱이름 하고 엔터.

 

그러면 VSCode 가 실행이 되면서 해당 프로젝트의 폴더의 내용을 가져오게 됨.

 

앱 실행은 VSCode 의 TERMINAL에서 하게 되는데 이 TERMINAL은 

단축키 : Ctrl + `(백틱 : 숫자 1 옆에 있는것) 

또는 상단메뉴 View > Terminal 을 클릭하면 된다. 

이 TERMINAL에 프로젝트의 root 디렉토리가 나타나게 되고 여기에 

npm run android 를 입력하면 된다. (ios 는 npm run ios)

이후 컴파일 및 실행에 필요한 파일들을 엄청 다운받게 되고.. 이 작업이 완료가 되면 안드로이드 애뮬레이터가 실행이 된다. 

안드로이드 애뮬레이터 실행화면

그리고 내가 만든 앱을 컴파일을 해서 바로 실행시켜 준다. (처음 생성할때 약 10분 걸렸음... 너무 오랜만이라...)

바로 앱이 안뜨면 아마도 화면 아래에 

› Press a │ open Android
› Press w │ open web

› Press r │ reload app
› Press m │ toggle menu

› Press ? │ show all commands

이런 문구들이 있을텐데.. 이때 a를 입력하면.. 애뮬레이터에 앱 building이 시작되고 완료되면 앱이 열린다. 

서버를 종료할때는 VSCode 에서 Ctrl + C를 입력하면 된다. 

물륜 애뮬레이터는 우측상단 X 를 클릭하면 종료됨 . 

이상으로 React Native 를 처음 생성하고 애뮬레이터를 띄우는 것까지..  휴... 아직 갈길이 멀군요 .. ㅎㅎ 

앱을 만들기로 작정을 했으니.. 꾸준히.. 부지런히 달려 봅시다~~!!!