코린이의 앱개발 종합반 2주차 개발일지

2주차 목표

1) 앱 개발 준비 - 리액트 네이티브 ( 기술 ) & Expo ( 도구 ) 소개 및 설치
2) 앱 화면 만들기
3) 앱 필수 기초 지식 - 리액트 기초 다지기

[ 1 ] 앱 개발 준비

리액트 네이티브와 Expo

(1) 리액트 네이티브
: 자바스크립트와 리액트 라이브러리를 사용해 네이티브 앱을 개발할 수 있도록 해주는 기술.
(2) Expo
: 리액트 네이티브 앱 개발을 더 편하고 싶게 할 수 있도록 도와주는 도구.

• Node.js로 자바스크립트 개발 환경을 구축.
• NPM으로 필요한 자바스크립트 앱 개발 도구들을 가져와 사용.
• Yarn은 NPM 보다는 가볍지만 빠르게 자바스크립트 패키지를 관리할 수 있도록 해줌.

앱 개발 준비 과정

1. Node.js와 NPM, Yarn, Expo 명령도구 설치
2. Expo 가입과 로컬에 Expo 계정 세팅
3. 프로젝트 파일 만들기 & 에디터에서 열기
4. expo init 명령어를 통해 앱 만들기 > blank 타입으로
5. expo start 명령어로 터미널에 Expo 실행
6. 표시된 QR 코드를 통해 스마트폰으로 실시간 코딩 진행 상황을 확인하며 코딩 > 혹은 시뮬레이터를 통해 확인

Expo 프로젝트 기본 폴더 구조

• assets : 앱이 동작 하고 서비스 되는데 필요한 이미지 및 아이콘을 위한 폴더
• node_modules : 앱을 만들면서 설치한 라이브러리들이 저장되는 폴더
• App.js : 앱을 만드는 메인 파일
• app.json : 앱의 기본 정보를 설정하는 파일

[ 2 ] 앱 화면 만들기

App.js

//사용할 기능들을 상단에서 임포트 하기
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

//화면을 반환하는 함수
export default function App() {
	//JSX 문법 사용
	console.disableYellowBox = true;
    //노란 경고창 끄기
	return (
		<View style={styles.container}>
		<Text>Open up App.js to start working on your app!</Text>
		<StatusBar style="auto" />
		</View>
	);
}

// JSX를 꾸며주는 Style
const styles = StyleSheet.create({
	container: {
			flex: 1,
			backgroundColor: '#fff',
			alignItems: 'center',
			justifyContent: 'center',
	},
});

주로 사용 하는 태그들

< View> </ View>

: 영역을 잡아주는 태그.
: 분할하여 영역을 잡을때는 StyleSheet를 같이 사용.

< Text> </ Text>

: 문자 출력을 위한 태그.

< Scrollview> </ Scrollview>

: 화면을 벗어나는 영역이 생길 경우 스크롤이 가능하게 하는 태그.

< Button> </ Button>

: 버튼을 생성하는 태그.
: onPress 속성을 통해 기능할 함수와 연결할 수 있다.

< TouchableOpacity> </ TouchableOpacity>

: 임의의 영역을 지정해 버튼 역할을 부여하는 태그.

< Image>

:assets 폴더에서 임포트해오거나 Source 속성에 uri를 입력하여 외부링크를 통해 이미지를 가져와 사용할 수 있도록 해주는 태그.

StyleSheet 에서 자주 사용하는 스타일 속성

margin

: 영역의 바깥으로 여백을 주는 속성.
: 주고 싶은 여백의 방향에 따라 top, bottom, left, right 를 붙여 사용하기도 한다.

padding

: 영역의 안쪽으로 여백을 주는 속성.
: 주고 싶은 방향에 따라 top, bottom, left, right 를 붙여 사용한다.

flex

: 영역을 차지하는 속성. 상대적이다.
: ex)
최상위 View가 flex가 1, 자식 View 태그 2개가 각자 flex가 2, 1 씩 이라고 할 때,
최상위가 전체 영역을 가져가고, flex가 2 인 View 가 최상위의 3분의 2를, flex가 1인 View가 최상위의 3분의 1의 영역을 가져간다.

flexDirecton

: 하위 flex 영역의 방향을 설정하는 속성.
: row는 가로방향 →, column은 세로방향 ↓. 기본값은 column.

justifyContent

:flexDirection 과 동일한 방향으로 정렬하는 속성.
:flex-start는 영역의 시작점으로 정렬,
center은 가운데 정렬,
flex-end는 영역의 끝점으로 정렬,
space-between은 첫Item은 시작점, 마지막 Item은 끝점, 나머지 Items는 그 사이에 고르게 정렬,
space-around는 Items를 균등한 여백을 포함하여 정렬
:flexDirecton이 row일때 => 좌우정렬,
flexDirecton이 column일때 => 상하정렬.

alignItems

: flexDirection과 수직한 방향으로 정렬하는 속성.
:flex-start는 영역의 시작점으로 정렬,
center은 가운데 정렬,
flex-end는 영역의 끝점으로 정렬,
stretch는 영역을 채우기 위해 늘리기.
:flexDirecton이 row일때 => 상하정렬,
flexDirecton이 column일때 => 좌우정렬.

[ 3 ] 기초 다지기

모듈 시스템

: import, export를 이용해 각 파일에 있는 함수를 불러오거나 내보내는 것.

반복문

: 모듈 시스템으로 가져온 데이터를 반복문을 통해 간편하게 이용할 수 있다.

{} 표현식

: 자바스크립트 문법은 {} 안에서 사용 가능하다.

조건문

: 선택사항이 두가지 일때, 삼항 연산자.
let result = 조건 ? "참" : "거짓"
: 혹은 {} 표현식 안에서 조건문 사용.

[ 마무리 ] 2주차를 마치며.

이번주는 flex라는 개념이 가장 어려웠던 것 같다.
부모 태그의 영역에 영향을 받으며 그 안에서 상대적으로 영역을 가져가는게 말로는 뭔가 조금 이해하기 어려웠다.
그리고 그것과는 별개로 또 하나하나 따라가면서 조금씩 모양새를 갖추어 가는 코드들을 보니 뭔가 조금 뿌듯함 또한 껴졌다.