안녕하세요 기린입니다!!
첫 번째 개발 노트로 React Native를 소개합니다!
먼저 리액트 네이티브(React Native) 란!
Facebook에서 만든 오픈 소스 모바일 응용 프로그램 프레임 워크입니다.
다시 말해 기본 플랫폼 기능과 함께 React를 사용할 수 있도록 하여
Android, iOS, 웹 및 UWP 용 애플리케이션을 개발하는 데 사용된다고 합니다!
그럼 이번엔 Expo의 장점과 단점을 알아볼게요
장점
1. React Native를 위한 설정이 구성되어있어 개발편리
2. 배포하기 편하다. 처음 배포 후, 업데이트 버전은 publish만 해주면 자동 업데이트
단점
1. Expo에서 제공해주는 라이브러리만 사용이 가능하다. 외부 라이브러리를 사용 못함
2. Expo를 사용할 경우 추가적인 java와 object-c 코드 작성 못함
자, 이제 프레임 워크를 설치해봅시다.
개발환경 : 윈도우 10 홈, node.js 최신 버전 설치 (링크 https://nodejs.org/ko/ )
먼저, (선택 명령 프롬프트) cmd창을 열고
1. Expo CLI 설치
npm install -g expo-cli해당 명령어를 실행시켜 설치를 완료합니다.
2. Expo 프로젝트 생성
expo init kirinProject하고 싶은 프로젝트명을 정하여 프로젝트를 생성합니다. 저는 kirinProject라는 프로젝트로 생성하도록 하겠습니다.
여기서 탬플릿 선택창이 뜨는데
1. black 미니멀 앱으로 가장 별도의 세팅 없는 프로젝트 생성
2. black (TypeScript) TypeScript으로 구성된 프로젝트를 생성
3. tabs tab을 사용하는 프로젝트 생성
저는 black 탬플릿으로 생성하겠습니다.
cd kirinProject
npm start위의 명령어를 실행하여 개발 서버를 시작해봅시다.
실행이 완료되면 cmd창에 위와 같이 뜨고
웹페이지가 하나 팝업 됩니다!!
끝!!! Expo 설치가 완료되었습니다! 생각보다 아주 간단하고 쉽게 설치해서 저도 처음 사용할 때 많이 놀랐어요
접근성이 좋은 Expo의 장점인 것 같습니다.
이제부터 Expo를 이용해 Hello World 앱을 생성해보도록 하겠습니다!
먼저 텍스트 편집기나, 비쥬얼 스튜디오 코드 (Visual Studio Code)를 이용하여 코딩을 하시면되는데
프로젝트가 생성되면 C:\Users\ralla\kirinProject 해당 경로에 프로젝트파일을 확인하실 수 있습니다.
해당 폴더를 VSC로 열면
이제 코딩할 준비는 모두 끝났습니다!! 이제 App.js 소스파일을 수정해 Hello World 앱을 만들어볼까요??
위 코딩에 첫 화면에 Text를 띄우는 코딩인데요 ㅎ
<View style={styles.container}>
<Text>Hello World</Text>
<Text>kirinProject</Text>
</View>return 값을 위와 같이 작성해보겠습니다. ㅎㅎㅎㅎ
이제 ctrl + C 를 눌러 저장 후에 앱을 실행시켜 보겠습니다.
여기서 앱 실행 방법은 두가지가 있습니다!
1. expo앱을 다운받아 프로젝트 페이지의 QR코드를 인식하여 실행
2. 안드로이드에서는 안드로이드 스튜디오의 애뮬레이터를 실행시킨 후 Run on Android device/emulator 를 실행
아이폰에서는 xcode를 실행후 Run on iOS simulator를 실행
저는 2번 안드로이드 방법으로 진행하여 실행시켰습니다.
이제부터 Expo장점인 편리함이 나타납니다!!!
바로 애뮬레이터를 실행시켜놓고 VSC에서 수정한 코딩이
실시간으로 반영되는걸 확인하면서 코딩하실 수 있다는 점이죠!
다음 포스팅에는 React Native를 이용해 toDo 앱을 만들어보도록 하겠습니다!!
문의 : ralla0405@gmail.com