[스파르타 코딩클럽] 앱개발 2주차 끝! 와 이번주는 조금 힘들었어

 

앱개발 2주차 숙제까지 마치고 돌아왔다. 이번 주차는 어리바리하게 두둑 두둑 쳤는데 숙제도 어찌저찌 하다보니까 해냈다... 어떻게 했지? 뭔지 모르겠는데 일단 잘 했어;

 

1. 2주차 배운 내용 복습

(1) 앱개발 준비 : Expo와 VS를 설치하였다.

 

(2) JSX 문법 : 리액트 네이티브에서 retun ()에 들어갈 문법을 배웠다. 저장을 할 때마다 휴대폰 화면에 직관적으로 보여줘서 편했다. JSX 문법 밖에서의 주석//과 안에서의 주석{/* */}이 다르다는 것에 주의할 것.

 

(3) 화면을 구성하는 엘리먼트들 : <View>, <Text>, <ScrollView>, <Button>, <TouchableOpacity>, <Image>, style={styles.title}, Flex.

 

(4) 메인화면 완성하기

이 화면을 복습겸 공부겸 만들었다.

(5) 모듈, 반복문, {}표현식, 조건문

 

2. 숙제

 이번 과제는 아래의 어바웃 화면 만들기였다.

 

아니 티스토리는 사진이 이상하게 들어가네

  왼쪽이 숙제 화면이고, 오른쪽이 내가 직접 만든 화면이다. 생각보다 똑같이 잘만들었는걸?

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

위 코드는 해설강의에 있던 코드다. 내가 짠 코드와 별다른게 없어서, 내 코드도 살포시 기록해본다.

import React from 'react';
import man from '../assets/man.png';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native';
import data from '../data.json';
  console.disableYellowBox = true;

export default function AboutPage() {
  return (
   
<ScrollView style={styles.container}>
<Text style={styles.title}>Hi! 스파르타코딩 앱개발 반에 오신것을 환영합니다</Text>
<View style={styles.white}>
      <Image style={styles.man} source={man}/>
      <Text style={styles.big}>많은 내용을 간결하게 담아내려 노력했습니다!</Text>
      <Text style={styles.small}>꼭 완주 하셔서 꼭 여러분것으로 만들어가시길 바랍니다</Text>
      <TouchableOpacity style={styles.button}><Text style={styles.bt}>여러분의 인스타계정</Text></TouchableOpacity>
    </View>
</ScrollView>
  )
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "blue"
  },
  title: {
    fontSize:40,
    fontWeight:'900',
    textAlign: 'center',
    marginTop:70,
    color: "#fff"
  },
  white: {
    backgroundColor: "#fff",
    marginLeft:40,
    marginTop:50,
    marginRight:40,
    height:550,
    borderRadius:20,
    padding: 30
  },
  man: {
    width:200,
    height:200,
    alignSelf:'center',
    marginTop:50,
    borderRadius:20
  },
  big:{
    fontSize:25,
    textAlign:'center',
    fontWeight:'200'
  },
  small:{
    fontSize:18,
    textAlign:'center',
    marginTop:20,
    fontWeight:'200'
  },
  button:{
    backgroundColor:"#fdc453",
    width:140,
    height:50,
    borderRadius:10,
    marginTop:40,
    alignSelf:'center'
  },
  bt:{
    textAlign:'center',
    fontSize:15,
    color:"#fff",
    marginTop:15
  }
})

 한 화면에 View 태그가 수평이나 수직으로 두 개 들어갈 수 없다는 것을 배웠다. 진짜 한참 헤맸다ㅋㅋㅋ 생각해보니 당연한 거 같은데...?

 

 뷰탭 안에 뷰는 또 들어갈 수 있다. 나는 스크롤뷰 안에 텍스트와 뷰를 넣었다. 그거 말고는 기억을 되살려서 하다보니 됐다. 막상 2주차 적으려니 별거 없네? 끝. 이제 정말로 자러가야지!

 

 

스파르타코딩클럽