TIL_2020년 10월 15일 (목)

목차

• 1.오늘 한 일
• 2.오늘 배운 것과 깨달은 것
• 3.오늘 진행한 작업물 (사진)

1.오늘 한 일

1. SpataCodingClub App개발 종합반
   • 리액트로 만드는 페이지

   
    import React from "react";
    import {
      StyleSheet,
      Text,
      View,
      Image,
      ScrollView,
      TouchableOpacity,
      Alert,
    } from "react-native";
    import { Colors } from "react-native/Libraries/NewAppScreen";
       
    export default function App() {
      const customAlert = (value) => {
        Alert.alert(`${value}를 클릭하셨습니다.`);
      };
      return (
        <View style={styles.container}>
          <View style={styles.titleContainer}>
            <Text style={styles.title}>나만의 꿀팁</Text>
          </View>
          <View style={styles.bodyContainer}>
            <View style={styles.jumbotronContainer}>
              <Image
                source=
                // 사용설명서에 나와 있는 resizeMode 속성 값을 그대로 넣어 적용합니다
                resizeMode={"cover"}
                style={styles.mainImage}
              />
            </View>
       
            <ScrollView
              style={styles.CategoryContainer}
              horizontal={true}
              // showsHorizontalScrollIndicator={false}
              // pagingEnabled={true}
            >
              <TouchableOpacity style={styles.category1} onPress={customAlert}>
                <Text style={styles.categoryName}>생활</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.category2} onPress={customAlert}>
                <Text style={styles.categoryName}>재테크</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.category3} onPress={customAlert}>
                <Text style={styles.categoryName}>반려견</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.category4} onPress={customAlert}>
                <Text style={styles.categoryName}>꿀팁 찜</Text>
              </TouchableOpacity>
            </ScrollView>
       
            <View style={styles.pictureDescriptionContainer}>
              <View style={styles.contentsContainer}>
                <View style={styles.picture}>
                  <Image
                    source=
                    // 사용설명서에 나와 있는 resizeMode 속성 값을 그대로 넣어 적용합니다
                    resizeMode={"cover"}
                    style={styles.picture}
                  />
                </View>
                <View style={styles.description}>
                  <Text style={styles.tipTitle}>먹다 남은 피자를 촉촉하게!</Text>
                  <Text style={styles.tipDescription} ellipsizeMode="tail">
                    먹다 남은 피자는 수분이 날라가기 때문에 처음처럼 맛있게 먹을 수
                    없는데요. 이럴 경우 그릇에 물을 받아 전자레인지 안에서 1분
                    30초에서 2분 정도 함께 돌려주면 촉촉하게 먹을 수 있습니다. 물이
                    전자레인지 안에서 수증기를 일으키고, 피자에 촉촉함을 더해줍니다.
                  </Text>
                  <Text style={styles.tipDate}>2020.09.09</Text>
                </View>
              </View>
            </View>
          </View>
        </View>
      );
    }
       
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        margin: 15,
      },
      titleContainer: {
        flex: 1,
        flexDirection: "column",
        justifyContent: "center",
      },
      title: {
        fontWeight: "bold",
        fontSize: 25,
        justifyContent: "center",
        alignContent: "center",
      },
      bodyContainer: {
        flex: 7,
      },
      jumbotronContainer: {
        flex: 2,
      },
      mainImage: {
        width: "100%",
        height: "100%",
        alignItems: "center",
        justifyContent: "center",
        borderRadius: 20,
      },
      CategoryContainer: {
        flex: 1.5,
      },
      category1: {
        width: 100,
        height: 60,
        // borderColor: "#000",
        borderWidth: 1,
        margin: 20,
        borderRadius: 20,
        backgroundColor: "red",
        alignItems: "center",
        justifyContent: "center",
      },
      category2: {
        width: 100,
        height: 60,
        // borderColor: "#000",
        borderWidth: 1,
        margin: 20,
        borderRadius: 20,
        backgroundColor: "blue",
        alignItems: "center",
        justifyContent: "center",
      },
      category3: {
        width: 100,
        height: 60,
        // borderColor: "#000",
        borderWidth: 1,
        margin: 20,
        borderRadius: 20,
        backgroundColor: "grey",
        alignItems: "center",
        justifyContent: "center",
      },
      category4: {
        width: 100,
        height: 60,
        // borderColor: "#000",
        borderWidth: 1,
        margin: 20,
        borderRadius: 20,
        backgroundColor: "navy",
        alignItems: "center",
        justifyContent: "center",
      },
      categoryName: {
        fontSize: 20,
        fontWeight: "bold",
        color: "white",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
      },
      pictureDescriptionContainer: {
        flex: 2.5,
      },
      contentsContainer: {
        flex: 2.5,
        flexDirection: "row",
        height: 10,
      },
      picture: {
        flex: 1,
        width: "100%",
        height: "100%",
      },
      description: {
        flex: 3,
      },
      tipTitle: {
        fontSize: 22,
        fontWeight: "bold",
      },
      tipDescription: {
        fontSize: 16,
        marginTop: 5,
      },
      tipDate: {
        fontSize: 14,
        color: "grey",
        marginTop: 5,
      },
    });
   
   
   

2.오늘 배운 것과 깨달은 것

• 모처럼 들었던 리액트 강의 결국은 아는 것보다 하는 것이 중요하다

3.지금까지 작업물 (사진)