앱개발 기초 3일차
#스파르타코딩클럽, #내일배움단
학습일자: 2022/03/09
강의: 앱개발 종합반
진도: 2-4 ~ 3-4
아 정말 자신 없다 ㅋㅋㅋㅋ ㅠㅠㅠ
=====================
나만의꿀팁 페이지 작성하기
import React from 'react';
import main from './assets/main.png';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native';
리액트, 리액트네이티브에서 필요한거 꺼내오는게 기본.
html 기본이랑 똑같다. 생긴것도 비슷하고..
export default function App() {
return ()
}
const styles = StyleSheet.create({})
함수가 아무것도 없지만, 이게 딱 기본 골격이라고 한다.
=====================
text에 대하여
text 대신 Text가 올바른 태그
크기는 fontSize:20
굵기는 fontWeight:"700" << 따옴표 넣어야함
거리두기는 margin, marginTop, marginLeft 등등(카멜형식!)
가운데정렬은
image에 대하여
image 대신 Image가 올바른 태그
가로길이는 width: 300, "90%" << 퍼센트는 따옴표로 문자열 처리
세로길이는 height
가장자리 연마는 borderRadius: 20
가운데정렬은 alignItems: "center" 혹은,
justifyContent를 쓰지만, 얘네는 flex 안에서만 작동한다!!!!
그러므로!!!!!
가운데정렬은 alignSelf: "center"!!!
alignSelf: "flex-end"로 하면 어떻게 될까? 끝으로 간다.(우측정렬)
이미지 주소를 넣는다고 바로 화면에 나오진 않는다.
스타일에서 영역을 잡아줘야 화면에 나온다!
cardImage: {
flex: 1
},
cardText: {
flex: 2
}
// cardImage, cardText에 flex로 영역을 준 순간 피자 이미지가 나온다. 이렇게 영역을 줘야 이미지가 나타난다.
여기까지 하니까 드디어 화면에 나온다.
flex에 대하여
flex 1 = 화면 하나 전체
flex는 기본적으로 상하정렬이지만, 좌우로 바꿀 수도 있다.
flexDirection: "row" << 좌우로 변경
=====================
태그의 기본함수를 쓰려고 하는데 적용이 전혀 안된다
텍스트의 numberOflines={3}도 적용이 안되고,
스타일에서 color:"#fff"도 안먹는다 ㅠㅠ 슬랙에 질문 남겼으니 날 구해주실거야...
안되는 이유!
잘못된 코딩
<Text styles={styles.middleButtonText}>생활</Text>
옳은 코딩
<Text style={styles.middleButtonText}>생활</Text>
이런 멍청한.....멍청한!!!!
=====================
2-6 모듈과 반복문
모듈: 자바스크립트 파일 안에서 만든 함수나 파일을 외부에서 쓸 수 있게 하는 문법(export, import 같은거)
export default = 밖에서도 쓸 수 있게 하는 키워드다. vs code에서 app.js를 열어보면 앞부분에 있는게 이거임
=====================
list변수에 .map을 붙이면 반복문을 돌린다.
변수.map((value, i)=> {})라고 본거 같은 기억이 난다
<View style={styles.cardContainer}>
{/* 하나의 카드 영역을 나타내는 View */}
{
tip.map((content,i)=>{
return (<View style={styles.card} key={i}>
<Image style={styles.cardImage} source={{uri:content.image}}/>
<View style={styles.cardText}>
<Text style={styles.cardTitle} numberOfLines={1}>{content.title}</Text>
<Text style={styles.cardDesc} numberOfLines={3}>{content.desc}</Text>
<Text style={styles.cardDate}>{content.date}</Text>
</View>
</View>)
})
}
</View>
{}안에 뭔가가 들어가있다. 에이잭스랑 비슷한 느낌...
return을 보면, key={i}라고 되어있다.
반복문을 돌릴 때, 최상위에서 감싸고있는 태그에는 유니크한 키값이 부여되어야만 한다.
=====================
중괄호 {}표현식과 조건문(jsx)
jsx에서 자바스크립트를 쓰려면 중괄호 안에 넣으면 된다는 것
<Text style={styles.weather}>오늘의 날씨: {todayWeather + '°C ' + todayCondition} </Text>
styles라는 딕셔너리에 weather라는 값을 넣은거임
※ 삼항 연산자
java script
let result = 10 > 2 ? "참" : "거짓"
(기본 모습)
let result = 조건 ? 참일 때 : 거짓 일때
(예제)
let result = 10 == 9 ? true : false // result <-- false 값 할당
let result = 10 !== 9 ? true : false // result <-- true 값 할당
let reuslt = 99 > 10 ? true : false // result <-- true 값 할당
엑셀 if문과 똑같다.
(앞에 조건이 논리연산, 참일때 내보낼값, 거짓일때 내보낼값)
이 구조임
=====================
2-7 2주차 끝, 숙제 설명
내가 만들다 만 코드
import React from 'react'
import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native'
export default function AboutPage() {
return (
<View style={styles.container}>
<Text style={styles.hi}>HI! 스파르타코딩 앱개발 반에 오신것을 환영합니다</Text>
<View style={styles.container2}>
<Image style={styles.image} source={{ uri: 'https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2FaboutImage.png?alt=media&token=13e1c4f6-b802-4975-9773-e305fc7475c4' }} />
<Text style={styles.text2}>많은 내용을 간결하게 담아내려 노력했습니다!</Text>
<Text style={styles.text3}>꼭 완주하셔서 꼭 여러분것으로 만들어가시길 바랍니다.</Text>
<TouchableOpacity sytle={styles.to}><Text style={styles.text4}>여러분의 인스타계정</Text></TouchableOpacity>
</View>
<View style={styles.container3}></View>
</View>
)
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#050099',
flex: 1
},
container2: {
backgroundColor: 'white',
textAlign: 'center',
flex: 4,
borderRadius: 30,
borderColor: 'white',
marginLeft: 20,
marginRight: 20,
marginBottom: 70
},
hi: {
textAlign: 'center',
color: 'white',
fontSize: 33,
marginTop: 100,
flex: 1
},
container3: {
backgroundColor: 'white'
},
image: {
borderRadius: 50,
width: 300,
flex: 2,
alignSelf: 'center',
marginTop: 50
},
text2: {
fontSize: 20,
flex: 1,
textAlign: 'center',
fontWeight: "800"
},
text3: {
fontSize: 20,
flex: 1,
textAlign: 'center'
},
to: {
backgroundColor:"orange",
padding:21,
borderRadius:15,
flex: 1
},
text4: {
fontSize: 20,
textAlign: 'center'
}
})
정답코드
import React from 'react'
import {View,Text,StyleSheet,Image, TouchableOpacity} from 'react-native'
export default function AboutPage(){
const aboutImage = "https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2FaboutImage.png?alt=media&token=13e1c4f6-b802-4975-9773-e305fc7475c4"
return (
<View style={styles.container}>
<Text style={styles.title}>HI! 스파르타코딩 앱개발 반에 오신것을 환영합니다</Text>
<View style={styles.textContainer}>
<Image style={styles.aboutImage} source={{uri:aboutImage}} resizeMode={"cover"}/>
<Text style={styles.desc01}>많은 내용을 간결하게 담아내려 노력했습니다!</Text>
<Text style={styles.desc02}>꼭 완주 하셔서 꼭 여러분것으로 만들어가시길 바랍니다</Text>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>여러분의 인스타계정</Text>
</TouchableOpacity>
</View>
</View>)
}
const styles = StyleSheet.create({
container: {
flex:1,
backgroundColor:"#1F266A",
alignItems:"center"
},
title: {
fontSize:30,
fontWeight:"700",
color:"#fff",
paddingLeft:30,
paddingTop:100,
paddingRight:30
},
textContainer: {
width:300,
height:500,
backgroundColor:"#fff",
marginTop:50,
borderRadius:30,
justifyContent:"center",
alignItems:"center"
},
aboutImage:{
width:150,
height:150,
borderRadius:30
},
desc01: {
textAlign:"center",
fontSize:20,
fontWeight:"700",
paddingLeft:22,
paddingRight:22
},
desc02: {
textAlign:"center",
fontSize:15,
fontWeight:"700",
padding:22
},
button:{
backgroundColor:"orange",
padding:20,
borderRadius:15
},
buttonText: {
color:"#fff",
fontSize:15,
fontWeight:"700"
}
})
=====================
3-2. 디테일페이지
4분28초. 디테일페이지 만들어보기
import React from 'react'
import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native'
export default function DetailPage() {
console.disableYellowBox = true;
const tip = {
"idx": 9,
"category": "재테크",
"title": "렌탈 서비스 금액 비교해보기",
"image": "https://storage.googleapis.com/sparta-image.appspot.com/lecture/money1.png",
"desc": "요즘은 정수기, 공기 청정기, 자동차나 장난감 등 다양한 대여서비스가 활발합니다. 사는 것보다 경제적이라고 생각해 렌탈 서비스를 이용하는 분들이 늘어나고 있는데요. 다만, 이런 렌탈 서비스 이용이 하나둘 늘어나다 보면 그 금액은 겉잡을 수 없이 불어나게 됩니다. 특히, 렌탈 서비스는 빌려주는 물건의 관리비용까지 포함된 것이기에 생각만큼 저렴하지 않습니다. 직접 관리하며 사용할 수 있는 물건이 있는지 살펴보고, 렌탈 서비스 항목에서 제외해보세요. 렌탈 비용과 구매 비용, 관리 비용을 여러모로 비교해보고 고민해보는 것이 좋습니다. ",
"date": "2020.09.09"
}
return (
<View style={styles.container}>
<Image style={styles.detailImage} source={{uri:tip.image}} resizeMode={"cover"}/>
<Text style={styles.title}>{tip.title}</Text>
<Text style={styles.desc}>{tip.desc}</Text>
<TouchableOpacity style={styles.btn}><Text style={styles.btntxt}>팁 찜하기</Text></TouchableOpacity>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'black'
},
detailImage: {
width: 400,
height: 350,
marginTop: 30,
alignSelf: 'center',
borderRadius: 20
},
title: {
fontSize: 30,
fontWeight: '700',
color: 'white',
marginTop: 30,
textAlign: 'center'
},
desc: {
color: 'white',
margin: 20
},
btn: {
borderColor: 'red',
borderWidth: 1,
padding: 10,
width: 150,
alignSelf: 'center',
borderRadius: 20
},
btntxt: {
color: 'white',
textAlign: 'center',
fontSize: 20
}
})
오홍홍...좀 그럴싸해졌는걸?
정답코드를 보니까 컨테이너를 스크롤뷰로 잡네...현명한 판단 배우기
정답코드에서는 textContainer에서
alignItems: 'center',
justifyContent: 'center'
를 넣어줬는데, flex로 영역지정을 안한상태에서 이게 적용되는 이유는?
textContainer는 자식태그를 갖고있는 부모태그 = 영역이 있다.
그러므로 flex를 안쓰더라도 영역이 있다고 간주, 위 함수가 적용됨
flex를 쓰는 경우: 자식태그의 영역을 상대지정할 때, 부모영역도 flex를 걸어줌(?)
=====================
3-3. 리액트 기초지식
(컴포넌트, 상태, uesEffect)
컴포넌트에 프롭스가 데이터를 전달해주면 컴포넌트 안에 스테이트가 그 데이터를 관리한다. --> 무슨말이냐?
1) 컴포넌트(Component) : 정해진 엘리먼트들(요소)을 사용하여 만든 화면의 일부분
2) 상태(State) : 컴포넌트에서 데이터를 유지하고 관리하기 위한 유일한 방법 == 그냥 사용할 데이터!
3) 속성(Props) : 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식 == 그냥 데이터 전달!
4) useEffect : 화면에 컴포넌트가 그려지면 처음 실행해야 하는 함수들을 모아두는 곳
화면의 모든 부분이 컴포넌트라고 합니다...
(지금껏 만든 app.js, mainpage.js, aboutpage.js, detailpage.js 등등이 컴포넌트)
속성에 대해선.... 웹개발 배울때 function(response)에서 response에 원하는 데이터가 왜 들어오는지 이해하기를 포기했던 그런 느낌이 납니다.
상태란 무엇이냐~~
주식프로그램처럼, 서버에서 갱신된 데이터가 들어올때마다 실시간으로 화면이 바뀜
UI = component(state)
User Interface = 컴포넌트값(스테이트값)
const [state,setState] = useState([])
useState로 생성, setState로 수정/변경
state라는 변수, setState라는 함수를 얻음
useEffect : 리액트 기본 제공 함수
useEffect(()=>{
...화면이 그려진 다음 가장 먼저 실행되야 할 코드 작성 공간
},[])
화면이 그려진 다음 가장 먼저 실행할 코드를 넣어서 실행시킴
=====================
3-4. 로딩화면, 카테고리 기능, 상태 바
filter 함수
map함수와 비슷한 반복문이지만, 조건문이 들어감
return 뒤에 조건을 달아서 반복문을 돌림.
ex) return a == b
상태바 구현 기능
툴을 하나 깔아야 됨..
expo install expo-status-bar
=====================
아 몰라~