[React Native] 스파르타 앱개발 종합반 2주차

2주차

• 앱개발의 서버와 클라이언트 중 클라이언트를 만들 것. JSX사용
• ReactNative & Expo 소개, 개발에 필요한 도구들 Node.js & npm & yarn
• 앱 화면 만들기
• 앱에서 자주 사용되는 자바스크립트 연습

---

Node.js & npm & yarn 소개와 설치

• 자바스크립트로 개발하기 위한 좋은 도구들이 이미 많이 나와있다. 그런 도구들을 가져오는 데에 사용되는 도구이다.

• ReactNative로 개발할 때 우리는 Node.js로 자바스크립트 개발 환경을 구축하고, npm(노드 패키지 매니저)과 yarn으로 개발에 필요한 도구들을 가져와 개발한다. npm으로 yarn을 설치할 예정이다.

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

  yarn설치

    //node와 npm은 설치되어있는 상태
    //도구를 가져와 설치하는 npm 의 설치 명령어 install과
    //컴퓨터 어디서든 설치하고 있는 도구를 사용할 수 있게 해주는 -g 옵션 명령어
    npm install -g yarn
    //설치가 완료된다음 버전 확인해보기
    yarn -v

ReactNative & Expo 소개와 설치

• ReactNative : 자바스크립트만으로도 안드로이드와 IOS모두 개발할 수 있도록 만든 도구.

  하지만 이걸로 개발하다보면 안드로이드나 IOS코드를 만져야만 가능한 것들이 있었음

• Expo : ReactNative로 개발할 때 안드로이드나 IOS코드를 만져야하는 대부분의 상황에서 자바스크립트만으로 가능하도록 만들어주는 도구. React Native 개발을 쉽게 할 수 있도록 해주는 도구

• Expo 클라이언트 앱 : Expo서버를 이용해서 개발중인 앱을 바로바로 확인해볼 수 있게 해주는 정말 편리한 기능

• Expo 명령어 도구 설치 - npm으로 설치하자

    npm install -g expo-cli
    //expo-cli : 설치 할 패키지 이름

  expo를 설치하면 프로젝트 생성, 실행, 빌드 등 여러 기능을 expo명령어로 쉽게 할 수 있다.

• Expo 가입과 계정 설정 : 컴퓨터에 Expo계정을 세팅해놓아야 개발한 앱을 이후 마켓에 배포할 때 배포 앱 관리와 배포를 한번에 쉽게 할 수 있음

  Expo사이트에서 회원가입

  컴퓨터에 세팅

    expo login --username "Expo 사이트 가입당시 입력한 username"
    ...
    expo 패스워드 입력란이 차례로 나오고, 차례대로 입력하면 로그인 성공!

Expo 시작 : 프로젝트 생성과 실행

프로젝트를 시작할 파일을 원하는 위치에 만들고 VSCode에서 해당 파일을 연다.

