앱개발 기초 3일차

앱개발 기초 3일차
#스파르타코딩클럽, #내일배움단
학습일자: 2022/03/09
강의: 앱개발 종합반
진도: 2-4 ~ 3-4

아 정말 자신 없다 ㅋㅋㅋㅋ ㅠㅠㅠ

=====================

나만의꿀팁 페이지 작성하기

1. 라이브러리 임포트

import React from 'react';
import main from './assets/main.png';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native';

리액트, 리액트네이티브에서 필요한거 꺼내오는게 기본.
html 기본이랑 똑같다. 생긴것도 비슷하고..

2. 기본 함수 골격 (깡통)

export default function App() {
  return ()

}

const styles = StyleSheet.create({})

함수가 아무것도 없지만, 이게 딱 기본 골격이라고 한다.

=====================

text에 대하여
text 대신 Text가 올바른 태그
크기는 fontSize:20
굵기는 fontWeight:"700" << 따옴표 넣어야함
거리두기는 margin, marginTop, marginLeft 등등(카멜형식!)
가운데정렬은

image에 대하여
image 대신 Image가 올바른 태그
가로길이는 width: 300, "90%" << 퍼센트는 따옴표로 문자열 처리
세로길이는 height
가장자리 연마는 borderRadius: 20
가운데정렬은 alignItems: "center" 혹은,
justifyContent를 쓰지만, 얘네는 flex 안에서만 작동한다!!!!
그러므로!!!!!
가운데정렬은 alignSelf: "center"!!!
alignSelf: "flex-end"로 하면 어떻게 될까? 끝으로 간다.(우측정렬)

이미지 주소를 넣는다고 바로 화면에 나오진 않는다.
스타일에서 영역을 잡아줘야 화면에 나온다!

  cardImage: {
    flex: 1
  },
  cardText: {
    flex: 2 
  }
  // cardImage, cardText에 flex로 영역을 준 순간 피자 이미지가 나온다. 이렇게 영역을 줘야 이미지가 나타난다.

여기까지 하니까 드디어 화면에 나온다.

flex에 대하여
flex 1 = 화면 하나 전체
flex는 기본적으로 상하정렬이지만, 좌우로 바꿀 수도 있다.
flexDirection: "row" << 좌우로 변경

=====================

태그의 기본함수를 쓰려고 하는데 적용이 전혀 안된다
텍스트의 numberOflines={3}도 적용이 안되고,
스타일에서 color:"#fff"도 안먹는다 ㅠㅠ 슬랙에 질문 남겼으니 날 구해주실거야...

안되는 이유!

잘못된 코딩
<Text styles={styles.middleButtonText}>생활</Text>
옳은 코딩
<Text style={styles.middleButtonText}>생활</Text>

이런 멍청한.....멍청한!!!!

=====================

2-6 모듈과 반복문
모듈: 자바스크립트 파일 안에서 만든 함수나 파일을 외부에서 쓸 수 있게 하는 문법(export, import 같은거)
export default = 밖에서도 쓸 수 있게 하는 키워드다. vs code에서 app.js를 열어보면 앞부분에 있는게 이거임

=====================

list변수에 .map을 붙이면 반복문을 돌린다.
변수.map((value, i)=> {})라고 본거 같은 기억이 난다

<View style={styles.cardContainer}>
        {/* 하나의 카드 영역을 나타내는 View */}
        { 
          tip.map((content,i)=>{
            return (<View style={styles.card} key={i}>
              <Image style={styles.cardImage} source={{uri:content.image}}/>
              <View style={styles.cardText}>
                <Text style={styles.cardTitle} numberOfLines={1}>{content.title}</Text>
                <Text style={styles.cardDesc} numberOfLines={3}>{content.desc}</Text>
                <Text style={styles.cardDate}>{content.date}</Text>
              </View>
            </View>)
          })
         }
        
      </View>

{}안에 뭔가가 들어가있다. 에이잭스랑 비슷한 느낌...

return을 보면, key={i}라고 되어있다.
반복문을 돌릴 때, 최상위에서 감싸고있는 태그에는 유니크한 키값이 부여되어야만 한다.

=====================

중괄호 {}표현식과 조건문(jsx)

jsx에서 자바스크립트를 쓰려면 중괄호 안에 넣으면 된다는 것

<Text style={styles.weather}>오늘의 날씨: {todayWeather + '°C ' + todayCondition} </Text>

styles라는 딕셔너리에 weather라는 값을 넣은거임

※ 삼항 연산자

