내일배움단 App2.1

May 21, 2022

[앱개발 종합반] 2주 1일차 개발일지(2주 1-2강)

📱TIL App.201

0. 2주차 배울 내용

앱 개발을 위해서는 클라이언트(사용자가 보는 화면)과 서버(데이터) 모두를 알고 있어야 한다. 사용자가 보는 화면은 JSX 문법을 통해서 그리는데, 이는 HTML과 같은 태그 형식의 문법이다. 아래 코드처럼 와 등 용도에 맞는 태그를 그때그떄 꺼내 사용한다.

// 코드 상단에는 사용할 element를 react-native 라이브러리로부터 꺼내 사용한다.
import { Text, View } from 'react-native';

<View>
  <Text>Hello, I am {props.name}!</Text>
</View>

1. 리액트 네이티브와 Expo 사용하기

1) 리액트 네이티브(React Native)란?

리액트 네이티브는 자바스크립트 언어 하나로 안드로이드와 iOS 앱 모두를 만들 수 있는 라이브러리(개발 도구)다. 하지만 앱의 push 알림이나, 카카오/네이버 로그인 기능 등을 구현하려면 안드로이드와 iOS 코드를 알아야 한다.

2) Expo란?

한 가지 언어로 앱 개발이 가능하도록 하자는 취지에 맞게 만들어진 것이 Expo다. Expo는 위에 설명한 기능들을 자바스크립트 형태로 다 만들어 두었기 때문에, 우리는 필요한 기능에 맞게 해당 코드를 가져다 쓰기만 하면 된다. Expo의 공식 문서와 리액트 네이티브 공식 문서를 따라 앱을 만들면 쉽고 빠르게 앱을 만들 수 있다.

Expo 클라이언트 앱을 다운로드받으면 개발 중인 앱을 테스트해볼 수 있다. 해당 QR 코드를 찍으면 개발하고 있는 앱 화면을 기계에서 바로 확인할 수 있다.

3) Node와 NPM

누군가 만들어 둔 유용한 자바스크립트 코드들을 가져오기 위해서는 이를 위한 도구가 필요하다. Node.js는 자바스크립트 개발 환경을 구축하며, NPM은 필요한 자바스크립트 앱 개발 도구들을 가져와 사용하는 데 쓰인다.

4) Yarn 설치하기

앱 개발을 할 때 필요한 자바스크립트 도구를 NPM으로 가져올 수 있는데, 더 효율적으로 이 도구를 가져올 수 있는 Yarn을 설치하기 위해 NPM으로 Yarn을 설치한다.

// cmd 창에 입력
npm install -g yarn

// npm : 자바스크립트 도구를 가져오겠다는 명령어
// install : 도구를 가져와서 설치하겠다는 명령어
// -g : 컴퓨터 전역(global)에서 사용 가능하도록 설치하는 것

yarn 설치 후에는 yarn 명령어를 사용해 필요한 도구들을 가지고 올 수 있다. ex) yarn add / yarn install

5) Expo 설치하기

// cmd 창에 입력
npm install -g expo-cli

// npm : 자바스크립트 도구를 가져오겠다는 명령어
// install : 도구를 가져와서 설치하겠다는 명령어
// -g : 컴퓨터 전역(global)에서 사용 가능하도록 설치하는 것
// expo-cli : expo command line interface

Expo라는 도구를 사용하기 위해 npm으로 expo를 설치한다. Expo 설치 후에는 Expo 명령어를 통해 프로젝트 생성, 실행, 빌드 등 여러 기능들을 사용할 수 있다.

Expo 명령어가 컴퓨터에 전역적으로 설치되면, 이를 이용해 배포 파일을 생성, 업로드할 수 있으며 Expo는 앱 파일을 다운로드받아 안드로이드와 iOS에 배포한다. Expo로 앱을 만들고 배포하기 위해서는 해당 서비스에 가입 후, Expo를 내 컴퓨터에서 사용한다는 의미로 연결을 해 주어야 한다. Expo에 가입하면 대시보드로 앱 배포 내역을 확인, 관리할 수도 있고, 앱 배포에 필요한 파일들도 제공받을 수 있다.

