* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

강의안 코드스니펫으로 다 붙여넣었는대 에러가 나고있어요

강의에서는 화면이 보이는대

에러나고있습니다

app.js

import React from 'react'

import MainPage from './pages/MainPage';

import AboutPage from './pages/AboutPage';

export default function App(){

  return (<MainPage/>)

  //return (<AboutPage/>)

  //return(<DetailPage/>)

}

MainPage.js

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",

  },

});

Detailpage.js

import React from 'react';

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

export default function DetailPage() {

    const tip = {

        "idx":9,

        "category":"재테크",

        "title":"렌탈 서비스 금액 비교해보기",

        "image": "https://storage.googleapis.com/sparta-image.appspot.com/lecture/money1.png",

        "desc":"요즘은 정수기, 공기 청정기, 자동차나 장난감 등 다양한 대여서비스가 활발합니다. 사는 것보다 경제적이라고 생각해 렌탈 서비스를 이용하는 분들이 늘어나고 있는데요. 다만, 이런 렌탈 서비스 이용이 하나둘 늘어나다 보면 그 금액은 겉잡을 수 없이 불어나게 됩니다. 특히, 렌탈 서비스는 빌려주는 물건의 관리비용까지 포함된 것이기에 생각만큼 저렴하지 않습니다. 직접 관리하며 사용할 수 있는 물건이 있는지 살펴보고, 렌탈 서비스 항목에서 제외해보세요. 렌탈 비용과 구매 비용, 관리 비용을 여러모로 비교해보고 고민해보는 것이 좋습니다. ",

        "date":"2020.09.09"

    }

    const popup = () => {

        Alert.alert("팝업!!")

    }

    return (

        // ScrollView에서의 flex 숫자는 의미가 없습니다. 정확히 보여지는 화면을 몇등분 하지 않고

        // 화면에 넣은 컨텐츠를 모두 보여주려 스크롤 기능이 존재하기 때문입니다.

        // 여기선 내부의 컨텐츠들 영역을 결정짓기 위해서 height 값과 margin,padding 값을 적절히 잘 이용해야 합니다.

        <ScrollView style={styles.container}>

            <Image style={styles.image} source={{uri:tip.image}}/>

            <View style={styles.textContainer}>

                <Text style={styles.title}>{tip.title}</Text>

                <Text style={styles.desc}>{tip.desc}</Text>

                <TouchableOpacity style={styles.button} onPress={()=>popup()}><Text style={styles.buttonText}>팁 찜하기</Text></TouchableOpacity>

            </View>

        </ScrollView>

    )

}

const styles = StyleSheet.create({

    container:{

        backgroundColor:"#000"

    },

    image:{

        height:400,

        margin:10,

        marginTop:40,

        borderRadius:20

    },

    textContainer:{

        padding:20,

        justifyContent:'center',

        alignItems:'center'

    },

    title: {

        fontSize:20,

        fontWeight:'700',

        color:"#eee"

    },

    desc:{

        marginTop:10,

        color:"#eee"

    },

    button:{

        width:100,

        marginTop:20,

        padding:10,

        borderWidth:1,

        borderColor:'deeppink',

        borderRadius:7

    },

    buttonText:{

        color:'#fff',

        textAlign:'center'

    }

})

Card.js

import React from "react"

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

//비구조 할당 방식으로 넘긴 속성 데이터를 꺼내 사용함

export default function Card({content}) {

    return (<View style={styles.card}>

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

}

const styles = StyleSheet.create({

  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",

  }

})