메뉴의 View > Termianl 또는 Ctrl+`를 눌러 터미널을 연다.

터미널에서 방금 만든 파일 경로로 이동하고

expo init 프로젝트명

라는 명령어를 입력해 expo로 새 앱 프로젝트를 생성한다.

아래와 같은 화면이 나오면 빈 프로젝트 생성을 의미하는 blank를 방향키로 선택해 엔터친다.

시간이 들고 아래처럼 ✅ Your project is ready! 라는 말과 함께 프로젝트 생성이 완료된다.

파일을 열어보면 프로젝트에 필요한 것들이 만들어져있다.

터미널에서 방금 만든 프로젝트폴더로 이동하고

expo start

라는 명령어를 입력한다.

expo서버를 통해 크롬이 켜지며 개발을 위한 공간이 뜬다. 여기에 있는 QR코드를 활용할 것이다.

QR코드 위에 여러 메뉴가 있지만 우리는 expo 클라이언트앱을 사용할 것이다.

각 메뉴들도 유용하니 어떤 기능인지 알아두면 좋다.

핸드폰에 Expo (Expo Go)앱을 설치한 뒤 앱에 들어가 Scan QR code 에서

방금 크롬에 있던 QR코드를 핸드폰으로 찍는다.

앱이 내 핸드폰에 설치된다.

Open up App.js to start working on your app! 라는 문구가 있는 내 앱이 실행된다. (이 문구는 프로젝트 폴더 내의 파일들 중 App.js 라는 파일에 포함되어있다)

expo앱의 메뉴창은 핸드폰을 흔들면 다시 보여진다는 메세지가 함께 나온다.

핸드폰으로 앱을 실행하고 나니 크롬 페이지 좌측상단에 내 기기명이 뜬다.

• 이렇게 QR코드를 찍어 바로바로 확인하려면 프로젝트를 실행중인 컴퓨터와 핸드폰이 동일한 네트워크망에 있어야 한다. 즉 같은 와이파이를 사용하고 있어야 한다.

크롬 페이지 우측 상단에 네모 두개를 누르면 오른쪽에 창이 하나 더 뜬다. 이 창에서 내 기기에서의 작동상황이나 오류메세지나 로그를 확인할 수 있다.(로그는 VSCode 터미널 창에도 찍힌다)

• 프로젝트 폴더 슬쩍 살펴보기

  assets 폴더 : 앱개발에 필요한 이미지등의 소스파일들

  node_modules 폴더 : node&npm&yarn에서 말했던 자바스크립트개발을 위한 도구들

  App.js : 앱 화면

  app.json : 앱 배포시 들어가는 설명서. 앱 명이나 앱아이콘, 버전 등이 적혀있음

  
  ## 앱 화면 만들기 - JSX문법

• 앱을 개발하고 실행하다보면 expo앱 아래에 경고창이 뜰 때가 있다. 오류가 아니라 권고, 그저 경고사항이므로 문제는 되지 않는다. 이걸 안보이게 하고 싶다면 App.js 의 App()함수 바디에 아래 코드를 추가하자(disableYellowBox에 취소선이 그어지는데 무시해도 된다)

    console.disableYellowBox = true;

• 프로젝트에서 뭔가 변경사항을 만들고 저장하면 핸드폰에 Expo앱에서 실행중인 앱 화면 하단에 Refreshing이라는 토스트메세지가 뜨며 변경사항이 바로 반영된다!

• JSX : 꺾쇠가 있는 태그(엘리먼트) 형태로 화면을 그리는 걸 JSX문법이라고 함

  App함수가 JSX문법을 반환(렌더링)하며 화면을 그린다.

• 모든 태그들은 React Native 주머니에서 꺼내서 사용한다.

• JSX문법들은 React Native 공식문서에 다 나와있다.

  • 태그 닫는 방식 두가지
  • 모든 태그(엘리먼트)들은 가장 최상위 태그 하나로 감싸져 있어야 한다.
  • JSX는 항상 최상위태그가 소괄호로 감싸져 있어야 함
  • 주석 : {/* */}, 단축키 Ctrl + /
    

앱 화면 만들기 - View, Text, ScrollView, Button, TouchableOpacity, Image

** 공식문서 Props부분에 속성들 나와있음

• View : View 태그에는 텍스트를 적을 수 없음 Text태그 써야함~

• Text : 텍스트를 보여줌

• ScrollView : 내용이 기기 화면 밖까지 넘칠 때 스크롤을 내려서 보여줌

• Button 버튼의 속성들

  title : 버튼 내의 텍스트

  onPress : 버튼을 눌렀을 때 실행될 함수를 넣을 수 있음. 그자리에서 작성해도 되고 따로 선언해서 써도 됨 예시) onPress={함수}

  그 외 style, color .. 공식문서에 잘 나와있음

• TouchableOpacity : 버튼과 똑같이 onPress를 달아서 쓸 수 있음. 버튼과 달리 본인의 영역을 갖지 않음. 일정 영역을 이 엘리먼트로 감싸면 해당 영역 전체에 onPress가 동작함.

• Image

  이미지 소스넣는 방법

  1. assets폴더에서 가져다 사용

      import favicon from "./assets/favicon.png"
     
      <Image
          source={favicon}
      />

  2. 외부 이미지 사용하기 - uri을 {}로 한 번 더 감싸줌

      <Image
          source={{uri:'https://images.unsplash.com/photo-1424819827928-55f0c8497861?fit=crop&w=600&h=600%27'}}
      />

     이미지태그 속성들

     source : 이미지 소스

     resizemode : 이미지 리사이징 모드. repeat, cover 등이 있음

• Alert.alert('팝업창 띄우기')

** 코드가 너무 길어서 창 밖으로 나갈 때 - Alt + z를 눌러 정리 가능

앱 화면 만들기 - 구성한 화면 꾸미기, Styles

StyleSheet라는 리액트네이티브의 도구를 사용함

• styles속성들

    const styles = StyleSheet.create({
      container: {
        //영역을 잡는 속성입니다. 따로 자세히 다룹니다.
        //flex: 1은 전체 화면을 가져간다는 뜻입니다
        flex: 1,
        //영역의 배경 색을 결정합니다
        backgroundColor: '#fff',
        //아래 두 속성은 영역 안의 컨텐츠들의 배치를 결정합니다. 
        //flex를 자세히 다룰때 같이 자세히 다룹니다
        justifyContent:"center",
        alignContent:"center"
      },
      textContainer: {
        //영역의 바깥 공간 이격을 뜻합니다(하단 이미지 참조)
        margin:10,
        //영역 안의 컨텐츠 이격 공간을 뜻합니다(하단 이미지 참조)
        padding: 10,
        //테두리의 구부러짐을 결정합니다. 지금 보면 조금 둥글죠?
        borderRadius:10,
        //테두리의 두께를 결정합니다
        borderWidth:2,
        //테두리 색을 결정합니다
        borderColor:"#000",
        //테구리 스타일을 결정합니다. 실선은 solid 입니다
        borderStyle:"dotted",
  
      },
      textStyle: {
        //글자 색을 결정합니다. rgb, 값 이름, 색상코드 모두 가능합니다
        color:"red",
        //글자의 크기를 결정합니다
        fontSize:20,
        //글자의 두께를 결정합니다
        fontWeight:"700",
        //가로기준으로 글자의 위치를 결정합니다
        textAlign:"center"
      }
    }

  ** styles, container, textContainer, textStyle 은 모두 내가 맘대로 붙여준 이름들임

• 사용 예 - 내가 붙여준 이름들로 불러옴

    <View **style={styles.textContainer}**> ..

  
  ## 앱 화면 만들기 - 컨텐츠의 위치 : Flex

앱 화면을 구성할 때 가장 중요하다고 해도 과언이 아닌 Flex.

영역의 레이아웃을 결정한다.

많은 연습을 통한 이해가 필요함.

• flex : 영역을 차지하는 정도. 상대적인 개념임. 같은 라인의 자식 태그 간 화면을 구성하는 비율.

    import React from 'react';
    import { StyleSheet, Text, View } from 'react-native';
  
    export default function App() {
      return (
        <View style={styles.container}>
          <View style={styles.containerOne}>
  
          </View>
          <View style={styles.containerTwo}>
  
          </View>
        </View>
      );
    }
  
    const styles = StyleSheet.create({
      container: {
        flex:1
      },
      containerOne: {
        flex:1,
        backgroundColor:"red"
      },
      containerTwo:{
        flex:2,
        backgroundColor:"yellow"
      }
    });

  위 코드 실행 결과 전체 화면에 빨간색:노란색 = 1:2 비율로 나타남.

• flexDirection : 자식 요소들을 세로(위아래)로 정렬할 지 가로(좌우)로 정렬할 지 결정. row, column이 있음. 기본값은 column임.

• justifyContent : 자식 요소들을 정렬하는 방법. flexDirection값에 따라 적용방향이 결정됨. flex-start, flex-end, center 등이 있음.

• alignItems : justifyContent와 반대 방향의 정렬 방법. (alignContent아님!!!)

  
  ## 앱 화면 만들기 - 메인화면 완성

• 제일 첫 틀 - 유용

    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({})

• alignSelf: "center" : 이 컨텐츠를 가운데로 위치시켜라. flex영역안이 아니어도 됨. center, flex-end등이 있음

• textAlign : 텍스트 배치

• 이미지는 width height나 flex로 영역 크기를 지정해줘야만 화면에 나타남!!

  • width height 중 소스이미지의 가로세로를 맞췄을 때 더 큰 쪽에 맞추는 듯..?

• flex와 width, height를 같이 쓸 수 있음

  • 같이 썼을 경우 flex로 분배된 영역 크기를 유지하고 내용이 넘치면 잘리는 듯.

<<<<<레이아웃 연습 많이하기 . . . 리액트 레이아웃 어렵다>>>>>

앱&자바스크립트 - 모듈과 반복문

• export default

  import 불러올이름 from '불러올 파일 경로'

• json파일을 불러와서 map함수로 반복문을 통해 뷰를 만든다.

  반복문으로 뷰 만들 때 만들어지는 뷰의 가장 최상위 태그에는 고유한 key값 속성이 있어야 함

  
  ## 앱&자바스크립트 - { }와 조건문 if (JSX안에서 자바스크립트 문법 사용)

• JSX안에서 자바스크립트 문법을 사용하려면 중괄호 {}를 사용.

• 삼항 연산자

  조건문이 참이면 :의 앞 값이 변수에 저장되고 거짓이면 :의 뒤 값이 저장된다.

    val result = 10>5 ? "true":"false"

  
  

---

숙제에서 얻은 것

• 컴포넌트화(페이지 분할, 파일 여러개로 나눠 만드는 법)

  최상위 위치에 대충 폴더 만들고 원하는 이름.js만듦

  export default function의 함수명은 항상 해당 파일명과 똑같아야 함.

  파일 위치가 바뀌었다면 import 파일 경로명들도 맞춰줌.

  App()에 있던 내용들은 다른 파일로 옮겼으니 모두 지우고, 불러올 파일을 import한 후 return에 작성해 해당 파일 내용을 리턴하도록 함

• 리액트 네이티브에서 모든 js파일은 내보내(export)져야 함