TIL_2020년 10월 16일 (금)

목차

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

1.오늘 한 일

1. 위코드 사전스터디

   • HTTP/HTTPS 관련 전체 내용 퀴즈
   • 각자 공부한 내용 서로 공유

2. SpataCodingClub App개발 종합반

   • 리액트로 만드는 페이지 (aboutPage)

import React from "react";
import mainImage from "../assets/aboutImage.png";
import { View, Text, Image, StyleSheet, TouchableOpacity } from "react-native";

export default function AboutPage() {
  return (
    <View style={styles.container}>
      <Text style={styles.mainTitle}>
        Hi! 스파르타코딩 앱개발반에 오신 것을 환영합니다{" "}
      </Text>
      <View style={styles.contentContainer}>
        <Image style={styles.Image} source={mainImage} />
        <Text style={styles.contentTitle}>
          많은 내용을 간결하게 담아내려 노력했습니다!
        </Text>
        <Text style={styles.contentDesc}>
          꼭 완주하셔서 꼭 여러분것으로 만들어가시길 바랍니다
        </Text>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.buttonText}>여러분의 인스타 계정</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "navy",
    alignItems: "center",
  },
  mainTitle: {
    fontSize: 29,
    fontWeight: "600",
    color: "#fff",
    alignSelf: "center",
    margin: 40,
    marginTop: 70,
  },
  contentContainer: {
    width: "90%",
    height: 500,
    backgroundColor: "#fff",
    margin: 15,
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 30,
  },
  Image: {
    // 컨텐츠의 넓이 값
    width: "50%",
    //컨텐츠의 높이 값
    height: 200,
    //컨텐츠의 모서리 구부리기
    borderRadius: 30,
    marginTop: 50,
    //컨텐츠 자체가 앱에서 어떤 곳에 위치시킬지 결정(정렬기능)
    //각 속성의 값들은 공식문서에 고대로~ 나와 있음
    alignSelf: "center",
  },
  contentTitle: {
    fontSize: 25,
    fontWeight: "600",
    textAlign: "center",
    marginLeft: 20,
    marginRight: 20,
  },
  contentDesc: {
    fontSize: 15,
    fontWeight: "600",
    textAlign: "center",
    marginLeft: 20,
    marginRight: 20,
    marginTop: 10,
  },
  button: {
    width: 200,
    height: 100,
    backgroundColor: "orange",
    borderRadius: 20,
    marginTop: 20,
    justifyContent: "center",
  },
  buttonText: {
    color: "#fff",
    fontSize: 20,
    fontWeight: "800",
    alignSelf: "center",
    flexDirection: "column",
  },
});

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

• 직접 쓰면서 하는게 재미있댜!

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