[스파르타코딩클럽] 앱개발 종합반 2주차 [21.11.01 - 21.11.07]

2주차에는 드디어 리액트네이티브앱 개발을 시작한다!!

 

앱개발 3단계

1. 앱 개발 준비(세팅)

2. 앱 화면 구현하기

3. 앱&자바스크립트, 모듈, 반복문, {} 표현식, 조건문

 

앱개발은 크게 3단계에 걸쳐서 진행할 예정이다.

 

1. 앱 개발 준비(세팅)

앱 개발을 하기 위한 세팅 전에 다시 리액트 네이티브에 대해서 복기해보자! 리액트는 페이스북에서 만든 프론트 개발 기술 중 하나이고, 우리가 배운 자바스크립트 언어 하나로 안드로이드 앱과 iOS앱 두 가지 모두 만들어주는 도구가 리액트 네이티브이다.

앞서 리액트 네이티브를 통해서 자바스크립트라는 한 언어로 개발이 가능하다고 했지만, 실제 개발을 진행할 때 특정 상황에서는 안드로이드, iOS 각각의 폴더에 들어가 직접 코드를 만져야하는 상황이 생긴다. 안드로이드와 ios는 java&cotlin과 Swift라는 각각 개발할 때 쓰는 언어를 통해서만 개발이 가능한데.... 결국 언어 하나로만 앱 개발을 진행하는 것은 Impossible 🤧???

이런 문제를 해결하기 위해서 안드로이드,iOS 개발 언어를 잘 몰라도 리액트 네이티브 앱 개발을 도와주는 도구가 존재한다!  👉   EXPO

Expo는 리액트 네이티브로 앱을 개발할 때, 안드로이드 & iOS 코드를 건드려야 하는 대부분의 상황들을 도와주는 툴이다. 이 Expo에는 앱 개발을 간단하고 편리하게 도와주는 도구들도 상당히 존재한다. Node와Npm 이라는 도구가 있는데, Node로 간편한 자바스크립트 개발 환경을 구축하고 실제 유용한 자바스크립트 도구들을 가져오는 것이 Npm이다. 그리고 Npm이라는 도구와 더불어 더 효율적이고 간편하게 자바스크립트를 사용할 수 있게 만드는 도구인 Yarn도 존재한다. Yarn은 Npm보다 더 신속하고 가볍게 자바스크립트 패키지를 관리할 수 있는 자바스크립트 패키지 매니저 툴이라고 생각하면 된다. 앱 개발 세팅 과정은 이 개발일지에서는 생략하고 필요할 때마다 강의자료를 참고하거나 구글링해보면 좋을 것 같다.

 

2. 앱 화면 구현하기

 

- JSX 문법

vscode 에디터에 들어가서 파일명.js 파일을 열고 에디터안에서 터미널을 열어서 'expo start'라는 명령어를 입력하면 우측 이미지와 같은 웹 페이지가 나오고, 페이지의 좌측 하단에 QR코드가 생성이 된다. 이 QR코드를 휴대전화로 스캔하면 내가 현재 개발하고 있는 앱 화면을 볼 수 있게 만들어준다.

개발중인 앱 화면

 

위에 HTML 태그 같이 생긴 이 문법은 JSX라 불리우며 실제 화면을 그리는 문법이다. 

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

 

JSX 문법을 작성할 때 규칙

1. 모든 tag는 react native에서 필요한 tag를 꺼내서 써야한다.

2. <tag name></tag name> , < tag name  /> 항상 닫는 tag와 자체적으로 닫는 tag 같은 형태를 잘 구분해서 입력해야한다.

3. 모든 tag는 항상 가장 밖에 감싸는 최상위 tag가 존재해야 한다.

4. return으로 반환할 때 항상 소괄호 ( )로 전체 tag를 감싸야한다.

5. 주석(코드작성의 이유와 같은 코멘트를 달 때 사용) 형태는 {/* 주석 내용*/} 와 같은 형태를 가지고 있다.

 

여기서 잠깐!

만약 컴퓨터 Expo 클라이언트에서 데이터를 수정해서 저장했는데, 휴대전화 Expo 클라이언트에서  바로바로 refresh 가 안될 경우 크게

