비전공자 코딩 생존기 (개발일지) -2

안녕하세요

성소장 연구소 입니다.

 

1. 프로그램 설치

 

리액트 네이티브

 

리액트(React) + 네이티브(Native)

자바스크립트 언어 하나로 안드로이드 앱과 iOS앱 두 가지 모두 만들어주는 라이브러리로

간단하게 말해서 개발 할 때 사용하는 도구입니다.

 

Expo

 

리액트 네이티브로 앱을 개발할 때, 안드로이드 & iOS 코드를 건드려야 하는 대부분의 상황들을

안 건드려도 되게끔 도와주는 툴입니다. 또한 앱 개발을 편리하게 해주는 도구들이 많이 존재합니다.

 

Expo에서 제공해주는 공식 문서와 리액트 네이티브 공식 문서만 따라 보면서 앱을 만들면,

마치 미니카 조립하듯 앱이 뚝딱 만들어진다고 합니다.

 

Node & NPM

 

개발을 할때 바닥부터 자바스크립트로 만들어가는 것은 아닙니다.

개발자들이 선행적으로 만들어 놓은 자바스크립트를 가져와서 

적재적소에 응용해 나가는 경우가 많습니다.

 

이때 필요한게 Node와 NPM입니다.

Node.js로 자바스크립트 개발 환경을 구축하고,

NPM으로 필요한 자바스크립트 앱 개발 도구들을 가져와 사용하는 모습이라 보면 됩니다.

 

2. 환경설정

 

Expo 명령어 도구 설치

npm install -g expo-cli

npm: 노드 패키지 매니저 명령을 실행하겠다
install: 설치하겠다
-g: 컴퓨터 전역적으로 설치하겠다
== 어디서든지 -g 
expo-cli: 설치 할 패키지 이름

 

Expo 로그인

expo login

expo 이메일(또는 아이디), 패스워드 입력란이 차례로 나오고, 차례대로 입력하면 로그인 성공

 

vscode 실행 - 폴더 선택 - 시작

expo init 폴더이름 - blank - 설치 - expo start

휴대폰에 설치한 'expo' 앱으로 QR코드를 인식합니다.

연결이 안된다면 PC와 모바일의 네트워크 환경이 일치하는지 확인

expo start 명령어로 접속이 안된다면, 뒤에 '--tunnel' 을 붙여주세요
expo start --tunnel 

 

3. 앱 화면 만들기

vscode로 개발을 하면서 실시간으로 앱의 화면을 확인할 수 있습니다.

<View></View>

화면의 영역을 잡아주는 엘리먼트 현재 App.js 상에서 View 는 화면 전체 영역을 가집니다. 

<Text>

앱에 글을 작성하려면 반드시 사용해야하는 엘리먼트

<Button>

리액트 네이티브 공식 홈페이지의 기본 버튼 코드를 복사 붙여넣기 해보니,

앱 화면에 위와 같이 구현되었습니다. 다음편에서는 상세한 앱 화면 만들기에 대해서 다뤄보겠습니다.