[개발일지] 앱개발 2주차: 메인 페이지 만들기

강의는 2주차이지만, 사실 일주일동안 거의 매일 듣고 있다.
대충 태그들 설명해주더니, 사진 하나 주고 구현해 오라고 하길래 막막했다.
어디서부터 어떻게 손대면 좋을 지 아이디어도 없었다.
그래도 하나씩 구조를 생각하면서 진행하다보니, 3시간 만에 얼추 비슷하게 완성할 수 있었다.
첫번째는 과제 사진, 두번째는 내가 만든 화면이다.

너무 사진이 크게 들어가서 좀 당황스럽...네

암튼 내가 짠 코드는 이렇다_!

import React from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity, Alert, ScrollView, horizontal } from 'react-native';
import { backgroundColor } from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes';
import NativePushNotificationManagerIOS from 'react-native/Libraries/PushNotificationIOS/NativePushNotificationManagerIOS';
import favicon from "./assets/favicon.png"

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>몌의 꿀팁</Text>
      </View>
      <View style={styles.imageContainer}>
        <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={"center"}
          style={styles.imageStyle}
          />      
      </View>
      <ScrollView style={styles.buttonContainer} horizontal>
        <View style={styles.buttonOne}>
          <TouchableOpacity style={styles.button}>
            <Text style={styles.buttonTextStyle}>생활</Text>
          </TouchableOpacity>
        </View>
       <View style={styles.buttonTwo}>
              <TouchableOpacity style={styles.button}>
                <Text style={styles.buttonTextStyle}>제테크</Text>
              </TouchableOpacity>
        </View>
        <View style={styles.buttonThree}>
          <TouchableOpacity style={styles.button}>
            <Text style={styles.buttonTextStyle}>반려견</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.buttonFour}>
          <TouchableOpacity style={styles.button}>
            <Text style={styles.buttonTextStyle}>꿀팁 찜</Text>
          </TouchableOpacity>
        </View>
      </ScrollView>

      <View style={styles.containerFour}>
        <View style={styles.contentImageContainer}>
          <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.contentImageStyle}
          />    

        </View>
        <View style = {styles.contentTextContainer}>
          <Text style={styles.textStyle}>먹다 남은 피자를 촉촉하게! </Text>
          <Text numberOfLines={3} ellipsizeMode='tail'>먹다 남은 피자는 수분이 날라가기 때문에 처음처럼 맛있게 먹을 수 없는데요. 이럴 경우 그릇에 물을 받아 전자레인지 안에서 1분 30초에서 2분 정도 함께 돌려주면 촉촉하게 먹을 수 있습니다. 물이 전자레인지 안에서 수증기를 일으키고, 피자에 촉촉함을 더해줍니다.</Text>
          <Text style={styles.contentDateStyle}>2020.09.09</Text>
        </View>
      </View>

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex:1
  },
  textContainer: {
    flex:1,
    backgroundColor:"#fff",
    alignItems:'flex-start',
    justifyContent: 'flex-end',
    margin: 20
  },
  textStyle:{
    fontSize: 21,
    fontWeight: "700",
    textAlign:"justify"
  },
  imageContainer:{
    flex:3,
    flexDirection:"row",
    margin: 15,
    marginTop: 0
  },
  imageStyle:{
    width: "100%",
    height: "100%",
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 15
  },
  buttonContainer:{
    flex:1,
    flexDirection:"row",
  },
  buttonTextStyle:{
    textAlign:"center",
    fontSize: 16,
    color: "white",
    fontWeight: "600"
  },
  buttonOne:{
    height: 60,
    width: 120,
    borderRadius:18,
    padding: 20,
    backgroundColor: "orange",
    marginLeft: 15
  },
  buttonTwo:{
    backgroundColor: "pink",
    height: 60,
    width: 120,
    borderRadius:18,
    padding: 20,
    marginLeft: 15
  },
  buttonThree:{
    backgroundColor: "lightgreen",
    height: 60,
    width: 120,
    borderRadius:18,
    padding: 20,
    marginLeft: 15
  },
  buttonFour:{
    backgroundColor: "purple",
    height: 60,
    width: 120,
    borderRadius:18,
    padding: 20,
    marginHorizontal: 15
  },
  containerFour:{
    flex:4,
    flexDirection:"row",
    padding:15
  },
  contentImageContainer: {
    flex:1,
  },
  contentImageStyle:{
    width: "100%",
    height: 100,
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 15
  },
  contentTextContainer: {
    flex:2,
    height: 100,
    alignItems:"flex-start",
    paddingHorizontal: 10,
  },
  contentDateStyle :{
    color: "lightgray",
    fontSize: 12
  }
});