java script
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 값 할당  

엑셀 if문과 똑같다.
(앞에 조건이 논리연산, 참일때 내보낼값, 거짓일때 내보낼값)
이 구조임

=====================

2-7 2주차 끝, 숙제 설명

내가 만들다 만 코드

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

export default function AboutPage() {
    return (
        <View style={styles.container}>
            <Text style={styles.hi}>HI! 스파르타코딩 앱개발 반에 오신것을 환영합니다</Text>
            <View style={styles.container2}>
                <Image style={styles.image} source={{ uri: 'https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2FaboutImage.png?alt=media&token=13e1c4f6-b802-4975-9773-e305fc7475c4' }} />
                <Text style={styles.text2}>많은 내용을 간결하게 담아내려 노력했습니다!</Text>
                <Text style={styles.text3}>꼭 완주하셔서 꼭 여러분것으로 만들어가시길 바랍니다.</Text>
                <TouchableOpacity sytle={styles.to}><Text style={styles.text4}>여러분의 인스타계정</Text></TouchableOpacity>



            </View>
            <View style={styles.container3}></View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#050099',
        flex: 1
    },
    container2: {
        backgroundColor: 'white',
        textAlign: 'center',
        flex: 4,
        borderRadius: 30,
        borderColor: 'white',
        marginLeft: 20,
        marginRight: 20,
        marginBottom: 70
    },
    hi: {
        textAlign: 'center',
        color: 'white',
        fontSize: 33,
        marginTop: 100,
        flex: 1
    },
    container3: {
        backgroundColor: 'white'
    },
    image: {
        borderRadius: 50,
        width: 300,
        flex: 2,
        alignSelf: 'center',
        marginTop: 50
    },
    text2: {
        fontSize: 20,
        flex: 1,
        textAlign: 'center',
        fontWeight: "800"
    },
    text3: {
        fontSize: 20,
        flex: 1,
        textAlign: 'center'
    },
    to: {
        backgroundColor:"orange",
        padding:21,
        borderRadius:15,
        flex: 1
    },
    text4: {
        fontSize: 20,
        textAlign: 'center'
    }
})

정답코드

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


export default function AboutPage(){
    const aboutImage = "https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2FaboutImage.png?alt=media&token=13e1c4f6-b802-4975-9773-e305fc7475c4"
  return (
    <View style={styles.container}>
        <Text style={styles.title}>HI! 스파르타코딩 앱개발 반에 오신것을 환영합니다</Text>
       
        
        <View style={styles.textContainer}>
            <Image style={styles.aboutImage} source={{uri:aboutImage}} resizeMode={"cover"}/>
            <Text style={styles.desc01}>많은 내용을 간결하게 담아내려 노력했습니다!</Text>
            <Text style={styles.desc02}>꼭 완주 하셔서 꼭 여러분것으로 만들어가시길 바랍니다</Text>
            <TouchableOpacity style={styles.button}>
                <Text style={styles.buttonText}>여러분의 인스타계정</Text>
            </TouchableOpacity>
        </View>
    </View>)
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor:"#1F266A",
        alignItems:"center"
      
    },
    title: {
        fontSize:30,
        fontWeight:"700",
        color:"#fff",
        paddingLeft:30,
        paddingTop:100,
        paddingRight:30
    },
    textContainer: {
        width:300,
        height:500,
        backgroundColor:"#fff",
        marginTop:50,
        borderRadius:30,
        justifyContent:"center",
        alignItems:"center"
    },
    aboutImage:{
        width:150,
        height:150,
        borderRadius:30
    },
    desc01: {
        textAlign:"center",
        fontSize:20,
        fontWeight:"700",
        paddingLeft:22,
        paddingRight:22

    },
    desc02: {
        textAlign:"center",
        fontSize:15,
        fontWeight:"700",
        padding:22
    },
    button:{
        backgroundColor:"orange",
        padding:20,
        borderRadius:15
    },
    buttonText: {
        color:"#fff",
        fontSize:15,
        fontWeight:"700"
    }
})

=====================

3-2. 디테일페이지
4분28초. 디테일페이지 만들어보기

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

