2-6강 완성 코드 보면서 return() 부분만 따라서 작성했는데 오류가 뜨네요...

작성한 코드 및 에러 메세지

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


const main = 'https://storage.googleapis.com/sparta-image.appspot.com/lecture/main.png'
const card = 'https://storage.googleapis.com/sparta-image.appspot.com/lecture/pizza.png'


export default function App() {
  let tip = data.tip;
  let todayWeather = 10 + 17;
  let todayCondition = "흐림"


  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}>
         {
           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>)
        })
        }     
       </View>
    </ScrollView>
  )
}


const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 30,
    fontWeight: '700',
    marginTop: 50,  
    marginLeft: 20,
  },
  mainImage: {
    width: '90%',
    height: 250,
    borderRadius: 10,
    marginTop: 20,
    alignSelf: "center",  
  },
  middleContainer: {
    height: 60,
    marginTop: 15,
    marginLeft: 15,
  },
  middleButton01: {
    width: 100,
    height: 50,
    padding: 15,
    margin: 6,
    borderRadius: 15,
    backgroundColor: "#FFD36E",
  },
  middleButton02: {
    width: 100,
    height: 50,
    padding: 15,
    margin: 6,
    borderRadius: 15,
    backgroundColor: "#BCCEF8",
  },
  middleButton03: {
    width: 100,
    height: 50,
    padding: 15,
    margin: 6,
    borderRadius: 15,
    backgroundColor: "#9adbc5",
  },
  middleButton04: {
    width: 100,
    height: 50,
    padding: 15,
    margin: 6,
    borderRadius: 15,
    backgroundColor: "#FFC4C4",
  },
  middleButtonText: {
    color: '#fff',
    fontSize: 20,
    textAlign: "center",
  },
  cardContainer: {
    marginTop: 10,
    marginLeft: 15,
  },
  card: {
    flex: 1,
    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: 22,
    foenWeight: '900',
  },
  cardDesc: {
    fontSize: 15,
  },
  cardDate: {
    fontSize: 15,
    color: "#A6A6A6",
  },
})

Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.

Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!