앱 개발 공부 6일차

지난 시간에는 앱의 가장 기본이 되는 페이지라 할 수 있는 App.js파일을 만들었고, 오늘은 MainPage.js파일을 만드는 것을 배웠다.

 

우선 VS화면 좌측 프로젝트 파일들이 있는 곳에 <pages>라는 폴더를 만들고, MainPage.js파일을 새롭게 만들어준다.

 

 

지난 시간에 작성한 App.js 파일 코드를 모두 복사한 후, MainPage에 에 붙여넣기 한 후 함수이름을 MainPage로 바꿔주면 MainPage 틀이 완성된다. 

 

MainPage.js의 두 코드 줄은 폴더가 바뀌었으므로 다음과 같이 변경해야 한다. 

 

import main from './assets/main.png';
import data from './data.json';

에서

import main from '../assets/main.png';
import data from '../data.json';

 

이제 App.js파일의 코드를 바꾸어주어야 한다. 

import React from 'react'
import MainPage from './pages/MainPage';

export default function App(){
  return (<MainPage/>)
}

 

이하는 현재까지의 MainPage코드 부분이다.

 

 

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

const main = 'https://storage.googleapis.com/sparta-image.appspot.com/lecture/main.png'
import data from '../data.json';
import Card from '../components/Card';
export default function MainPage() {
  let tip = data.tip;
  let todayWeather = 10 + 17;
  let todayCondition = "흐림"
  //return 구문 밖에서는 슬래시 두개 방식으로 주석
  return (
    /*
      return 구문 안에서는 {슬래시 + * 방식으로 주석
    */
    <ScrollView style={styles.container}>
      <Text style={styles.title}>나만의 꿀팁</Text>
      <Text style={styles.weather}>오늘의 날씨: {todayWeather + '°C ' + todayCondition} </Text>
      <Image style={styles.mainImage} source={{uri:main}}/>
      <ScrollView style={styles.middleContainer} horizontal indicatorStyle={"white"}>
        <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 */}
        { 
          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>)
            return (<Card content={content} key={i}/>)
          })
         }
        
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    //앱의 배경 색
    backgroundColor: '#fff',
  },
  title: {
    //폰트 사이즈
    fontSize: 20,
    //폰트 두께
    fontWeight: '700',
    //위 공간으로 부터 이격
    marginTop:50,
    //왼쪽 공간으로 부터 이격
    marginLeft:20
  },
  weather:{
    alignSelf:"flex-end",
    paddingRight: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:"#fdc453",
    borderColor:"deeppink",
    borderRadius:15,
    margin:7
  },
  middleButton02: {
    width:100,
    height:50,
    padding:15,
    backgroundColor:"#fe8d6f",
    borderRadius:15,
    margin:7
  },
  middleButton03: {
    width:100,
    height:50,
    padding:15,
    backgroundColor:"#9adbc5",
    borderRadius:15,
    margin:7
  },
  middleButtonText: {
    color:"#fff",
    fontWeight:"700",
    //텍스트의 현재 위치에서의 정렬 
    textAlign:"center"
  },
  middleButton04: {
    width:100,
    height:50,
    padding:15,
    backgroundColor:"#f886a8",
    borderRadius:15,
    margin:7
  },
  cardContainer: {
    marginTop:10,
    marginLeft:10
  },
  card:{
    flex:1,
    //컨텐츠들을 가로로 나열
    //세로로 나열은 column <- 디폴트 값임 
    flexDirection:"row",
    margin:10,
    borderBottomWidth:0.5,
    borderBottomColor:"#eee",
    paddingBottom: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:"#A6A6A6",
  },
});

 

눈으로 보고 이해는 되지만 직접 코딩을 할 수 있을진 모르겠다. 갑자기 강의 속도가 확 빨라진 느낌이다. 점점 학습해야 할 분량이 많아지고 있다. 일단 눈으로 보고 이해만 하고, 연습은 나중에 해봐야겠다. 어제 Expo에서 개발화면을 여는 것이 잘 안 되었는데, 핸폰 화면의 기존 열었던 프로젝트를 지우고 나서 나시 'Expo start' 를 하고 들어오니 제대로 열린다. 이가 없으면 잇몸으로, 좌충우돌하면서 진도를 따라가고 있다.