REACT-NATIVE(EXPO) SNS 프로젝트 시작(2)

서론

이번 앱 만들기 프로젝트는 REACT NATIVE라는 프레임워크를 사용한다.

우선은 앱을 만드는 방식에 대해 설명하자.

​

앱은 처음부터 iOS나 Android가 이해할 수 있는 개발 언어로 만드는 방식이 있다.

하지만 웹 개발처럼 앱을 만드는 방식도 있다.

​

이게 무슨 말이냐 하면 javascript로 앱을 돌리는 것이다.

리액트라는 껍데기 안에 javascript나 html의 코드를 짜넣고... 앱 처럼 포장하는 것이다.

​

리액트 네이티브는 그러기위한 용도로 사용된다.

앱의 환경, iOS와 Android가 javascript를 이해할 수 있도록 코드와 모바일 사이의 다리 역할을 해준다.

그러면 앱은 사용자의 화면에서 반응형 웹처럼 동작하는 것이다.

​

이 방식의 단점은 결국에는 javascript의 한계를 깨기 어렵다는 것과 navtive라는 중간 다리가 있기 때문에 과부하가 걸리기 쉽다는 것이다.

인스타그램의 역할 정도면 적절하겠지만 게임의 용도로는 사용하기 힘든 프레임워크다.

​

EXPO

우선 우리는 이 REACT NATIVE를 사용해 개발을 할 수 있다.

하지만 EXPO를 통해 개발을 할 수도 있다.

​

이 EXPO라는 건 그냥 REACT NATIVE가 사용하기 간편해지도록 진화한 형태라고 이해했다.

이 EXPO는 REACT NATIVE의 환경을 간편하게 조성해주는 라이브러리를 사용자에게 대신 제공해주고 중간 매개체 역할을 자처하여 REACT NATIVE의 파일을 관리한다.

​

사용자는 REACT NATIVE의 파일을 직접 작성하진 않지만 EXPO라는 똘똘한 녀석을 통해 편하게 작업하는 것이다.

물론 당연히 EXPO라는 다리를 거쳐 간편함을 얻는만큼 EXPO의 기능 이외는 어렵다는 단점이 있다.

하지만 우선 앱 개발의 첫발을 뗀 내가 걱정할 부분은 아닌 듯 하다.

​

$ npm install -g expo-cli

​

우선 CMD에 명령어를 입력해서 EXPO를 다운받아야한다.

EXPO를 다운받기 위해선 당연히 NODE.js와 NPM은 필수다.

​

​

❓참고로 install 옆에 붙은 -g 옵션은 global이란 뜻으로 이 옵션을 사용하면 package.json같은 로컬 폴더가 아니라 전체에서 사용할 수 있도록 라이브러리가 다운로드설치된다.

이 외에도 install 옵션은 많이 있다.

​

--save : package.json 파일에 있는 dependencies 객체에 지금 설치한 패키지 정보를 추가.

--save -dev : dependencies 객체가 아닌 decDependencies 객체에 추가.

--no-save : dependencies에 패키지 정보를 추가하지 않음.

--save-exact : 정확히 일치하는 버전의 패키지를 추가.

--save-bundle : 해당 패키지를 bundleDependencies에 추가.

--force : 해당 패키지가 존재하더라도 원격 저장소에 있는 패키지를 가져옴.

​

그리고 원하는 폴더에 리액트 프로젝트를 생성하듯 명령어를 입력하여 프로젝트를 생성해주면 EXPO 프로젝트를 생성할 수 있다.

 

expo init [프로젝트 명]

​

EXPO의 설치에는 3가지 종류가 있다.

​

내용은 기본 바탕은 어떻게 세팅해 드릴까요? 에 관한 것이다.

나는 처음부터 내가 다 할 것이기 때문에 비어있는 기본 세팅을 눌렀다.

​

그렇게 만들어진 EXPO 프로젝트는 npm start의 명령어를 터미널에 입력하여 실행시킬 수 있다.

실행되면 브라우저에 EXPO 프로젝트를 관리할 수 있는 창이 하나 뜰 것이다.

이 창의 왼쪽 하단에는 QR 코드가 있는데 이 코드를 스마트폰의 EXPO앱을 깔아서 찍으면 화면을 연동시킬 수 있다.

​

연동시키는 방법에는 터미널과 LAN이 있는데 url과 ip 주소의 차이이므로 가능한 걸 선택하면 된다.

QR코드를 찍었으면 이제 EXPO 브라우저 화면에서 안드로이드 버튼을 클릭해주면 연동 끝!

​

기본 세팅은 이렇게나 간단하게 끝이 난다.