expo login --username "아이디"

위 코드를 사용하면 컴퓨터에서 Expo에 로그인할 수 있다. 로그인 이후에는 Expo 도구를 이용할 수 있고, Expo 서비스에 내가 개발하고 있는 앱을 업로드해서 관리할 수 있다.

cmd 창을 비우려면 ‘cls’ 입력하기

2. Expo로 앱 개발하기

1) expo init으로 기본 앱 생성

VSCode의 터미널 창을 열고 아래 코드를 작성해보자.

expo init sparta-myhoneytip-gun

// expo : expo 언어로
// init : 앱을 만들 것
// sparta-... : 프로젝트 이름

코드를 치고 엔터 키를 누르면 ‘Your project is ready!’라는 메세지와 함께 프로젝트 이름과 같은 이름의 폴더가 생성된다. 앱 프로젝트 생성 이후에는 yarn 키워드를 사용해서 필요한 도구들을 설치하고 서버도 돌릴 수 있다.

2) 위치 변경하기: cd + 폴더 이름

cd는 change directory의 약자로, 터미널에 cd + 폴더 이름을 입력하면 해당 폴더로 들어갈 수 있다. 코드를 입력하면 터미널 입력 커서 앞의 폴더 위치가 변경된 것을 확인할 수 있다.

3) expo start로 Expo 앱 실행

강의에서는 터미널에 expo start를 치자마자 Metro Bundler 브라우저 창이 떴지만, 나는 ‘Unable to find expo in this project - have you run yarn / npm install yet?’ 에러가 떠서 구글링을 해봤다. stackoverflow 사이트에 여러 해결방법이 있어서 하나씩 시도해봤다. 처음엔 npm install을 입력했는데, 내 컴퓨터의 Nodejs 버전이 최신 버전이 아니라는 에러가 뜨며 실행이 되지 않았다. Nodejs 최신 버전(v16.15.0) 설치 완료 후, yarn add expo를 입력했더니 QR 코드와 함께 Metro Bundler 브라우저 주소가 떴다. 이후 Ctrl + C로 새로고침 후 expo start를 입력하면 QR코드와 함께 브라우저 주소가 나오는 것을 확인할 수 있었다. 브라우저 창으로 이동하면 아래 페이지가 뜨고, 왼쪽 하단 ‘Run in web browser’를 클릭하면 웹으로, QR 코드를 휴대폰으로 스캔하면 ‘Expo Go’라는 클라이언트 앱으로 앱 화면을 확인할 수 있다.

처음에는 위 사진과 같이 화면 가운데 ‘Open up App.js to start working on your app!’이라는 텍스트만 뜨는데, 실제 보이는 앱 화면은 프로젝트 폴더 안의 ‘App.js’ 파일에서 만들어나가야 한다. 기본 App.js 파일의 코드는 아래와 같다. <Text> 태그 안의 글자가 화면에 구현된 것을 알 수 있다.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

4) 프로젝트 폴더의 구성원 알아보기

assets 폴더 : Expo가 기본적으로 제공해 주는 이미지들, 이미지 폴더
node_modules 폴더 : 앱 개발 시 쉽게 사용할 수 있든 도구들이 있는 폴더
App.js 파일 : 실제 화면이 되는 파일. 화면을 나타내는 부분은 모두 함수로 처리되어 있음.
app.json 파일 : 리스트(array)와 딕셔너리(object)의 복합 구조인 json 데이터는 서버 개발자들이 사용하는 데이터 구조. 앱에 대한 설명서(앱 이름, 버전, 앱 아이콘 등) 역할

Share on

Twitter Facebook LinkedIn