[왕초보 앱개발] 2주차 앱 메인 만들어보기 *EXPO

expo 를 통해 직접 앱 메인 화면을 디자인해보는 실습.

구역을 나누고, 도구를 쓰고.. 빡세다.

실수가 많고 문법이 익숙하지 않아서 뭐 하나 새로 설정하려다보면 자꾸 오류가 나는데 VSCode와 EXPO 시스템 자체가 문제들을 쉽게 찾아내고 알려줘서 고치기 편했다. 시간도 오래 걸리고 힘들었지만 (점점 더 셀프 앱구축의 꿈은 멀어지는느낌이지만..) 눈으로 보는 것보다 직접 뚝딱거려보니 더 재밌다.

실력과 재미는 역시 별개.

새로운 것 최고! 남은 3주도 파이팅..

튜터쌤이 참 오목조목 잘 가르쳐주신다. 이렇게 앱에서 보여지는 화면 구축까지 했다면 프론트 개발자가 된거라고! 비약 강한 칭찬도 해주심 ㅎ 그동안 여러 앱을 다운받고 쓰면서 오류에 욕만 해봤지 어떻게 출력되는지 그런 시스템은 또 처음 알게되고 해보는 거다 보니 좋았다. 무한 업데이트 지옥에 빠진 개발자님들을 응원합니다.

 

---

아래는 정답이 아닌 나만의 코드 + 정답 가이드 코드 짬뽕..

가장 많이 한 실수는 {} 괄호를 써야할 때, 안 써야 할 때가 헷갈리고.

, 콤마를 안 찍고 넘기는 경우가 많았다. 스타일 주기도 너무 어렵다.. 미용실 디자이너의 마음을 이해하게 되었다..(>?,,

import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Image, SafeAreaView, ScrollView, TouchableOpacity } from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <StatusBar style='dark'
      />
        <View style={styles.containerOne}>
        <Text style={styles.title}> 나만의 꿀팁</Text>
        <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>
      <ScrollView  horizontal={true}>
      <View style={styles.containerTwo}>
        <TouchableOpacity style={styles.innerOne}>
          <Text style={styles.textStyle}>생활</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.innerTwo}>
        <Text style={styles.textStyle}>재테크</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.innerThree}>
        <Text style={styles.textStyle}>반려견</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.innerFour}>
        <Text style={styles.textStyle}>꿀팁 찜</Text>
        </TouchableOpacity>
        </View>
      </ScrollView>
        <View style={styles.containerThree}>
        <Image 
        source={{uri: 'https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Fpizza.png?alt=media&token=1a099927-d818-45d4-b48a-7906fd0d2ad3'}}
        resizeMode={"cover" }
        style={styles.cardImage}/>
        <View style={styles.card}>
        <Text style={styles.cardTitle}> 먹다 남은 피자를 촉촉하게!</Text>
        <Text style={styles.cardDesc} numberOfLines={3}> 먹다 남은 피자는 수분이 날라가기 때문에 처음처럼 맛있게 먹을 수 없는데요. 이럴 경우 그릇에 물을 받아 전자레인지 안에서 1분 30초에서 2분 정도 함께 돌려주면 촉촉하게 먹을 수 있습니다. 물이 전자레인지 안에서 수증기를 일으키고, 피자에 촉촉함을 더해줍니다.</Text>
        <Text style={styles.cardDate}> 2020.09.09</Text>
        </View>
        </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    justifyContent: "center",
    alignContent: "center",
    },
  containerOne: {
    flex:3,
    backgroundColor:"transparent"   
  },
  containerTwo:{
    flex:1,
    backgroundColor:"white",
    flexDirection:"row",
    height: 40
  },
  containerThree:{
    flex:4,
    backgroundColor:"white",
    flexDirection:"row",
    marginLeft: 10,
    marginRight: 10,
    borderBottomColor: "#eee"
  },
  textStyle: {
    fontSize: 20,
    fontWeight: 'bold',
    textAlign: "center"
  },
  innerOne: {
    flex:1,
    margin: 10,
    backgroundColor:"lightpink",
    borderRadius: 15,
    width: 80,
    height: 50,
    justifyContent: "center",
    alignContent: "center"
  },
  innerTwo: {
    flex:1,
    margin: 10,
    backgroundColor:"violet",
    borderRadius: 15,
    width: 80,
    height: 50,
    justifyContent: "center",
    alignContent: "center"
  },
  innerThree: {
    flex:1,
    margin: 10,
    backgroundColor:"lightgreen",
    borderRadius: 15,
    width: 80,
    height: 50,
    justifyContent: "center",
    alignContent: "center"
  },
  innerFour: {
    flex:1,
    margin: 10,
    backgroundColor:"lightyellow",
    borderRadius: 15,
    width: 80,
    height: 50,
    justifyContent: "center",
    alignContent: "center"
  },
  title: { fontSize:30, fontWeight: 'bold' },
  imageStyle:{
    borderRadius: 10,
    marginTop: 5,
    width: "95%",
    height: "85%",
    alignSelf: 'center'
    },
  cardImage: {
    flex: 1,
    width: 100,
    height: 100,
    borderRadius: 10
  },
  card: {
    flex: 2,
    flexDirection: "column",
    marginLeft: 10
  },
  cardTitle: {
    fontSize: 18, fontWeight: '700'
  },
  cardDesc:{ 
    fontSize: 15, fontWeight: '400'
  },
  cardDate:{
    fontSize: 15, fontVariant: '200', color: '#a6a6a6'
  }
});

 

