[2주차 개발일지] 스파르타코딩클럽 앱개발반

[리액트 네이티브&EXPO]

리액트 네이티브: 자바스크립트 언어 하나로 안드로이드 앱과 iOS앱 두 가지 모두 만들어주는 라이브러리

 

*node.js, npm, yarn 사용

Npm: 도구를 가져올거라는 명령어

*EXPO도구만 NPM을 쓴다.

EXPO (1) 프로젝트 생성 (2) 실행 (3) 빌드&배포

 

- VScode 실행

  D:\LDY\sparta_study>expo init sparta-myhoneytip-dan

  → expo 에서 앱 만들기

 

- Expo의 장점은 작성하면 앱에 바로 적용이 된다.

 

[JSX 문법]

태그로 화면을 그리는 것을 뜻 함.

Return 은 반환, 즉 렌더링.

태그는 엘리먼트

 

- 규칙

  1) 모든 태그는 리액트 네이티브 주머니에서 꺼내서 써야 한다.
  → expo 도구를 사용해서 쉽게 개발, 도구는 라이브러리

 

  2) 열린 태그와 닫는 태그를 구분해서 사용
  - 리액트 네이티브 공식 문서 https://reactnative.dev/docs/view
  - Expo 공식 문서 https://docs.expo.io/versions/v38.0.0/react-native/view/

 

  3) 모든 엘리먼트(태그)는 밖에 감싸는 엘리먼트(태그)가 있어야 한다.

  → 소괄호로 감싸져 있어야 한다.

 

  4) 주석: 코멘트. 함수에는 영향이 없다. 무슨 의도로 개발을 했는지

  →   //(슬래시 두개)로 주석 처리

  → JSX 태그 안에서 주석 처리는 다름: {/* */}

  → 쉽게 쓰는 방법(어디서나 적용 가능): 글씨 쓰고 드래그 à CTRL(아니면 SHIFT) + /

 

[앱 화면 만들기]
*’리액트 네이티브’라는 라이브러리라는 곳에서 도구를 가져다가 쓰는 것

- VIEW

화면의 영역을 잡아주는 코드

스타일(style) 태그를 통해서 영역을 잡을 수 있고 색깔을 지정해줄 수 있다

 

- TEXT

문자를 쓰려면 text 태그를 써야만 한다.

 

- SCROLLVIEW

앱의 꽃

화면 넘치는 양을 볼 때 스크롤이 가능하게 해주는 것

 

- BUTTON
https://reactnative.dev/docs/button

버튼 누르면 새로운 동작 실행

함수를 붙이는 방법

(1)   중괄호 안에 함수를 그대로 넣던가

(2)   onPress에 붙어 있는 이름없는 함수에 함수 이름 넣기

 

- TouchableOpacity

버튼의 또다른 이름

이걸로 감싸면 그 자체에 onPress를 붙일 수 있음

영역을 누를 수 있는 것

이걸 버튼보다 더 많이 씀

 

- image
https://reactnative.dev/docs/image#docsNav

(1) assest폴더에 들어있을 때: expo가 준 이미지

    image의 source에 넣은 것

(2) 주소를 통해 넣는 방법

<Image 
        source={{uri:'https://images.unsplash.com/photo-1424819827928-55f0c8497861?fit=crop&w=600&h=600%27'}}
        // 사용설명서에 나와 있는 resizeMode 속성 값을 그대로 넣어 적용합니다
        resizeMode={"cover"}
        style={styles.imageStyle}
      />

- Style

 

- Flex

영역을 나누는 것

const styles = StyleSheet.create({
  container: {
    flex:1
  },

이게 전체 영역 설정

containerOne: {
    flex:1,
    backgroundColor:"red"
  },
  containerTwo:{
    flex:2,
    backgroundColor:"yellow"

containerOne에서 flex: 1 은 1/3 크기

containerTwo에서 flex: 2 은 2/3 크기

 innerOne: {
    flex:1,
    backgroundColor:"blue"
  },
  innerTwo: {
    flex:4,
    backgroundColor:"orange"
  }
});

containerTwo가 두개 영역으로 나뉜 것

innerOne은 1/5, innerTwo는 4/5

→ 영역을 몇 분의 몇으로 나누는 지는 상대적이다. 즉, 마음대로 된다

 

- flexDirection

containerTwo:{
    flex:2,
    flexDirection:"row",
    backgroundColor:"yellow"
  },
  innerOne: {
    flex:1,
    backgroundColor:"blue"
  },
  innerTwo: {
    flex:4,
    backgroundColor:"orange"
  }

 

flexdirecion: “row” 는 좌우

flexdirecion: “column” 은 상하-기본값은 상하

 

- justifycontent

innerTwo: {
    flex:4,
    justifyContent:"flex-end",
    backgroundColor:"orange"
  }

Justifycontent: “flex-end”, Justifycontent: “flex-start”
→ left, right 대신 flex-start, flex-end

Justifycontent: “center”

innerTwo: {
    flex:4,
    flexDirection:"row",
    justifyContent:"flex-end",
    backgroundColor:"orange"
  }

flexDirecion: “row” 나 “column”로 자리도 바꿀 수 있다

 

['앱 화면 만들기' 숙제 중 내가 만든 부분] 이미지까지가 한계다. 수업 좀 더 듣고 다시 해본다

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
//이렇게 상단에 가져와 사용할 이미지를 불러옵니다
import favicon from "./assets/favicon.png"

export default function App() {
  return (
    <View style={styles.container}>
      {/*이미지 태그 soruce 부분에 가져온 미지 이름을 넣습니다 */}
    
        <Text style={styles.textStyle}>나만의 꿀팁</Text>
      
        <Image style={styles.imageStyle} source={{uri:'https://storage.googleapis.com/sparta-image.appspot.com/lecture/main.png'}}
          // 사용설명서에 나와 있는 resizeMode 속성 값을 그대로 넣어 적용합니다
        />

    </View>
  );
}

const styles = StyleSheet.create({
  textStyle: {
    color: "black",
    fontSize:30,
    fontWeight:"700",
    marginTop: 50,
    marginLeft: 20
  },
  imageStyle: {
    width:'90%',
    height:200,
    alignSelf:"center",
    borderRadius:20,
    marginTop: 20 
  }
});

*alignself: flex로 영역 지정안되어 있어도 가운데 정렬

 

[모듈]

어떤 자바스크립트 파일 안에서 만든 함수나 파일 등을 외부에서 사용가능 하게 하는 것

(ex) export

 

[반복문]

* ..은 폴더를 나가서 밖에 있는 애를 접근
* . 은 같은 폴더 내에 있는 애를 건드리는 것

반복문에서 최상위를 감싸는 애는 key값을 가지고 있어야 하고 key값은 유니크해야 한다. 생성하는 방법은 인덱스 넘버!

조금씩 수정해가면서 공부하기!

 

[중괄호{} 표현식]

JSX 문법 안에서는 중괄호면 자바스크립트문법을 모두 쓸 수 있다.

 

[삼항 연산자]

선택 사항이 단순히 두가지 뿐일 때, 단순하게 만들기

let result = 10 > 2 ? "참" : "거짓"

(기본 모습)
let result = 조건 ? 참일 때 : 거짓 일때

(예제)
let result = 10 == 9 ? true : false  // result <-- false 값 할당  
let result = 10 !== 9 ? true : false // result <-- true 값 할당  
let reuslt = 99 > 10 ? true : false // result <-- true 값 할당

 

[2주차 숙제]

*파일이름과 함수이름은 같아야 한다