이제 과제 해설을 들으면서 고친 후에 어떤 게 다른 지 비교해보도록 하겠당-!

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

export default function App() {
  console.disableYellowBox = true;
  return (
  <ScrollView style={styles.container}>
    <Text style={styles.title}>나만의 꿀팁</Text>
    <Image style={styles.mainImage} source={main}></Image>
    <ScrollView style={styles.middleContainer} horizontal={true}>
      <TouchableOpacity style={styles.middleButton01}><Text style={styles.middleButtonText}>생활</Text></TouchableOpacity>
      <TouchableOpacity style={styles.middleButton02}><Text style={styles.middleButtonText}>제테크</Text></TouchableOpacity>
      <TouchableOpacity style={styles.middleButton03}><Text style={styles.middleButtonText}>반려견</Text></TouchableOpacity>
      <TouchableOpacity style={styles.middleButton04}><Text style={styles.middleButtonText}>꿀팁 찜</Text></TouchableOpacity>
    </ScrollView>
    <View style={styles.cardContainer}>
      <View style={styles.card}>
        <Image style={styles.cardImage} source={{uri:"https://storage.googleapis.com/sparta-image.appspot.com/lecture/pizza.png"}}/>
        <View style={styles.cardText}>
          <Text style={styles.cardTitle}>먹다 남은 피자를 촉촉하게</Text>

          <Text style={styles.cardDesc} numberOfLines={3}>먹다 남은 피자는 수분이 날라가기 때문에 처음처럼 맛있게 먹을 수 없는데요. 이럴 경우 그릇에 물을 받아 전자레인지 안에서 1분 30초에서 2분 정도 함께 돌려주면 촉촉하게 먹을 수 있습니다. 물이 전자레인지 안에서 수증기를 일으키고, 피자에 촉촉함을 더해줍니다.</Text>

          <Text style={styles.cardDate}>2022.03.26</Text>
        </View>
      </View>
    </View>
  </ScrollView>
  )
}

const styles = StyleSheet.create({
  container:{
    backgroundColor:"#fff"
  },
  title:{
    fontSize: 20,
    fontWeight: "700",
    marginTop: 50,
    marginLeft: 20
  },
  mainImage:{
    width: "90%",
    height: 200,
    borderRadius: 10,
    marginTop:20,
    alignSelf: "center"
  },
  middleContainer:{
    marginTop:20,
    marginLeft: 10,
    height: 60
  },
  middleButton01:{
    width: 100,
    height: 50,
    padding: 15,
    backgroundColor:"orange",
    borderRadius: 15,
    margin:7
  },
  middleButton02:{
    width: 100,
    height: 50,
    padding: 15,
    backgroundColor:"yellowgreen",
    borderRadius: 15,
    margin:7
  },
  middleButton03:{
    width: 100,
    height: 50,
    padding: 15,
    backgroundColor:"skyblue",
    borderRadius: 15,
    margin:7
  },
  middleButton04:{
    width: 100,
    height: 50,
    padding: 15,
    backgroundColor:"pink",
    borderRadius: 15,
    margin:7
  },
  middleButtonText:{
    color: "#fff",
    fontWeight: "700",
    textAlign: "center"
  },
  cardContainer:{
    marginTop: 10,
    marginLeft: 10,
  },
  card:{
    flex:1,
    flexDirection:'row',
    margin: 10,
  },
  cardImage:{
    flex: 1,
    width:100, 
    height:100,
    borderRadius:10
  },
  cardText:{
    flex:2,
    flexDirection:"column",
    marginLeft: 10
  },
  cardTitle:{
    fontSize: 20,
    fontWeight: "700",
  },
  cardDesc:{
    fontSize: 15    
  },
  cardDate:{
    fontSize:10,
    color:"gray"
  }

})

내가 작성한 코드와 크게 다른 부분은, flex로 전체 화면을 사용한 게 아니라, ScrollView를 사용해서 전체가 이동 가능하도록 했다는 거다.

효율적으로 깔끔하게 코드를 짜고 싶은 욕심이 마구마구 생기는 과제였다.

보면서 '오 이렇게도 할 수 있구나'를 진짜 많이 느꼈다.
나도 쉽게 코드 짜고싶다ㅠ

이제 시작이니까, 점점 더 나아질 거 라고 믿는다!!