앱개발 종합반 2주차(리액트네이티브 & EXPO & 앱화면 그리기)

 

여러가지 공부를 중복해서 시작하다보니 조금은 빡빡한 느낌은 있지만

그래도 새로운 무언가를 배운다는 즐거움을 조금씩 느끼고있다!! 

 

이제 드디어! 본격적인 앱개발에 필요한 화면을 그리는 부분을 배우기시작했다.

정말 튜터님 말씀대로 요즘에는 앱개발을 쉽게할 수 있도록 도와주는 라이브러리가 참 많은 것 같다

 

우선, 리액트네이트브 & Expo 가 무엇인지부터 시작을 한다.

내가 이해한바로는 이것을 가장 큰 장점은! 자바스크립트만 알아도 앱을 개발할 수 있도록 하고, 내가 적용한 내용들을 모바일 화면으로 바로바로 확인할 수 있도록 동기화 시켜준다! (실제로 코드 하나 바꾸고 저장하면 바로 적용된다.)

주의할점은, 노트북과 모바일 모두 동일한 와이파이를 사용해야 가능하다는점!

※ 리액트네이티브를 사용하기위해 준비할것들! - Node.js 자바스크립트 개발 환경을 구축하고 - NPM으로 필요한 자바스크립트 앱개발 도구들을 가져와 사용한다.  - 설치한 NPM을 통해 yarn 을 설치해준다(자바스크립트 패키지 매니저 툴)  - 마지막으로, Expo 명령어 도구 설치해주면 끝 (npm install -g expo-cil)

 

Expo 실행하는 부분에 대해서는 강의자료를 참고하자!

 

다음으로, 

앱화면을 만들기 위한 기본 문법 JSX 문법에 대해서 배워보자!

 

JSX문법을 화면에 그려준다는 행위,동작을 렌더링 이라고한다. 아직은 이런 용어들이 와닿지 않지만 기억해보자

이 문법을 공부하면서 느낀점은 기존 HTML,CSS 와 형태 나 작성 방식은 비슷한듯 비슷하지 않다

하지만 기본 개념들은 비슷하다보니 강의를 듣고 숙제도 제출하면서 어느정도 익숙해진것같다!

(JSX문법에서의 꺽쇠를 태그라고 부르며, 이렇게 구성된 태그를 엘리먼트라고 부른다.)

 

JSX문법에서 공식문서만 있으면 뭐든지 할수있을것같은 느낌 " docs.expo.io/versions/v38.0.0/react-native/view/ " 

모르는게 생길때마다 찾아보는 습관을 가지자!

 

기본골격에 대해서는 눈으로 익숙해질 필요가 있어보인다.

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 style = StyleSheet.create({        })

 

또한, 기억해야될 자주사용되는 JSX문법 태그 

 

1. <View></View>

  → 화면 영역에 레이아웃을 잡아주는 역할 (단, View 태그만으로는 영역을 지정할 수 없으며, StyleSheet와 함께 사용되어야한다.) 

 

2. <Text></Text>

   → 앱에 글을 사용할때 필수로 사용되는 엘리먼트 

 

3. <ScrollView></ScrollView>

   → 앱영역에서 벗어나는경우 ScrollView로 감싸면 스크롤이 가능해진다. (horizontal 의 값이 true일경우 세로 대신 가로로 스크롤 하도록 변경 가능)

 

4. <TouchableOpacity/>

→ Button 엘리먼트의 본인영역을 갖고 있어, 스타일에도 신경을 써야하므로 ScrollView에서 처럼 카드형식으로 사용학 어렵기때문에 대체해서 사용하는 엘리먼트

예를들면, 내가 만든 카드 영역과 디자인에 버튼 기능을 달고 싶을때 사용한다. 

 

5. <Image/>

   → source속성으로 폴더에 있는 이미지를 가져올수도있고, uri 속성을 통해 외부이미지도 가져올 수 있다.

       (resizeMode 등 Image 엘리먼트에 대한 사용법은 공식문서를 참고해보자)

 

이러한 엘리먼트들을 앱 화면에 맞게 꾸밀 수 있도록 도와주는 Style 속성에 대해서도 알아두자

 

리액트네이티브에서 제공하는 StyleSheet기능을 가져와 사용하는것이며, 

스타일시트 사용법 

StyleSheet를 구성하는 기본형태는 위와같으며, CSS를 배워서그런지 다른 부분들은 크게 어려운것없었다.

다만, 앱화면에서 콘텐츠의 위츠를 결정하는 Flew 에 대해서는 중요하게 기억을 해야될것같다!

 

1. Flew 

상대적인 값이라고 보면된다. 

예를들어,  Conatainer 영역안에 A 와 B라는 영역이 있다고하면 Conatainer 에 Flex :1 이라는 영역안에

A와 B가 Flex:1, Flex:2 라고 지정한다면 1:2로 영역을 나눠갖는다고 보면된다.

 

2. flexDirection

→ 자리잡은 영역의 방향을 지정해준다. (row : 가로 , Column : 세로)

    기본값은 Column 이다. 

 

3. justifyContent

  → 이 속성은 flexDirection 과 동일한 방향으로 정렬해주는 역할을 한다. 

      (속성값 : flex-start, center, flex-end, space-between, space-around → flexDirection 의 row, Column 값에따라 

                  가로,세로 방향으로 정렬이 된다.)

 

4. alignItems

  → 이 속성은 flexDirection 과 반대방향으로 정렬해주는 역할을 한다. 

      (속성 값: flex-start, center, flex-end, stretch )

 

이러한 엘리먼트 ,속성 들은 강의에서 나온 실습자료, 숙제자료를 토대로 복습을 해보면 좋을 것 같다!

마지막으로,

앱에서의 모듈 및 반복문 삼항연산자, 조건문 등은 이해는 가지만 상세 코드들을 보면서 복습을 따로 해두는게 좋을것같아보인다!