앱개발 2주차 개발일지

1) 앱 개발 준비 - 리액트 네이티브(기술) & Expo(도구) 소개 및 설치

2) 앱 화면 만들기

3) 앱 필수 기초 지식 - 리액트 기초 다지기

 

 

1) 앱 개발 준비 - 리액트 네이티브(기술) & Expo(도구) 소개 및 설치

    리액트 네이티브 앱 개발을 더 편하고 쉽게 도와주는 Expo라는 도구로 앱 개발을 진행

 

앱 개발, 즉 리액트 네이티브 앱 개발에서 구역(레이아웃)을 잡는 문법 언어를 JSX라고 부릅니다.

JSX문법은 정말 간단하게, 화면의 구역을 잡을 때는 <View> 태그를, 글자를 쓸때는 <Text> 태그를 사용하라는 것처럼,

용도에 맞는 태그를 정해놨습니다. 그래서 우린 필요한 태그를 그때그때 꺼내서 사용하면 됩니다.

태그란 <>과 같이 꺽쇠로 표현하는 프로그래밍 문법을 뜻합니다!

 

//이렇게 상단에서 사용할 엘리먼트를 react-native 라이브러리로부터 꺼내 사용합니다.

import { Text, View } from 'react-native';

<View>

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

</View>

 

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

리액트 네이티브로만 앱 개발을 진행하면, 자바스크립트 한 언어로 앱 개발이 가능 하다 했지만 그렇지 않음을 알 수 있습니다. 위 이미지에서 볼 수 있듯이 특정 상황에선 안드로이드, iOS 각각의 폴더에 들어가 직접 코드를 만져야 하는 상황이 발생합니다. 안드로이드, iOS 앱을 만들 땐 자바&코틀린과 Swift라는 언어를 써야하는데, 그러면 언어 하나로 앱을 만들 수 있다는 취지에서 벗어나게 됩니다😂 그래서 이에 좀 더 취지에 가깝게, 더 쉽고 빠르고 정말 안드로이드,iOS 개발 언어를 잘 몰라도 리액트 네이티브 앱 개발을 수월하게 도와주는 도구가 존재합니다!

--> EXPO 활용  ( 개발중인 앱 확인 Expo Go 앱 )

• IOS 클라이언트 앱 다운 (링크)
• 안드로이드 클라이언트 앱 다운 (링크)

Node & NPM 설치

yarn은 npm 보다 가볍고 빠르게 자바스크립트 패키지를 관리 할 수 있게 해주는 자바스크립트 패키지 매니저 툴입니다. 각자의 장단점이 있지만, 우린 앞으로 패키지 관리자로 yarn을 좀 더 많이 사용하게 됩니다.

 

sudo npm install -g expo-cli

 

엑스포 가입

 

https://expo.dev/signup  

Sign Up — Expo

Expo 계정을 생성했으면, 여러분들 컴퓨터에 Expo 계정을 연결시켜줘야 합니다. 어려운일은 아니고 여러분 컴퓨터로 해당 계정으로 로그인을 하면되는데요! 윈도우는 cmd 맥은 terminal에서 다음 명령어를 실행합니다.

 

expo init sparta-myhoneytip-영어이름

 

expo start 명령어를 실행하면 터미널에 Expo 실행

 

 👉 시뮬레이터는 가상의 휴대폰입니다.

여러분들 컴퓨터에 가상의 휴대폰을 띄운 다음, 현재 개발중인 앱을 실행시킬 수 있습니다. 물론 가상의 휴대폰이라 다양한 디바이스 기종을 생성하여 띄울 수 있습니다. 하지만 원하는 기종 각각을 설치하여 실행 준비를 해두어야 합니다.

</aside>

<aside> 👉 안드로이드 시뮬레이터는 안드로이드 스튜디오에서 IOS 시뮬레이터는 Xcode 기반에서 설치가 가능합니다.

모두 0주차때 윈도우 노트북 사용자분들은 안드로이드 스튜디오를 맥 노트북 사용자들은 안드로이드 스튜디오 또는 Xcode를 설치하셨겠죠?