페이지화 / 컴포넌트 개념 들어가면서 2주차 숙제까지 완료.

오류가 자꾸 나서 힘들었다,,,,, 초보자는 힘들어,,,,,,,,, 

나만의 태그를 만들어보다가도 오류가 계속되니 튜터의 태그를 복사해서 어떻게든 결과물 실체를 확인하게된다 흑흑..

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


export default function AboutPage(){
    const aboutImage = "https://storage.googleapis.com/sparta-image.appspot.com/lecture/about.png"

return ( <View style={styles.container}>
      <Text style={styles.title}>HI! 스파르타코팅 앱개발 반에 오신 것을 환영합니다</Text>

      <View style={styles.card}>
                <Image style={styles.cardImage} source={{uri: aboutImage}}
                resizeMode={"cover"}/>
                <Text style={styles.cardTitle}>많은 내용을 간결하게 담아내려 노력했습니다!</Text>
                <Text style={styles.cardDesc}>꼭 완주하셔서 꼭 여러분 것으로 만들어가시길 바랍니다</Text>
                <TouchableOpacity style={styles.cardButton}>
                <Text style={styles.ButtonText}>여러분의 인스타계정</Text></TouchableOpacity>
              </View>
            </View>)
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
      backgroundColor: "#1F266A",
      alignItems: "center"
    },

    title: {
        flex: 1,
        color: "#fff",
        paddingTop: 70,
        paddingLeft: 25,
        paddingRight: 25,
        fontSize: 36,
        fontWeight: "700"
    },


    card: {
        flex: 5,
        borderRadius: 20,
        margin: 30,
        marginBottom: 80,
        backgroundColor: "#fff",
        JustifyContent : "center",
        alignItems: "center"
    },

    cardImage: {
        marginTop: 40,
        width: 100,
        height: 100
    },

    cardTitle: {
        marginTop: 20,
        padding: 15,
        fontSize: 25,
        fontWeight: "600",
        textAlign: "center"
    },

    cardDesc: {
        marginTop: 20,
        fontSize: 17,
        padding: 10,
        fontWeight: "500",
        textAlign: "center"

    },

    cardButton: {
        borderRadius: 20,
        marginTop: 30,
        marginLeft: 40,
        marginRight: 40,
        padding: 5,
        backgroundColor: "orange",

    },
    ButtonText: {
        color: "#fff",
        fontSize: 17,
        padding: 20,
        fontWeight: "800"

    }

})