앱개발종합반 3주차(스파르타)

다시한번 언급해야겠다

웹개발보다 앱개발이 훨씬 더 어렵다.

 

웹개발할때는 다양한 요소들을 배우면서도 바로바로 가져다 쓰기만 해도 된다는 생각이 들어서 

부담없이 이것저것 손대다보면 되곤 했는데 

 

앱개발은 뭐랄까.... 오류가 나도 어디서 시작된건지 추적하는것도 어렵고.... 

사용하는 도구들도 훨 씬 더 종류도 많고 난이도가 높게 느껴진다. 

 

함수들도 그래도 웹개발은 어느정도 이해를 하면서 넘어가는 부분이 있었는데 

앱개발의 함수들은 여전히 익숙하지 않고 어렵기만 하다. 

아무래도 자주 다뤄보며 익숙해져야 할 것 같다. 

 

하지만 웹개발 하면서 여러 페이지를 연결하는 부분은 배우지 않았었는데 

앱의 기본 기능중에 여러 페이지를 연결하는 것이 있어서 

그런 부분을 할 수 있는 것은 너무 좋아보인다. 

 

시간이 필요하다.

 

 

 

App

 

import React from 'react';

//이제 모든 페이지 컴포넌트들이 끼워져있는 책갈피를 메인에 둘예정이므로

//컴포넌트를 더이상 불러오지 않아도 됩니다.

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

// import DetailPage from './pages/DetailPage';

import { StatusBar } from 'expo-status-bar';

//메인에 세팅할 네비게이션 도구들을 가져옵니다.

import {NavigationContainer} from '@react-navigation/native';

import StackNavigator from './navigation/StackNavigator'

export default function App() {

  console.disableYellowBox = true;

  return (

  <NavigationContainer>

    <StatusBar style="black" />

    <StackNavigator/>

 </NavigationContainer>);

}

 

 

MainPage

 

import React,{useState,useEffect} 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';

import Loading from '../components/Loading';

import { StatusBar } from 'expo-status-bar';

export default function MainPage({navigation,route}) {

  console.disableYellowBox = true;

  //useState 사용법

  //[state,setState] 에서 state는 이 컴포넌트에서 관리될 상태 데이터를 담고 있는 변수

  //setState는 state를 변경시킬때 사용해야하는 함수

  //모두 다 useState가 선물해줌

  //useState()안에 전달되는 값은 state 초기값

  const [state,setState] = useState([])

  const [cateState,setCateState] = useState([])

  //하단의 return 문이 실행되어 화면이 그려진다음 실행되는 useEffect 함수

  //내부에서 data.json으로 부터 가져온 데이터를 state 상태에 담고 있음

  const [ready,setReady] = useState(true)

  useEffect(()=>{

     

    //뒤의 1000 숫자는 1초를 뜻함

    //1초 뒤에 실행되는 코드들이 담겨 있는 함수

    setTimeout(()=>{

        //헤더의 타이틀 변경

        navigation.setOptions({

          title:'나만의 꿀팁'

      })  

        setState(data.tip)

        setCateState(data.tip)

        setReady(false)

    },1000)

 

   

  },[])

  const category = (cate) => {

    if(cate == "전체보기"){

        //전체보기면 원래 꿀팁 데이터를 담고 있는 상태값으로 다시 초기화

        setCateState(state)

    }else{

        setCateState(state.filter((d)=>{

            return d.category == cate

        }))

    }

}

  //data.json 데이터는 state에 담기므로 상태에서 꺼내옴

  // let tip = state.tip;

  let todayWeather = 10 + 17;

  let todayCondition = "흐림"

  //return 구문 밖에서는 슬래시 두개 방식으로 주석

  return ready ? <Loading/> :  (

    /*

      return 구문 안에서는 {슬래시 + * 방식으로 주석

    */

    <ScrollView style={styles.container}>

      <StatusBar style="black" />

      {/* <Text style={styles.title}>나만의 꿀팁</Text> */}

      <Text style={styles.weather}>오늘의 날씨: {todayWeather + '°C ' + todayCondition} </Text>

      <TouchableOpacity style={styles.aboutButton} onPress={()=>{navigation.navigate('AboutPage')}}><Text style={styles.middleButtonText}>소개 페이지</Text></TouchableOpacity>

      <Image style={styles.mainImage} source={{uri:main}}/>

      <ScrollView style={styles.middleContainer} horizontal indicatorStyle={"white"}>

      <TouchableOpacity style={styles.middleButtonAll} onPress={()=>{category('전체보기')}}><Text style={styles.middleButtonTextAll}>전체보기</Text></TouchableOpacity>

        <TouchableOpacity style={styles.middleButton01} onPress={()=>{category('생활')}}><Text style={styles.middleButtonText}>생활</Text></TouchableOpacity>

        <TouchableOpacity style={styles.middleButton02} onPress={()=>{category('재테크')}}><Text style={styles.middleButtonText}>재테크</Text></TouchableOpacity>

        <TouchableOpacity style={styles.middleButton03} onPress={()=>{category('반려견')}}><Text style={styles.middleButtonText}>반려견</Text></TouchableOpacity>

        <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: {

    //앱의 배경 색

    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

  },

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

    borderRadius:15,

    margin:7

  },

  middleButton03: {

    width:100,

    height:50,

    padding:15,

    backgroundColor:"#9adbc5",

    borderRadius: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:{

    backgroundColor:"pink",

    width:100,

    height:40,

    padding:5,

    borderRadius:15,

    alignSelf:"flex-end",

    marginTop:10,

    marginRight:20

  }

});

 

 

StackNavigator

 

import React from 'react';

//설치한 스택 네비게이션 라이브러리를 가져옵니다

import { createStackNavigator } from '@react-navigation/stack';

//페이지로 만든 컴포넌트들을 불러옵니다

import DetailPage from '../pages/DetailPage';

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

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

import LikePage from '../pages/LikePage';

//스택 네비게이션 라이브러리가 제공해주는 여러 기능이 담겨있는 객체를 사용합니다

//그래서 이렇게 항상 상단에 선언하고 시작하는게 규칙입니다!

const Stack = createStackNavigator();

const StackNavigator = () =>{

    return (

        //컴포넌트들을 페이지처럼 여기게끔 해주는 기능을 하는 네비게이터 태그를 선언합니다.

        //위에서 선언한 const Stack = createStackNavigator(); Stack 변수에 들어있는 태그를 꺼내 사용합니다.

        //Stack.Navigator 태그 내부엔 페이지(화면)를 스타일링 할 수 있는 다양한 옵션들이 담겨 있습니다.

        <Stack.Navigator

            screenOptions={{

                headerStyle: {

                    backgroundColor: "white",

                    borderBottomColor: "white",

                    shadowColor: "white",

                    height:100

                },

                //헤더의 텍스트를 왼쪾에 둘지 가운데에 둘지를 결정

                headerTitleAlign:'left',

                headerTintColor: "#000",

                headerBackTitleVisible: false

            }}

           

        >

            {/* 컴포넌트를 페이지로 만들어주는 엘리먼트에 끼워 넣습니다. 이 자체로 이제 페이지 기능을 합니다*/}

            <Stack.Screen name="MainPage" component={MainPage}/>

            <Stack.Screen name="DetailPage" component={DetailPage}/>

            <Stack.Screen name="AboutPage" component={AboutPage}/>

            <Stack.Screen name="LikePage" component={LikePage}/>

        </Stack.Navigator>

    )

}

export default StackNavigator;