(설치안하신 분들은 설치하러가기)

 

* 참고 :

• vscode에서 폴더가 이쁘게 보이는 법
  • 왼쪽 다섯번째 버튼을 눌러 material 설치
•  

1) assets 

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

2)node_modules

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

3)App.js

여기선 앱이 시작될 때 필요한 준비들(필요한 이미지 준비, 필요한 폰트들 준비)을 하는 장소이며, 준비를 할때 준비중입니다~라는 화면도 띄워주는 곳입니다.즉 앞으로 우리가 만들 앱은 모두 App.js로부터 시작됩니다.

준비가 끝나면, 본 화면을 보여줍니다.

👉 리액트 네이티브 앱이 시작되는 출발선 및 진입점입니다. 웹으로 따지면 index.html 또는 main.html처럼 메인 파일이라고 생각하면 편합니다.

 

4)app.json

앱이 가지는 기본 정보들을 설정하는 파일입니다.

후반부에 광고 및 배포외엔 거의 다룰 일이 없으므로, 일단 알아만 둡니다!

<aside> 👉 앱의 이름, 앱의 출시 버전, 앱이 휴대폰에 설치될때 보여질 아이콘, 앱이 켜질때 보여지는 스플래시 스크린 화면, 안드로이드 또는 IOS 각각의 광고 설정 등

 

1) Expo 명령어 설치

2) 로컬에 Expo 계정 세팅

3) expo init 명령어로 기본 앱 생성

4) expo start로 Expo 앱 실행

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

 

App.js

 

App.js를 다시 또 소개하자면 1) 간단히는 App.js는 앱의 화면을 그려주는 커다란 함수입니다. 또는! 2) 자세히는 App.js는 리액트 네이티브 라이브러리 그리고 Expo에서 제공해주는 기능들을 사용하여 화면을 그려주는 커다란 함수입니다. 여러분이 expo start로 시뮬레이터에 띄운 앱의 화면을 보면 App 함수에 기입되어 있는 글귀가 보이고 있음을 확인 할 수 있습니다. "Open up App.js to start working on your app!" 화면을 보여주고 있는게 맞죠? 코드를 위에서부터 보면서 찬찬히 살펴보겠습니다.

 

//우리가 리액트, 리액트 네이티브, 엑스포 라이브러리에서 꺼내 사용할 기능들을 /

/이렇게 앞으로도 상단에 선언한다음 가져다 사용합니다.

 

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',

},

});

 

화면을 구성하는 태그 문법, JSX

•  👉 App.js는 JSX문법으로 그려져 준비된 화면을 반환합니다. 반환 한다는 게 잘 와닿지 않다면, 단순히 화면을 그려준다 생각하면 편합니다.😁 JSX문법을 화면에 그려준다는 행위, 동작을 이제 우린 렌더링(rendering)이라 부릅니다<aside> 👉 <View> <Text>와 같이 꺽쇠로 쓰여져 있는 것들은 리액트 네이티브에서 JSX라고 부릅니다. 또하나의 화면을 그리는 문법입니다.화면을 구성하는 최소한의 영역정도의 의미를 갖고 있습니다. 이 JSX 문법은 사용방법이 정해져있습니다.

 

😁 JSX 문법상의 꺽쇠를 태그라고 부르고, <View>영역</View>과 같이 닫는 태그로 온전히 화면의 한 영역을 구성할 때 JSX에선 엘리먼트라 부릅니다.

즉, 리액트 네이티브에서 return은 여러분이 작성한 JSX문법으로 구성된 화면을 앱상에 보여주는 역할을 하는 겁니다.

• [앱 화면 만들기] 화면을 구성하는 엘리먼트들
• <View>
• <text>
• <ScrollView>
• <Button>과 함수
• <TouchableOpacity/>
• <Images>
• 모든 태그에 공통으로 들어가 있는 style속성 
• StyleSheet 
• Flex