이번강의는 복습겸 DetailPage를 만드는것
//그냥 공부하면서 의식의 흐름대로 작성하려한다
앞에 만든 AboutPage를 토대로 만들어도 될거같다
기존 코드를 다 복사해서 집어넣고 app.js에 DetailPage를 리턴시켜준 후에 정상적으로 연결됬는지 확인해 본다.
우선 맨 위에 "Hi 스파르타코딩~" 이부분 텍스트를 지워주자
-----------------------------------------------
글씨 나왔던 위쪽부터 이미지가 들어가야한다
맨 위에 상태바 부분을 침범하지 않고 그 밑에부터 이미지를 넣으려면 몇가지 방법이 있을거 같다
하나는 이미지 자체에 탑마진을 주면 될거같고 또 하나는 SafeAreaView를 쓰면 될거같다
뭐 아마 여러가지 방법이 있겟지만 지금 내가 아는 한도내에선 그렇다.
---------------------------------------------------
이미지에서 탑 마진부분을 주석처리하고 이걸 < SafeAreaView style = { styles . container } >
SafeAreaView를 이리저리 넣어봤으나 변하는게 없다. 안드로이드에선 쓸모없는 기능인가.
...
그냥 탑 마진을 주면 간단히 해결될거 같지만 스마트폰 기기가 다 다르니까 모든 스마트폰에 적용할려면 단순히 마진을 주는것보단 다른 방법을 해보고싶다
음
구글링을 해보니 역시 답이 있었다
import Constants from 'expo-constants'
이걸 선언하고 해당 컨테이너에
paddingTop : Constants . statusBarHeight
이걸 넣으면 기기에따라서 상태바 만큼 패딩을 줄수 있다
--------------------------------------------------
앞에 만든 AboutPage는 < View style = { styles . textContainer } > 이걸넣고 그 안에 이미지를 넣었었는데 여기선 필요없으려나? 컨테이너로 아래 영역을 두개로 나눠서 flex를 줘서 조절해도 될거같고 그냥 넣어도 될거같고..
왠지 구태여 역영을 나눴을거 같지 않으니 그냥 순서대로 이미지- 텍스트-버튼 으로 만들어보자
-----------------------------------------
제공된 소스가
const tip = {
"idx" : 9 ,
"category" : "재테크" ,
"title" : "렌탈 서비스 금액 비교해보기" ,
"desc" : "요즘은 정수기, 공기 청정기, 자동차나 장난감 등 다양한 대여서비스가 활발합니다. 사는 것보다 경제적이라고 생각해 렌탈 서비스를 이용하는 분들이 늘어나고 있는데요. 다만, 이런 렌탈 서비스 이용이 하나둘 늘어나다 보면 그 금액은 겉잡을 수 없이 불어나게 됩니다. 특히, 렌탈 서비스는 빌려주는 물건의 관리비용까지 포함된 것이기에 생각만큼 저렴하지 않습니다. 직접 관리하며 사용할 수 있는 물건이 있는지 살펴보고, 렌탈 서비스 항목에서 제외해보세요. 렌탈 비용과 구매 비용, 관리 비용을 여러모로 비교해보고 고민해보는 것이 좋습니다. " ,
"date" : "2020.09.09"
}
이렇게 되어 있다. 앞에서 할땐 먼저 const aboutImage = "https:// 주소" 이런식으로 되어 있었는데 이렇게 제공 되어 있는거에서 image를 가져와야해서 uri주소가 이렇게 들어간다
< Image style = { styles . image } source = { { uri : tip . image } } resizeMode = { "cover" } />
-------------------------------------------------------------------
여기까지 는 성공. 이제 텍스트를 넣으면 된다
근데 제공된 소스에서 글을 넣는건 안해봤는데 이미지 넣는거랑 비슷하게 하면 되려나
< Text style = { styles . title } > source= { { uri : tip . title } } </ Text > -> 이러니까 에러가 뜬다. 음..
이제 알았다 텍스트를 가져올땐 굳이 source={} 이런걸 적을 필요가 없는거 같다
여담으로 위에 source={{uri:~ }}이부분 똑같은 괄호가 두개라서 하나 지워봤는데 바로 에러가 뜬다
< Text style = { styles . title } > { tip . title } </ Text >
---------------------------------------------------
같은 방법으로 본문과 버튼까지 만들었다
< Text style = { styles . title } > { tip . title } </ Text >
< Text style = { styles . desc } > { tip . desc } </ Text >
< TouchableOpacity style = { styles . button } >
< Text style = { styles . buttonText } > 팁 찜하기 </ Text >
</ TouchableOpacity >
-------------------------------
그런데 문제가 생겼다. 버튼 가장자리 색깔이 나와야 하는데
button : {
backgroundColor : "black" ,
padding : 20 ,
borderRadius : 15 ,
borderColor : "deeppink"
},
borderColor를 줬는데 왜 안나오지,,
------------------------------------------------------------
이부분은 그냥 정답에서 찾아보니 borderWidth : 1 이렇게 가장자리 폭을 정의한후에 색깔을 넣었어야 하는거였다.
완성
-----------------------------------------------
import React from 'react'
import { View , Text , StyleSheet , Image , TouchableOpacity } from 'react-native'
import Constants from 'expo-constants'
export default function DetailPage (){
const tip = {
"idx" : 9 ,
"category" : "재테크" ,
"title" : "렌탈 서비스 금액 비교해보기" ,
"desc" : "요즘은 정수기, 공기 청정기, 자동차나 장난감 등 다양한 대여서비스가 활발합니다. 사는 것보다 경제적이라고 생각해 렌탈 서비스를 이용하는 분들이 늘어나고 있는데요. 다만, 이런 렌탈 서비스 이용이 하나둘 늘어나다 보면 그 금액은 겉잡을 수 없이 불어나게 됩니다. 특히, 렌탈 서비스는 빌려주는 물건의 관리비용까지 포함된 것이기에 생각만큼 저렴하지 않습니다. 직접 관리하며 사용할 수 있는 물건이 있는지 살펴보고, 렌탈 서비스 항목에서 제외해보세요. 렌탈 비용과 구매 비용, 관리 비용을 여러모로 비교해보고 고민해보는 것이 좋습니다. " ,
"date" : "2020.09.09"
}
return (
< View style = { styles . container } >
< Image style = { styles . image } source = { { uri : tip . image } } />
< Text style = { styles . title } > { tip . title } </ Text >
< Text style = { styles . desc } > { tip . desc } </ Text >
< TouchableOpacity style = { styles . button } >
< Text style = { styles . buttonText } > 팁 찜하기 </ Text >
</ TouchableOpacity >
</ View > )
}
const styles = StyleSheet . create ({
container : {
flex : 1 ,
backgroundColor : "black" ,
alignItems : "center" ,
paddingTop : Constants . statusBarHeight
},
/*
textContainer: {
//width:300,
height:500,
backgroundColor:"#fff",
//marginTop:50,
borderRadius:30,
justifyContent:"center",
alignItems:"center"
},
*/
image : {
width : 400 ,
height : 450 ,
borderRadius : 30 ,
pading : 30
},
title : {
textAlign : "center" ,
fontSize : 20 ,
fontWeight : "700" ,
paddingTop : 22 ,
paddingLeft : 22 ,
paddingRight : 22 ,
color : "white"
},
desc : {
textAlign : "center" ,
fontSize : 15 ,
fontWeight : "700" ,
padding : 22 ,
color : "white"
},
button : {
backgroundColor : "black" ,
padding : 20 ,
borderRadius : 15 ,
borderColor : "deeppink" ,
borderWidth : 1
},
buttonText : {
color : "#fff" ,
fontSize : 15 ,
fontWeight : "700"
}
})
---------------------------------------------------
어차피 강의는 만들어준걸로 쓸거라서 코드는 저장용
------------------------------------------------------
개발일지를 너무 의식의 흐름처럼 쓰고있는거같다만,, 솔직히 쓰고나니까 장점이 있다.
나는 예전부터 공부할때 연습장에 암기하려고 외울걸 수기로 적어가면서 공부를 했었는데, 코딩은 뭐 어디 손으로 적을수도 없고 (불가능한건 아니지만) 즉석에서 암기할만큼 기억력이 좋지도 않다
근데 여기에 연습장대신으로 적어두니까 안하는것보단 도움이 되는거 같다
