-
[React Native] 설치 및 기본 실행앱개발/안드로이드 앱 개발 2018. 5. 18. 04:02
react-native-설정 React Native 설치 및 기본 설정
본 문서의 모든 내용은 MacOS에서 수행된 내용이다. Windows 환경이나 기타 *nix (Unix, Linux 계열) 환경은 홈페이지를 참조하기 바란다.
설치
설치는 간단하다. 필자는
npm
을 사용해서 설치하였다.xxxxxxxxxx
npm install -g create-react-native-app
위의 명령이 끝이다. 반드시 -g 옵션을 통해 글로벌로 설치하여, 항상 커맨드 라인에서 사용할 수 있도록 하는 것을 주의하자. 또한, npm 패키지들의 설치 경로가 path 에 포함이 되어있어야 함은 기본이다.
이후에는 설치한 툴을 실행하면 간단하게 기본 프로젝트를 생성할 수 있다.
xxxxxxxxxx
create-react-native-app FirstReactNativeApp
FirstReactNativeApp 이라는 이름을 가진 폴더 내에 프로젝트가 구성 된다.
cd FirstReactNativeApp
명령을 통해 폴더에 들어간 후,npm start
를 실행하면 기본 앱을 확인 할 수 있다. 커맨드 실행 시 나오는 화면은 다음과 같다.실제로 핸드폰이나 시뮬레이터/에뮬레이터에서 확인하기 위해서의 위의 화면에 보이는 설명을 따라하면 간단하게 확인할 수 있다.
하나의 플랫폼에서만 실행하고 싶을 경우에는,
npm run android
혹은npm run ios
명령을 통해서 android/ios 중 원하는 플랫폼만을 선택해서 실행 할 수도 있다.오류
ELIFECYCLE 에러
첫 실행 시
ELIFECYCLE
에러로 인해npm start
가 제대로 수행되지 않았다. 검색 결과watchman
설치를 해야 함을 알 수 있었다.설치하기
watchman
설치에 대한 자세한 내용은 공식 홈페이지 에서 확인하길 바란다. 여기서는 필자가 사용한 방식만을 소개한다.필자는
brew
패키지 관리 시스템을 이용하여 간단하게 설치 하였다.brew update
brew install watchman
이후
npm start
를 수행하면 정상적으로 수행된다. 간단히 해결하였다.'앱개발 > 안드로이드 앱 개발' 카테고리의 다른 글
[안드로이드] Thread and parallelism - 1 (0) 2018.04.03 [안드로이드] 안드로이드에서 HTTP 연결하고 데이터 처리하기 (0) 2018.03.30 안드로이드 앱 개발 관련 참고사이트 (0) 2018.02.13 [도전과제] 도전과제 2. 글자 수를 표시하는 SMS 입력 화면 (0) 2016.10.02 TextView(텍스트뷰)와 EditText(입력상자)의 다른 기능들 (0) 2016.10.01