React Native 개발환경 준비하기

21 April 2021

RN은 기본적으로 자바스크립트 기반이므로 자바스크립트를 먼저 선행해야 좋은 것 같아요 ..

맥 & Window 공통적으로 설치해야하는 것

1. node.js : https://nodejs.org/en/(node.js를 설치하면 노드 패키지 매니저인 npm도 함께 설치됨)
2. jdk :http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html
3. 안드로이드 스튜디오 : https://developer.android.com/studio/
4. 파이썬 설치 : https://www.python.org/(현재 3 ver.이 제공되고 있지만 RN에서는 파이썬 2ver.를 사용하므로 버전 2를 설치해야함 ) 5. 에디터 설치 : IntelliJ IDEA, VS Code 등 사용 중인 에디터
(저는 vs Code의 추가 확장자 html Preview가 너무 좋아서 VS Code 사용했습니다 :) )

+ 맥은 따로 왓치맨, Xcode를 추가 설치해야함 (react native cli에서만 필요, expo cli는 필요 없음)

저는 Window 사용자라 window 기준에서 설명하겠습니다

1. node.js 설치 후 확인 방법 -> cmd(명령 프로프트 창)에서 아래 코드 입력
node --version

2. jdk 설치
(1) 다운로드 받은 파일을 실행해서 JDK 설치가 완료되면 환경 변수를 설정함
먼저, "시스템 -> 고급 시스템 설정 -> 환경 변수 -> 시스템 변수 -> 새로 만들기"를 통해 JAVA_HOME이라는 이름의 시스템 변수를 추가하고 그 값으로 앞에서 설치한 JDK의 경로를 지정함

변수 이름 : JAVA_HOME
변수 값 : C:\Program Files\Java\jdk-14.0.2

(2) 시스템 변수에서 Path를 선택하고 편집을 통해 다음과 같이 새로 만들기

환경 변수 편집: %JAVA_HOME%\bin

(3) jdk 설치 확인 방법 -> cmd(명령 프로프트 창)에서 아래 코드 입력


		java -version

		javac -version

3. RN 프로젝트 만들기
(1) Expo
: 리액트 네이티브를 편하게 사용할 수 있도록 미리 여러 가지 설정이 되어 있는 툴이라고 생각하면 됨
아이폰과 안드로이드 폰이 있으면 Xcode, 안드로이드 스튜디오 없이도 해당 플랫폼의 테스트를 진행하며 개발할 수 있음
ios, 안드로이드, 웹을 함께 개발 가능함

단점도 존재
대표적으로는 Expo에서 제공하는 API만 사용할 수 있으며 필요한 기능이 제공되지 않을 경우 네이티브 모듈을 추가로 만들어서 사용하는 것이 불가능하다는 점
또한, 빌드 파일의 크기가 크다는 것

- Expo 설치 : https://expo.io/
Expo 웹사이트에서 회원가입한 후 Expo 프로젝트를 진행함

- expo를 이용하여 RN 프로젝트를 생성하기(npm을 이용해서 expo-cli를 설치해야 함)
터미널 or 명령 프롬포트에서 다음과 같이 입력해 expo-cli를 설치하기
npm install --global expo-cli

설치가 완료되면 다음 명령어로 Expo 프로젝트를 생성함
expo init my-first-expo

항상 첫번째 선택지인 blank를 선택하면 프로젝트 생성이 완료됨
프로젝트 실행은 그 프로젝트로 가서
npm start or expo start

4. 메인 파일 변경
프로젝트 화면에 보이는 내용은 모두 App.js 파일에 있는 내용임
먼저 프로젝트에 src 폴더를 생성하고 src 폴더 밑에 App.js 파일을 만들어 다음과 같이 작성
코드의 의미를 몰라도 일단 작성하기 !

src/App.js

	import React from 'react';

	import { View, StyleSheet, Text } from 'react-native';



	const App = () => {
		return (
			<View style={styles.container}>
				<Text style={styles.title}>My First React Native</Text>
			</View>
		);
	};

	const styles = StyleSheet.create({
		container: {
			flex: 1,
			justifyContent: 'center',
			alignItems: 'center',
			backgroundColor: '#ffffff',
		},
		title: {
			fontSize: 30,
		},
	});

	export default App;

src 폴더의 App.js 파일 작성이 완료되면 이제 첫 화면 파일을 변경해볼게요
Expo 프로젝트의 경우 프로젝트 루프 폴더에 있는 App.js 파일을 다음과 같이 수정하기

App.js


	import App from './src/App';



	export default App;

궁금한 사항은 ...

Github