지난번 DetailPage.js 복붙후 에러가 발생해서 팀뷰로 원격으로 봐주시겠다고 했는데 회사 컴퓨터에 보안프로그램이 있어

집에있는 컴퓨터로 다시 작업 하다가 발생한 다른 에러입니다.

작성한 코드 및 에러 메세지

(에러메세지)

› Reloading apps

Android Bundling failed 14ms

Unable to resolve module ./pages/DetailPage from C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\App.js:

None of these files exist:

 * pages\DetailPage(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)

 * pages\DetailPage\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)

 2 | import MainPage from './pages/MainPage';

 3 | import AboutPage from './pages/AboutPage';

> 4 | import DetailPage from './pages/DetailPage';

  |             ^

 5 |

 6 | export default function App(){

 7 |  return (<MainPage/>)

(App.js code)

import React from 'react'

import MainPage from './pages/MainPage';

import AboutPage from './pages/AboutPage';

import DetailPage from './pages/DetailPage';

export default function App(){

  return (<MainPage/>)

  //return (<AboutPage/>)

  //return (<DetailPage/>)

}

(DetailPage.js code)

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'

    }

})