앱개발 종합반 2주차 교육 정리

드디어 앱 개발을 시작하네요. 

1주차가 완벽하지는 않지만 일단 2주차를 들어가 보겠습니다. 

 

1. 리엑트네이티브란?

React + Native의 합성어로 자바스크립트 언어로 안드로이드와 iOS앱 두가지를 모두 만들어주는 라이브러리(개발도구)입니다. 

 

2. Expo란?

리엑트 네이티브로만 앱 개발을 진행하다보면 불가능한 부분이 존재하는데, 안드로이드, iOS 코드를 몰라도 개발이 가능하도록 도와주는 솔루션이 존재합니다.

리액트 네이티브로 앱을 개발할 때, 안드로이드 & iOS 코드를 건드려야 하는 대부분의 상황들을 안 건드려도 되게끔 도와주는 툴입니다. 또한 앱 개발을 편리하게 해주는 도구들이 많이 존재합니다. 

Expo에서 제공해주는 공식 문서와 리액트 네이티브 공식 문서만 따라 보면서 앱을 만들면, 마치 미니카 조립하듯 앱이 뚝딱 만들어집니다.

또한 Expo 클라이언트 앱을 내 핸드폰에 설치해서 현재 개발중인 앱을 쉽게 확인할 수 있습니다.

 

3. 리엑트네이티브 설치하기 

1. Node.js 설치

앞서 리엑트네이티브는 자바스크립트 언어로 안드로이드, 아이폰 앱을 만드는 개발 도구라고 설명을 드렸는데, 

리엑트네이티브로 앱을 개발하기 위해서 Node.js로 자바스크립트 개발환경을 구축하고, 

npm(Node Package Manager)으로 필요한 자바스크립트 앱 개발 도구들을 가져와 이를 활용해서 앱을 만들게 됩니다. 

Node.js에서 사용하는 모듈들을 패키지로 만들어 npm을 통해 관리하고 배포합니다. 

Node.js 설치(다운로드)

 

2. yarn 설치

yarn은 페이스북(Facebook)에서 만든 자바스크립트 패키지 매니저로 다양한 OS의 설치를 지원합니다. 

맥은 terminal, 윈도우는 cmd 검은 창에 다음과 같이 순서대로 입력해보도록 하겠습니다

npm을 설치했고, npm 모듈을 이용해서 yarn을 설치할 수 있습니다. 

npm install -g yarn 

npm : 패키지명, install : 설치하라는 모듈, -g : 컴퓨터 어디서든 설치하고 있는 도구를 사용할 수 있게 해주는 옵션 

yarn -v

위에서 설치한 yarn의 버전을 확인하고자 할때 사용한다. 

 

4. Expo 설치하기 

이 Expo 명령어로 우린 앱도 생성하고, 필요한 앱 개발 도구도 설치합니다

Expo는 앱을 쉽게 개발하고 마켓에 배포하는 것까지 도와주는 솔루션입니다. 

1. 가입링크에서 가입을 먼저 진행합니다. 

2. expo를 설치합니다.  

> npm install -g expo-cli

맥 사용자분들은 npm 명령으로 도구들을 설치할 때 "permission denied"라는 오류가 발생하면, 당황하지말고 sudo를 앞에 붙여주세요

> sudo npm install -g expo-cli

여러분들 컴퓨터 깊숙이 설치하는 과정이라 권한이 없다는 이야기로 보시면 됩니다! 그럴때 sudo를 앞에 붙여 나 이 컴퓨터 주인이다! 라고 알려주시면 돼요! 

3. 다음으로 로컬에 Expo 계정을 세팅합니다. 
터미널을 열어서 아래의 명령어를 실행합니다. 

> expo login --username "Expo 사이트 가입당시 입력한 name"

요기서 살짝 헤맸는데요. zsh가 디폴트로 처리되어야 합니다. 

4. 바탕화면에 앱을 만들 폴더를 하나 만들고

5. VScode(Visual Studio Code)를 시켜서 3번의 폴더를 엽니다.   

6. VScode 상단 메뉴에서 View > Terminal을 클릭하면 하단에 터미널이 열립니다. 

7. 여기에서 Expo의 프로젝트를 하나 생성합니다. 

expo init "프로젝트명"

8. 코멘트 창에서 해당 프로젝트안으로 더 들어갑니다. 

> cd "프로젝트명" 

9. Expo를 실행시킵니다. 

> expo start 

그럼 아래 화면이 브라우저로 실행되며, 좌측 하단의 QR코드를 핸드폰에 설치한 Expo 앱으로 찍으면 생성된 앱을 확인할 수 있습니다. 

 

5. 페이지 기본 문법

1. 기본문법

JSX란? 화면을 구성하는 태그 문법을 말합니다. 

리엑트 네이티브에서 return은 작성한 JSX 문법으로 구성된 화면을 앱상에 보여주는 역할을 합니다. 

import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { StyleSheet, Text, View } from 'react-native';			필요한 함수의 선언
export default function App() { return (			JSX 문법으로 작성된 화면을 랜더링합니다.
<View style={styles.container}>     <Text style={styles.text}>자! 함 해 봅시다</Text>     <StatusBar style="auto"/>     </View>			JSX 문법
) }			JSX 문법 닫기
const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });			스타일시트 정의

JSX 문법은 공식문서를 보고 작성합니다. 

- 리액트 네이티브 공식 문서

https://reactnative.dev/docs/view

- Expo 공식 문서

https://docs.expo.io/versions/v38.0.0/react-native/view/

 

2. 주석달기

개발을 할때 주석(코멘트)를 남기는 일은 중요합니다. 

주석을 달때는 JSX문법 안쪽과 밖에서의 주석다는 방법이 다른데, 밖에서는 "//"를 사용하며, 안쪽에서는 "{/* 주석 */}"을 사용한다. 

단, 영역을 지정하고 단축키(control+/)를 사용하는 경우 알아서 처리해 줌