React Native 앱 제작기 #1 | 리액트 네이티브? 개발 환경 설정하기

React Native 앱 제작기 #1 | 리액트 네이티브? 개발 환경 설정하기

안녕하세요! 바울랩 '오현규' 연구원 입니다.

지금부터 , React Native(v0.61)를 활용한 '제주코딩베이스캠프' 앱 제작기를 포스팅 해볼게요:)

'제주 코딩 베이스 캠프'앱은 HTML, CSS, JavaScript , Python 등,

바울랩에서 제작한 여러 프로그래밍 강좌들을 제공해주는 앱입니다.

하단에 주소 남깁니다. (많은 사용 부탁해요! (●'◡'●))

제코베(제주코딩베이스캠프) 앱 주소

먼저, React-Native가 무엇인지에 대해서 간단히 설명 드릴게요!

React Native란?

리액트 + 네이티브

리액트를 사용해 네이티브 앱(Android , Ios 앱)을 동시에 만들수있다라는 것!

문득 이런 생각이 들 수도 있겠네요!

" 어떻게 리액트로 네이티브 앱이 만들어지는거지? "

.... 저만 궁금했던걸까요..?? ( ´･･)ﾉ(.\_.\`)

리액트 네이티브 코드가 각 Android , Ios의 네이티브 코드로 바뀌는 걸까요?

.

.

.

아닙니다!! (╯°□°）╯︵ ┻━┻

간단히 설명하자면 '리액트네이티브'에서 쓰이는 View, FlatList, ScrollView 등 이러한 요소들이

Android , Ios 개발에 쓰이는 UI빌딩 블록들과 공유되기 때문입니다!

React-native 작업화면

Android Studio View 작업 화면(Native 코드)

이렇게 UI블록을 공유하기 때문에 프로그램이 런타임될때,

각 OS에 해당하는 View요소들로 UI가 렌더링이 되는 것입니다.

이제 개발 환경 세팅을 시작 하겠습니다!

가장 번거롭고 중요한 개발 환경 세팅 과정입니다.

(컴퓨터 설정마다 어떤 에러가 튀어 나올지 모르니깐요.. 분명 잘따라했는데 싶다가도~)

리액트 네이티브 공식페이지에 들어갑니다.

React-Native 공식 문서

맥OS를 사용하신다면 macOS탭으로 가서 가이드를 따라가면 됩니다!

Mac에 Homebrew처럼 Window 전용 패키지 관리툴인 Chocolatey를 깔아주시구요

cmd에서 다음 명령어를 사용해 node js, python2, jdk(8버전 이상)을 다운받아줍니다.

choco install -y nodejs.install python2 jdk8

개발은 React를 사용하지만 결과물은 네이티브 앱이 빌드되기때문에

Android Studio도 설치를 해줍니다.( 현재 Android 9 (Pie)SDK를 설치하면 되겠네요)

)

우측 하단 클릭!

SDK Manager 선택!

)

가이드에 명시된 SDK버전과 상세 옵션이 설치가 되었는지 잘 확인해주세요!

환경세팅 필수구요.

이제 React Native 앱 개발에 필요한 모든 요소들이 설치됐으니,

본격적으로 프로젝트 파일을 생성해보겠습니다!

편집기는 VScode 사용합니다(대세라구요!)

Visual Code 실행 후 본인이 원하는 루트에서 아래 명령어를 실행합니다.

npx react-native init )

init 명령어를 실행이 완료되면 아래처럼 앱 개발의 필요한 요소들이 생성됩니다!

이제 생성된 프로젝트 파일을 실행해 볼텐데요,

두 가지 실행방법이 있어요. 우린 AVD로 실행 해보려합니다.

1. 안드로이드 스튜디오 가상머신(AVD) 실행

2. 디바이스로 직접 실행 ( Android 디바이스와 연결해주시면 됩니다.)

**AVD로 실행하는 방법입니다.**

안드로이드 스튜디오에서 'AVD Manager'탭에 들어가 가상머신을 생성하고 실행해줍니다.

(Android 9.0 Pie로 설치해주세요)

이렇게 가상머신이 켜지는 걸 볼수가 있습니다.

그 다음으로 가상머신이 연결이 되었는지 확인해줘야겠죠?

adb devcies

디바이스에 직접 연결하신분들은 디바이스 정보가 뜰것입니다

생성된 프로젝트 파일로 이동후, 명령어를 실행합니다.

npx react-native run-android (npx를 안쳐도 cli가 내장되어 있어서 그런지 명령어가 먹히네요)

다음과 같은 화면이 뜨면 초기 개발 환경 세팅이 완료된 것입니다!

수고하셨습니다! 다음 게시글로 가볼게요~~

from http://paullab.tistory.com/26 by ccl(A) rewrite - 2020-03-07 14:21:21

댓글

댓글 쓰기

이 블로그의 인기 게시물

[React] - 18) 프로젝트 빌드하기(+코드 스플리팅)

[React] - 18) 프로젝트 빌드하기(+코드 스플리팅) 안녕하세요, 오늘은 완성된 프로젝트를 빌드하는 것에 대해 포스팅하겠습니다. 사실 프로젝트를 빌드하는 것은 간단합니다, 예제 프로젝트를 하나 만들어서 다음과 같이 진행해 봅시다. $ yarn create react-app build-test $ cd build-test $ yarn build 그러면 이제 프로젝트 루트 폴더에 다음과 같은 파일이 생성될 것입니다. 프로젝트가 Index.html으로 빌드되었습니다. 이 yarn build 명령어 하나로, 프로젝트에서 사용되는 자바스크립트 파일 안에서 불필요한 주석, 경고 메시지 , To-do, 공백 등이 삭제되어 파일 크기를 최소화하고, 브라우저에서 JSX 문법이나 다른 자바스크립트 문법이 원활히 시행되도록, 브라우저에 맞게 변하기도 합니다. 그리고, 기본적으로 yarn create react-app으로 프로젝트를 만들면 로고 이미지 파일이 포함되었죠? 그런 이미지, 사운드 같은 정적 파일이 있다면 해당 파일을 위한 경로도 생성됩니다. 실제로 저 static 폴더를 열어 보면, js, css로 나뉘어 수많은 자바스크립트 파일이 하나로 합쳐지고, css 파일들도 하나로 합쳐지게 됩니다. 이러한 작업을 해주는 것이, 리액트를 처음 사용할 때 만났던 웹팩이라는 것인데요. 웹팩 설정에서 Chunks 기능이 작동하여 여러 파일들을 따로 분리시켜 효율적으로 캐싱해 줍니다. 실제로 static을 열어보면 자주 바뀌는 코드, main 코드 등등이 알아서 나뉘어 효율적으로 분리되어 있을 것입니다. 이렇게 파일을 분리하는 작업을 '코드 스플리팅'이라고 합니다. 지금은 CRA(create-react-app)으로 만들어진 아주아주 작고 기본적인 코드만 빌드되었기 때문에 파일의 크기가 아주 작습니다만, 프로젝트의 규모가커지면 A페이지에서 B,C,D 페이지에서 사용할 정보까지 모두 로드하면서 파일 크기가 ...
자세한 내용 보기

React에서 웹팩 설치하기

React에서 웹팩 설치하기 create-react-app을 하면 자동으로 웹팩 설정을 해주기 때문에 웹팩을 그다지 신경쓰지 않았지만 그래도 웹팩을 설치하는 방법을 알아야 한다. 세부적인 컨트롤과 개인화, 오류 수정 등의 문제가 존재하기 때문이다. 우선, 웹팩을 다루기 위해서는 node를 어느 정도 알아야 한다. React할 때 node를 알아야 한다는 이유가 웹팩을 활용하기 위해서이다. from http://darrengwon.tistory.com/177 by ccl(A) rewrite - 2020-03-21 05:20:13
자세한 내용 보기

스토리북에서 스토리를 작성하는 방법

스토리북에서 스토리를 작성하는 방법 스토리북은 스토리의 집합이다. 각각의 스토리는 컴포넌트의 하나의 시각적 상태를 나타낸다. 기술적으로 얘기하면 스토리는 스크린에 렌더링될 수 있는 어떤것을 리턴하는 함수이다. 기본 스토리 버튼 컴포넌트의 스토리에 대한 기본 예제이다. import React from 'react'; import { action } from '@storybook/addon-actions'; import Button from './Button'; export default { component: Button, title: 'Button', }; export const text = () => Hello Button; export const emoji = () => ( 😀 😎 👍 💯 ); named export(text, emoji)를 하게 되면 스토리북에서 스토리로 정의된다. default export는 스토리 그룹(Button)에 대한 메타데이터를 정의한다. export default { component: Button, title: 'Button', }; 위에서 이런 메타데이터를 정의했는데 이러한 포맷을 CSF(Component Story Format)이라고 한다. 링크 타이틀은 유니크해야한다. 스토리북 5.2 버전 이전에는 스토리를 정의하기 위해서 storiesOf API를 사용했어야 했다. 하지만 이제는 리액트 네이티브를 제외하고 모든 프레임워크에서 CSF 포맷을 사용할 수 있게 되었다. 스토리의 위치 • └── src └── components └── button ├── button.js └── button.stories.js 유지보수를 쉽게 하려면 스토리북 파일 (.stories.js)을 컴포넌트의 위치와 동일하게 하는게 좋다. 다른 방법도 두개 더 소개하고 있는데 그냥 이렇게 하는게 젤 깔끔한것...
자세한 내용 보기