1. 휴대전화의 expo를 껏다가 다시 노트북 QR 코드로 들어가는 방법 

2. 컴퓨터와 휴대전화가 같은 네트워크 환경에 있는지 확인

3. tunnel / lan / local 한 번씩 클릭해보자!

 

-화면을 구성하는 앨리먼트(tag) 종류

(주의: 태그를 넣을 때 태그이름, 변수값 철자 확인 잘하자!-대소문자)

View : 앱에서 화면의 영역을 잡아주는 tag이다. 즉 화면상에 하나의 영역을 갖고자 할 때, 사용하는 tag이다.

Text:  문자열은 <Text></Text> 안에 있어야 한다. styles 변수값의 예 fontSize, fontWeight:'',textAlign:''

scrollView: 화면에 넘치는 정보를 보여줄 때 사용하는 tag이다. 

Button: 버튼을 눌러서 팝업을 보여주거나 링크로 갈 수 있게하는 tag, <Button  />는 스스로 열고 닫는 형태를 가지고 있다. style 변수값의 예로는 style,title,color,onPress 등이 있는데, onPress는 함수를 실행시켜주는 속성이고 여기에  Alert.alert()을 연결시켜줘서 사용한다. 이 <Button  />에 직접 함수를 연결해도 되지만, 함수는 function과 return 사이에 달아서 이용한다. 코드를 짜는건 내 자유!

TouchableOpacity: 충분한 영역을 가지고 있는 텍스트 카드를 눌러야 할 때 사용한다.

Image: Image tag는 컴퓨터 내부 이미지 파일, 외부의 이미지 파일을 보여줄 때 사용하는 tag이다. tag 속성에는 source(이미지 위치), resizeMode(앱상에 이미지를 어떻게 보여줄까,배열을 설정),style 등이 있다.

margin padding&nbsp;

Stylesheet 문법에서 자주 사용하는 style 속성 종류:

Flex - 영역설정

backgrounfColor - 배경색

maring(밖), padding(안)

width: '너비값%'

height: 높이

alignSelf: 이미지 정렬

 

보통 모든 스타일 속성과 속성값을 다 외우고 있지 않을 것이다. 그렇기 때문에 앱 개발 시; 그때그때 스타일 공식문서를 참고해서 필요한 문서만 찾아서 쓰면 좋을 것 같다. (아래 공식문서 링크)

https://reactnative.dev/docs/style#docsNav   

https://reactnative.dev/docs/layout-props

 

textContainer tag 속성값

borderRadius: 테두리 구부러짐

borderWidth: 테두리 두께

borderColor: 테두리 색

borderStyle: 테두리 스타일

 

textStyle tag 속성값

color: 글자 색

fontSize: 글자 크기

fontWeight: 글자 두께

textAlign: 가로기준 글자위치 - justify 왼쪽정렬 

 

Flex : 앱 화면을 구성할 때 영역의 레이아웃을 결정하는 속성값이다.

우선 flex에 대해서 파악하기 위해선 좌측 이미지를 통해 부모 태그와 자식 태그의 구조를 이해하고, 우측에 vscode를 보면 이해를 빠르게 할 수 있다. 앞서 언급한 부모, 자식 태그는 말 그대로 부모 안에 자식이 있는 형태를 한 태그의 구조를 말한다. 이 구조를 생각하면서 우측 에디터 화면을 보면 container라는 부모 태그 안에 containerOne, containerTwo라는 두개의 자식태그가 존재하는 것을 알 수 있다. 여기서 flex를 이용해 앱 화면의 레이아웃을 결정하고자 하는데, 지금 우측에 가장 오른쪽 휴대전화 화면을 보면 위는 빨강, 아래는 노랑색 영역으로 나뉜 것을 알 수 있다. 그 다음 다시 vscode 아래 stylesheet 부분을 살펴보면 container는 flex값이 1, containerOne은 flex값이 1, containerTwo는 flex값이 2인 것을 볼 수있다. 과연 이 flex 값들이 무엇을 말하는 것인지..... 

앞에 부모, 자식을 통해 쉽게 생각하면된다!

