2주차 개발일지 (앱개발)

Node & NPM 설치 한 후 cmd 창에 아래 코드 입력

yarn은 npm 보다 가볍고 빠르게 자바스크립트 패키지를 관리 할 수 있게 해주는 자바스크립트 패키지 매니저 툴이다.

 

npm install -g yarn

yarn -v //이 코드로 버전 확인

 

로컬에 엑스포 계정 세팅

 

https://expo.io/signup

Expo 가입 링크 => Expo 계정 생성 후 Expo 계정 컴퓨터와 연결시키기
cmd 창에 아래 명령어 실행

 

expo login

 

Sign Up — Expo

 

 

앞으로 만들기도 하고 연습도 할 작업 공간인 폴더 하나 sparta-study 로 이름 지어 만들어 본다.

1) Expo 명령어 설치
2) 로컬에 Expo 계정 세팅
3) expo init 명령어로 기본 앱 생성

expo init sparta-myhoneytip-영어이름

4) expo start로 Expo 앱 실행

cd <목적폴더명>: change directory의 약자로 입력한 폴더명으로 이동하는 명령어 먼저 실행해서 경로를 바꿔준다.

 

커맨드 창에서 뒤로가기는 cd + 띄고 + .. 자바스크립트 모듈을 다룰 때 볼 수 있는 명령어이다.

 

cd .. 명령어를 통해 뒤로가기로 경로가 다시 변경된 것을 볼 수 있음

 

터미널에 expo start 를 입력 후 실행하면 QR 코드가 뜨는 것을 확인할 수 있음

 

5) 휴대폰에 설치한 Expo 클라이언트 앱으로 Expo 앱 실행

 

expo start로 열린 Expo 개발 도구 화면에서, 좌측의 QR 코드를 휴대폰 카메라로 비춘뒤, 휴대폰에 설치했던 Expo 클라이언트 앱을 실행시킨다.

 

 

 

Expo 프로젝트 기본 폴더 구조

 

 

1) assets

 앱이 동작되고 서비스되는데에 기본적으로 가지고 있는 이미지 및 아이콘 파일들을 담는 폴더

 

2) node_modules

 리액트 네이티브&Expo로 앱을 만들면서 설치하게 되는 많은 라이브러리들이 저장되는 장소

 

3) App.js

 리액트 네이티브 앱이 시작되는 출발선 및 진입점으로, 웹으로 따지면 index.html 또는 main.html처럼 메인 파일이라고 생각하면 편하다. 여기선 앱이 시작될 때 필요한 준비들(필요한 이미지 준비, 필요한 폰트들 준비)을 하는 장소이며, 준비를 할때 준비중입니다~라는 화면도 띄워주는 곳이다. 준비가 끝나면, 본 화면을 보여주는데 즉 앞으로 만들 앱은 모두 App.js로부터 시작된다. 

앱이 시작될 때&nbsp;가장 먼저 실행되는 자바스크립트 파일

4) app.json

 앱의 이름, 앱의 출시 버전, 앱이 휴대폰에 설치될때 보여질 아이콘, 앱이 켜질때 보여지는 스플래시 스크린 화면, 안드로이드 또는 IOS 각각의 광고 설정 등 앱이 가지는 기본 정보들을 설정하는 파일이다.

 

App.js

//내가 리액트, 리액트 네이티브, 엑스포 라이브러리에서 꺼내 사용할 기능들을
//이렇게 앞으로도 상단에 선언한다음 가져다 사용
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

//App.js는 결국 App 함수를 내보내기 하고 있는 자바스크립트 파일이다.
//이 함수는 무언가?를 반환하고 있는데 결국 화면을 반환하고 있음
export default function App() {
	//화면을 반환
	//HTML 태그 같이 생긴 이 문법은 JSX라 불리우며 실제 화면을 그리는 문법

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

// styles 변수 이름 답게 화면을 그려주는, 
//더 자세히는 JSX문법을 꾸며주는 내용을 담고 있음
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});