본문 바로가기
React

개발일지02. 스파르타코딩클럽 가성비 미쳤다리..

by 돈민찌 2021. 5. 26.
반응형

일하고 있던 레스토랑이 어려워지고, 자진퇴사를 하면서

제일 먼저 생각난 것은 코딩을 이 기회에 배워보자였는데

막상 코딩이란 것을 접하고, 여러가지 인터넷강의를 들으면서

음 그래 재미는 있는데 이걸 어디다 쓰지..?

하는 생각이 머리를 떠나지 않았다.

그것도 3월1일부터 지금까지..ㅎ

머신러닝으로 타이타닉의 승객들의 생존률을 구하고

당뇨병 환자들의 의료 데이터를 보고 당뇨를 진단하고

LOL 프로게이머들의 초반 10분간 스코어(킬 수, 드래곤, 헤럴드, 골드 등등)를 보고

누가 이길지 예측하고

붓꽃 데이터로 꽃받침과 꽃잎의 생김새를 관찰한 결과를 토대로 

붓꽃의 종(학명)을 분류 예측하고,

재미는 있는데... 이걸 어디다 활용할지 너무 난감했다.

그래서 상대적으로 활용성이 좋은 추천시스템도 나름 공부를 해보았으나..

넷플릭스에서 최근 시청한 영화와 그에 준 평점을 토대로 좋아할 만한 영화를 예측한다거나

하는게 너무너무너무 엄청나고 수많은 사람들의 피와 땀이 들어갔을텐데 당장 내가 쓸모가 없다.

그때 발견한 것이 스파르타코딩클럽 앱개발 강의!!

파이썬에 비해 별로 메리트를 못느껴서 간단하게만 배워뒀던 자바스크립트 문법이

이제서야 쓸모를 발휘한다...!

거기다 리액트를 가지고 화면을 구성하는 것은 html/css를 다룰때

쓰던 마진, 패딩 등 거의 똑같은 문법을 가지고 있는것이다

세상 뭐든 배워서 쓸모없는 것은 없는 것이었다..

얼른 완강하고 나만의 서비스를 만들어보겠어

일단 사료 큐레이팅 시스템을 만들어보고싶다!

당신의 고양이에게 최적의 사료는...?!?!?

 

아직도 코딩 안배웠어?

 

코드는 강의에서 숙제로 내준 간단한 초기페이지! (정답코드 아님 내가 해본거임)

import React from 'react';
import MainPage from './MainPage';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView } from 'react-native';

export default function AboutPAge() {
    return (
        <View style={styles.contatiner}>
            <View style={styles.outerContainer}>
                <Text
                    style={styles.mainTitle}
                    >
                    HI! 스파르타코딩 앱개발{'\n'}
                    반에 오신 것을 환영합니다.
                </Text>
            </View>
            <View style={styles.innerContainer}>
                <Image
                    style={styles.aboutImage}
                    source={{uri:"https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2FaboutImage.png?alt=media&token=13e1c4f6-b802-4975-9773-e305fc7475c4"}}
                    resizeMode={"cover"}
                    />
                <Text
                    style={styles.heading1}
                    numberOfLines={2}>
                    많은 내용을 간결하게 담아내려 노력했습니다!</Text>
                <Text
                    style={styles.heading2}
                    numberOfLines={2}>
                    꼭 완주하셔서 꼭 여러분의 것으로 만들어가시길 바랍니다.</Text>
                <TouchableOpacity
                    style={styles.instagramButton}
                    onPress={MainPage}>
                    <Text style={styles.instagramText}>
                        @minzzi._.andrew
                    </Text>
                </TouchableOpacity>
            </View>
        </View>
    )
  }

  const styles = StyleSheet.create({
    contatiner: {
        flex:1,
        backgroundColor:"#252c74"
    },
    mainTitle:{
        fontSize:29,
        fontWeight:"900",
        textAlign:"center",
        color:"#fff",
        fontFamily:"sans-serif"
    },
    outerContainer:{
        borderRadius:12,
        paddingVertical:60,
        width:360,
        alignSelf:"center"
    },
    innerContainer:{
        backgroundColor:"#fff",
        borderRadius:30,
        width:360,
        height:540,
        alignSelf:"center",
        paddingHorizontal:20,
        marginHorizontal:20,
        marginBottom:50
    },
    aboutImage:{
        alignSelf:"center",
        marginTop:90,
        width:120,
        height:120,
        borderRadius:30
    },
    heading1:{
        fontSize:22,
        fontWeight:"900",
        textAlign:"center",
        marginTop:15,
        marginHorizontal:20,
        fontFamily:"sans-serif"
    },
    heading2:{
        fontSize:16,
        fontWeight:"900",
        textAlign:"center",
        marginTop:20,
        marginHorizontal:20,
        fontFamily:"sans-serif"
    },
    instagramButton:{
        backgroundColor:"#efb342",
        padding:20,
        width:180,
        borderRadius:15,
        alignSelf:"center",
        marginTop:20,
        marginBottom:90
    },
    instagramText:{
        color:"#fff",
        textAlign:"center",
        fontSize:16,
        fontFamily:"sans-serif"
    }
  });
반응형

댓글