container라는 부모 영역에 containerOne, containerTwo라는 자식들이 각각 영역을 나누고 있는 것, 여기에 flex의 숫자 값은 각각 부모의 영역을 큰 1로 보고, 자식 들이 각각 1과 2만큼 나눠 가지고 있는 형태인 것이다. 그래서 결국 두 자식의 합을 분모로 둬서 containerOne은 1/3 만큼, containerTwo는 2/3 만큼의 레이아웃을 나누고 있는 것이다.

정리하면 부모 태그 안에 있는 자식 태그들이 서로    각각 영역의 값 / 자식 태그 전체 flex 값    만큼 영역을 갖는다. 

 

 

Flex스타일속성

 

flexDirection(따로 조건설정이 없으면, 콘텐츠는 상하배열이 Default): 상하(column),좌우(row) 콘텐츠의 방향

justifyContent: 콘텐츠 배열 속성, flexDirection의 하위 태그개념이라서, flexDirection의 정렬 조건에 따라 콘텐츠의 정렬 조건이 달라진다. 또 만약 flexDirection 속성이 없으면 위치 default 값은 flexDirection의 default 값인 column이다. 

alignItems: flexDirection의 반대조건으로 콘텐츠의 배열을 설정해준다. 

 

3. 앱&자바스크립트 모듈, 반복문, {}표현식, 조건문

모듈시스템 :

여러 자바스크립트 파일이 있을 경우, 서로 다른 자바스크립트 파일에서 각 파일에 있는 함수를 불러오거나, 자바스크립트 파일 자체를 불러올 때 사용하는 시스템

- export 란 외부에서 자바스크립트 함수를 쓸 수 있게 해주는 것

- import 란 다른 자바스크립트 파일에서 함수를 불러오는 것

파일을 불러올 때

./ ⇒ 현재 파일과 동일한 위치에서 불러올 파일을 찾는 코드

../ ⇒ 현재 파일이 위치한 폴더보다 상위 위치에서 불러올 파일을 찾는 코드

import 함수 불러오기

반복문 map:

 

우선 map 함수를 이용해서 반복문을 만드는 과정은 다음과 같다. 모듈시스템을 통해서 json 파일을 불러 온 후 json 데이터 안에 리스트 이름을 변수로 선언하고, map 함수를 써서 반복할 데이터를 넣어준다. 이때 map 함수의 변수 이름은 앞에서 선언한 json 파일 변수 이름으로 해주면 된다. 위의 이미지를 참고하면 된다.

 

{} 표현식:

좌측에 중간에 간단한 연산 값이 담긴 변수와 문자열을 우측 화면을 보면 {} 안에 연산 기호를 넣어서 화면에 구현한 모습이다.

즉 jsx 안에서 {}를 이용해서 자바스크립트 변수를 사용할 수 있는 것이다.

 

조건문: 삼항 연사자

어려운 설명말고 바로 좌측 자바스크립트 코드를 보면서 리뷰하는 것이 좋을 것 같다.

i를 2로 나눴을 때 나머지가 0 일때 ? 뒤가 참이면 짝수 거짓이면 홀수로 반환을 해준다는 코드인데, 이때 짝수, 홀수 카드 각각 stylesheet 속성을 다르게 해서 홀수 번째 카드는 노란색으로 짝수는 그냥 그대로 나오게 만들어주면 우측과 같은 앱 화면을 구현할 수 있다.

 

숙제 결과 👉

숙제 제시 이미지	완성 이미지

 

핫한 2주차였다. 너무 힘들었다.. 며칠동안 반복했는지 ㅎㅎㅎ🤮 그치만 뿌듯하다. 기다려진다 3주차 

 

 

 

 

👍 참고

리액트네이티브 앱 기본코드

import React from 'react';

import main from './assets/main.png';

import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView } from 'react-native';

 

export default function App() {

console.disableYellowBox = true;

//return 구문 밖에서는 슬래시 두개 방식으로 주석

return ()

 

}

const styles = StyleSheet.create({})

 

 

 

왜 이런 에러가 뜰까?.. 이유는 data.json을 저장 안해서..

 

 

* vscode 단축키

option + z : 긴 코드 다음줄로 내리기

shift + option + F : 코드정렬 단축키

Cmd + / : 주석 단축키

shift+option+ 방향키 ↓: 현재 커서 줄 아래로 바로 복사