* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
4-3 날씨 서버 가져오기 코드스니펫을 넣으니 오류가 떠요
SyntaxError: C:\Users\billr\OneDrive\바탕 화면\good\good-writing\pages\M
ainPage.js: Missing semicolon. (1:227)
> 1 | import React,{useState,useEffect} from 'react'; import { StyleShee
t, 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'; import Loading from '../components/Loading'; import {
StatusBar } from 'expo-status-bar'; import * as Location from "expo-loca
tion"; export default function MainPage({navigation,route}) { //useSta
te 사용법 //[state,setState] 에서 state는 이 컴포넌트에서 관리될
상태 데이터를 담고 있는 변수 //setState는 state를 변경시킬때 사용해야
하는 함수 //모두 다 useState가 선물해줌 //useState()안에 전달되는
값은 state 초기값 const [state,setState] = useState([]) const [cateS
tate,setCateState] = useState([]) //하단의 return 문이 실행되어 화
면이 그려진다음 실행되는 useEffect 함수 //내부에서 data.json으로 부터
가져온 데이터를 state 상태에 담고 있음 const [ready,setReady] = useSta
te(true) useEffect(()=>{ navigation.setOptions({ title:'나
만의 꿀팁' }) //뒤의 1000 숫자는 1초를 뜻함 //1초
뒤에 실행되는 코드들이 담겨 있는 함수 setTimeout(()=>{ //헤
더의 타이틀 변경 getLocation() setState(data.tip)
setCateState(data.tip) setReady(false) },1000) },
[]) const getLocation = async () => { //수많은 로직중에 에러가 발
생하면 //해당 에러를 포착하여 로직을 멈추고,에러를 해결하기 위한 cat
ch 영역 로직이 실행 try { //자바스크립트 함수의 실행순서를 고
정하기 위해 쓰는 async,await await Location.requestForegroundPermi
ssionsAsync(); const locationData= await Location.getCurrentPositi
onAsync(); console.log(locationData) } catch (error) {
//혹시나 위치를 못가져올 경우를 대비해서, 안내를 준비합니다 Alert.
alert("위치를 찾을 수가 없습니다.", "앱을 껏다 켜볼까요?"); } }
const category = (cate) => { if(cate == "전체보기"){ //전체
보기면 원래 꿀팁 데이터를 담고 있는 상태값으로 다시 초기화 setCa
teState(state) }else{ setCateState(state.filter((d)=>{
return d.category == cate })) } } //data.json 데이
터는 state에 담기므로 상태에서 꺼내옴 // let tip = state.tip; let to
dayWeather = 10 + 17; let todayCondition = "흐림" //return 구문 밖에
서는 슬래시 두개 방식으로 주석 return ready ? <Loading/> : ( /*
return 구문 안에서는 {슬래시 + * 방식으로 주석 */ <ScrollV
iew style={styles.container}> <StatusBar style="light" /> {/
* <Text style={styles.title}>나만의 꿀팁</Text> */}
<Text style={styles.weather}>오늘의 날씨: {todayWeather + '°C ' + today
Condition} </Text> <TouchableOpacity style={styles.aboutButton} o
nPress={()=>{navigation.navigate('AboutPage')}}> <Text style={
styles.aboutButtonText}>소개 페이지</Text> </TouchableOpacity>
<Image style={styles.mainImage} source={{uri:main}}/> <Scroll
View style={styles.middleContainer} horizontal indicatorStyle={"white"}>
<TouchableOpacity style={styles.middleButtonAll} onPress={()=>{ca
tegory('전체보기')}}><Text style={styles.middleButtonTextAll}>전체보기</
Text></TouchableOpacity> <TouchableOpacity style={styles.middleB
utton01} onPress={()=>{category('생활')}}><Text style={styles.middleButt
onText}>생활</Text></TouchableOpacity> <TouchableOpacity style={
styles.middleButton02} onPress={()=>{category('재테크')}}><Text style={s
tyles.middleButtonText}>재테크</Text></TouchableOpacity> <Toucha
bleOpacity style={styles.middleButton03} onPress={()=>{category('반려견'
)}}><Text style={styles.middleButtonText}>반려견</Text></TouchableOpacit
y> <TouchableOpacity style={styles.middleButton04} onPress={()=>
{navigation.navigate('LikePage')}}><Text style={styles.middleButtonText}
>꿀팁 찜</Text></TouchableOpacity> </ScrollView> <View style
={styles.cardContainer}> {/* 하나의 카드 영역을 나타내는 View *
/} { cateState.map((content,i)=>{ return
(<Card content={content} key={i} navigation={navigation}/>) })
} </View> </ScrollView>) } const styles
= StyleSheet.create({ container: { //앱의 배경 색 backgroundC
olor: '#fff', }, title: { //폰트 사이즈 fontSize: 20, //
폰트 두께 fontWeight: '700', //위 공간으로 부터 이격 marginT
op:50, //왼쪽 공간으로 부터 이격 marginLeft:20 }, weather:{
alignSelf:"flex-end", paddingRight:20 }, mainImage: { //컨
텐츠의 넓이 값 width:'90%', //컨텐츠의 높이 값 height:200,
//컨텐츠의 모서리 구부리기 borderRadius:10, marginTop:20,
//컨텐츠 자체가 앱에서 어떤 곳에 위치시킬지 결정(정렬기능) //각 속
성의 값들은 공식문서에 고대로~ 나와 있음 alignSelf:"center" }, m
iddleContainer:{ marginTop:20, marginLeft:10, height:60 },
middleButtonAll: { width:100, height:50, padding:15,
backgroundColor:"#20b2aa", borderColor:"deeppink", borderRadius:
15, margin:7 }, middleButton01: { width:100, height:50,
padding:15, backgroundColor:"#fdc453", borderColor:"deeppink
", borderRadius:15, margin:7 }, middleButton02: { width:
100, height:50, padding:15, backgroundColor:"#fe8d6f", b
orderRadius:15, margin:7 }, middleButton03: { width:100,
height:50, padding:15, backgroundColor:"#9adbc5", borderRad
ius:15, margin:7 }, middleButton04: { width:100, height:
50, padding:15, backgroundColor:"#f886a8", borderRadius:15,
margin:7 }, middleButtonText: { color:"#fff", fontWeight
:"700", //텍스트의 현재 위치에서의 정렬 textAlign:"center" },
middleButtonTextAll: { color:"#fff", fontWeight:"700", //
텍스트의 현재 위치에서의 정렬 textAlign:"center" }, cardContainer: {
marginTop:10, marginLeft:10 }, aboutButton: { backgroundColo
r:"pink", width:100, height:40, borderRadius:10, alignSelf:"f
lex-end", marginRight:20, marginTop:10 }, aboutButtonText: {
color:"#fff", textAlign:"center", marginTop:10 } });
|
^