export default function DetailPage() {
    console.disableYellowBox = true;
    const tip = {
        "idx": 9,
        "category": "재테크",
        "title": "렌탈 서비스 금액 비교해보기",
        "image": "https://storage.googleapis.com/sparta-image.appspot.com/lecture/money1.png",
        "desc": "요즘은 정수기, 공기 청정기, 자동차나 장난감 등 다양한 대여서비스가 활발합니다. 사는 것보다 경제적이라고 생각해 렌탈 서비스를 이용하는 분들이 늘어나고 있는데요. 다만, 이런 렌탈 서비스 이용이 하나둘 늘어나다 보면 그 금액은 겉잡을 수 없이 불어나게 됩니다. 특히, 렌탈 서비스는 빌려주는 물건의 관리비용까지 포함된 것이기에 생각만큼 저렴하지 않습니다. 직접 관리하며 사용할 수 있는 물건이 있는지 살펴보고, 렌탈 서비스 항목에서 제외해보세요. 렌탈 비용과 구매 비용, 관리 비용을 여러모로 비교해보고 고민해보는 것이 좋습니다. ",
        "date": "2020.09.09"
    }
    return (
        <View style={styles.container}>
            <Image style={styles.detailImage} source={{uri:tip.image}} resizeMode={"cover"}/>
            <Text style={styles.title}>{tip.title}</Text>
            <Text style={styles.desc}>{tip.desc}</Text>
            <TouchableOpacity style={styles.btn}><Text style={styles.btntxt}>팁 찜하기</Text></TouchableOpacity>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'black'
    },
    detailImage: {
        width: 400,
        height: 350,
        marginTop: 30,
        alignSelf: 'center',
        borderRadius: 20
    },
    title: {
        fontSize: 30,
        fontWeight: '700',
        color: 'white',
        marginTop: 30,
        textAlign: 'center'
    },
    desc: {
        color: 'white',
        margin: 20
    },
    btn: {
        borderColor: 'red',
        borderWidth: 1,
        padding: 10,
        width: 150,
        alignSelf: 'center',
        borderRadius: 20
    },
    btntxt: {
        color: 'white',
        textAlign: 'center',
        fontSize: 20
    }
})

오홍홍...좀 그럴싸해졌는걸?

정답코드를 보니까 컨테이너를 스크롤뷰로 잡네...현명한 판단 배우기

정답코드에서는 textContainer에서
alignItems: 'center',
justifyContent: 'center'
를 넣어줬는데, flex로 영역지정을 안한상태에서 이게 적용되는 이유는?

textContainer는 자식태그를 갖고있는 부모태그 = 영역이 있다.
그러므로 flex를 안쓰더라도 영역이 있다고 간주, 위 함수가 적용됨

flex를 쓰는 경우: 자식태그의 영역을 상대지정할 때, 부모영역도 flex를 걸어줌(?)

=====================

3-3. 리액트 기초지식
(컴포넌트, 상태, uesEffect)

컴포넌트에 프롭스가 데이터를 전달해주면 컴포넌트 안에 스테이트가 그 데이터를 관리한다. --> 무슨말이냐?

1) 컴포넌트(Component) : 정해진 엘리먼트들(요소)을 사용하여 만든 화면의 일부분
2) 상태(State) : 컴포넌트에서 데이터를 유지하고 관리하기 위한 유일한 방법 == 그냥 사용할 데이터!
3) 속성(Props) : 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식 == 그냥 데이터 전달!
4) useEffect : 화면에 컴포넌트가 그려지면 처음 실행해야 하는 함수들을 모아두는 곳

화면의 모든 부분이 컴포넌트라고 합니다...
(지금껏 만든 app.js, mainpage.js, aboutpage.js, detailpage.js 등등이 컴포넌트)

속성에 대해선.... 웹개발 배울때 function(response)에서 response에 원하는 데이터가 왜 들어오는지 이해하기를 포기했던 그런 느낌이 납니다.

상태란 무엇이냐~~

주식프로그램처럼, 서버에서 갱신된 데이터가 들어올때마다 실시간으로 화면이 바뀜

UI = component(state)

User Interface = 컴포넌트값(스테이트값)

const [state,setState] = useState([])

useState로 생성, setState로 수정/변경
state라는 변수, setState라는 함수를 얻음

 

useEffect : 리액트 기본 제공 함수

useEffect(()=>{

	...화면이 그려진 다음 가장 먼저 실행되야 할 코드 작성 공간

},[])

화면이 그려진 다음 가장 먼저 실행할 코드를 넣어서 실행시킴

=====================

3-4. 로딩화면, 카테고리 기능, 상태 바

filter 함수
map함수와 비슷한 반복문이지만, 조건문이 들어감
return 뒤에 조건을 달아서 반복문을 돌림.
ex) return a == b

상태바 구현 기능
툴을 하나 깔아야 됨..

expo install expo-status-bar

=====================

아 몰라~