[개발일지]스파르타코딩클럽_앱개발 종합반 2-5

//개발일지 어떻게 쓰는지 모르겠고 내 맘대로 써보자

 

이번 강의의 목표는 이 화면을 만드는거 (강의 중간에 멈춰놓고 만들어 보려고 한다)

일단 어떻게 만들어야 할지 대강 구상은 된다. 구상은 되는데 배운 걸로 만들 수 있을지 모르겠다

친절하게 사진이나 글씨 내용도 다 제공해 주고 어떤식으로 만들면 될지도 설명까지 해줬다.

 

뒷 강의 마저 들으면 뒤에 가서 만드는 거 알려줄 거 같은데 얼른 만들어보다 안되면 치워야겠다

 

일단 [코드스니펫] 02. flex 이거를 기준으로 만들어 보자 얼추 비슷한 거 같다. 스샷은 퍼옴

이거 보면

 

containerOne 이 빨강에  flex를 1만큼

containerTwo 이  flex를 2를 먹고 있으니까 containerTwo를

 

-> 빨강이 작아진다

-------------------------------------

배경색을 흰색으로 바꾸고

 

containerOne: {
    flex:1,
    backgroundColor:"#fff"
  },

 

----------------------------

파란색이 있는 구역 innerOne을 좀 넓히고 여기에 사진을 넣어야 할거 같다

  innerOne: {
    flex:2,
  },

----------------------------

펑션 리턴 문 안에 요 부분에 넣으면 되겠지?

앞에 강좌에서 사진 넣는 걸 배웠었는데 그걸 그대로 쓰면 될 거 같다

 

<View style={styles.innerOne}>
          <Image 
          source={{uri:'https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Fmain.png?alt=media&token=8e5eb78d-19ee-4359-9209-347d125b322c'}}
          resizeMode={"cover"}
          style={styles.imageStyle}
          />
        </View>

----------------------------

돌려보면 에러가 뜨는데

맨 위에 import 선언한 곳에 다가 image를 넣는 걸 빼먹으면 안 된다

-----------------------------

복사한 문구를 보니 style={styles.imageStyle} 이란 게 있으니까

imageStyle부분도 추가한다

 

imageStyle: {
    width:"100%",
    height:"100%",
    alignItems:"center",
    justifyContent:"center",
    borderRadius:20 
  },

 

넣고 돌려보니 모서리가 너무 네모라서 구글링 해보니

borderRadius:숫자 넣으라길래 대충 20 넣으니 비슷한 거 같다

----------------------------

사진 모서리 둥글게 만드니까 뒤에 배경색이 틈으로 비춘다. 배경색도 하얗게 만들자

  innerOne: {
    flex:2,
    backgroundColor:"#fff"
  },

-----------------------------

아참 맨 위에 글씨 어떻게 넣지

컨테이너원에다 넣어야 할거 같은데

<Text>나만의꿀팁 </Text> 요딴식으로 넣으니까 뭐가 수정이 안되는거 같다

 

<View style={styles.containerOne}>
        <Text style={styles.textStyle}>나만의 꿀팁</Text>

찾아보니 이렇게 넣고 나중에 텍스트 스타일을 설정해줄 수 있다

-----------------------------

그런데 이렇게 넣고 돌리면 맨 위에 상태바에 글씨가 겹쳐 보인다

아 초반 강의 때 이거 어떻게 하는지 분명 알려줬었는데 기억이 안 난다

구글링 했는데 영어실력이 달려서인지 원하는 심플한 뭔가가 없다

-------------------------------

<View style={styles.containerOne}>
        <StatusBar />
        <Text style={styles.textStyle}>나만의 꿀팁</Text>

ㅋ 이러니까 맨 위에 한 칸 뛰어지는 거 같다 일단 진행 ㄱ

----------------------------------

 textStyle: {
    fontSize: 30,
    fontWeight: "bold"
  }

글씨 크기가 30 정도 돼 보이는데,,

글씨 굵게 하는 건 bold

-------------------------------------

여기까지 만들면 글씨가 너무 맨 위에 가 있어서 영 다른 거 같다

막판에 배운 게 justifyContent 였으니까 여기 써보자

 containerOne: {
    flex:1,
    backgroundColor:"#fff",
    justifyContent:"flex-end",
    padding: 10
  },

밑에 너무 붙어있는 거 같아서 패딩도 넣어봤다.. 

저 공간을 확실하게 만들려면 아예 container를 하나 더 만들어서 flex를 흰색으로 줘버리면 될 거 같기도 한데

일단 그냥 가보자

---------------------------------------

 

헤매다 보니 시간이 너무 많이 지나서 내일 다시,,

 

----------------------------------------------------------

import React from 'react';

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

export default function App() {

  return (

    <View style={styles.container}>

      <View style={styles.containerOne}>

        <StatusBar />

        <Text style={styles.textStyle}>나만의 꿀팁</Text>  

      </View>

      <View style={styles.containerTwo}>

        <View style={styles.innerOne}>

          <Image

          source={{uri:'https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Fmain.png?alt=media&token=8e5eb78d-19ee-4359-9209-347d125b322c'}}

          resizeMode={"cover"}

          style={styles.imageStyle}

          />

        </View>

        <View style={styles.innerTwo}>

        </View>

      </View>

    </View>

  );

}

const styles = StyleSheet.create({

  container: {

    flex:1

  },

  containerOne: {

    flex:1,

    backgroundColor:"#fff",

    justifyContent:"flex-end",

    padding: 10

  },

  containerTwo:{

    flex:7,

    backgroundColor:"yellow"

  },

  innerOne: {

    flex:2,

    backgroundColor:"#fff"

  },

  innerTwo: {

    flex:4,

    backgroundColor:"orange"

  },

  imageStyle: {

    width:"100%",

    height:"100%",

    alignItems:"center",

    justifyContent:"center",

    borderRadius:20

  },

  textStyle: {

    fontSize: 30,

    fontWeight: "bold"

  }

});

------------------

뭐 별로 한 거도 없는데 시간이 참 잘 간다.

지금까지 강의 들으면서 그냥 있는 거 따라만 했는데 이런 식으로 직접 해보도록 숙제 내주는 게 참 좋은 거 같다.

여기까지도 사실 몇 개밖에 바꾼 게 없지만 그래도 직접 해보니 이 시스템이 어떤 식으로 돌아가는지 이해하는데 도움이 되는 거 같다.