앱개발 종합반 3주차

2022. 2. 27. 06:15

PaaS-TA 강의에

전자정부프레임워크 강의에

회사 홈페이지 개편이 겹치니

시간이 없다.

 

여기서부턴 실습을 온전히 하기 힘드니,

나중에 추가로 보게될 것이다.

 

react navigation 라이브러리가 추가되었다.

'' 카테고리의 다른 글

앱개발 종합반 5주차  (0) 2022.02.27
앱개발 종합반 4주차  (0) 2022.02.27
앱개발 종합반 2주차  (0) 2022.02.12
앱개발 종합반 1주차  (0) 2022.02.03
앱개발 종합반 0주차  (0) 2022.01.24
Posted by 캬웃
,

앱개발 종합반 2주차

2022. 2. 12. 22:00

기쁘다

숙제를 완성해서.

 

기쁘긴 기쁜데,

그 전엔 '돌겠다'였다.

 

강의 진행 시간이 더뎌서.

 

좀 더 빨리 실력이 늘었으면.

 

 

[[[react native 파츠_220212_v0.05]]]

[예]
instagram도 리액트 네이티브로 만들어졌다.

앱 개발 빨리하고,
강의 듣고 더 레벨업 하려면 어떻게?
항상, 공식문서 보고, 강의 다시 보는 거도 좋지만,
텍스트로서 공부하는 게 아니라 직접 만드는 연습을 부단히 하시는 게 가장 빠른 길이다. 

[검색 예]
react native expo text 말줄임 //레퍼런스가 쭉 나옴

text 줄 3줄까지만 나타나게 하고 싶을 때
공식문서에서 text 검색 후
number 검색하면 우측에 Props(속성) 하단에 numberofLines 나옴.
근데 이 경우는 number를 아니까 검색했지 뭘로 검색할지 모를 땐
그냥 인터넷창에 검색하면 됨.
그냥, 정말, 단순하게,
react native text 말줄임 -> 치면 레퍼런스가 쭈~욱 나옴.

처음부터 공식문서를 보는 걸 가장 추천 드림.
왜냐하면 공식문서를 찾아보다보면,
원래 내가 찾으려는 속성이 아닌 것들도 눈에 밟히기 때문에 알게 되는 게 더 많음.
근데 빨리 원하는 것만 찾으려면, 이렇게 구글링 바로 하셔도 돼요.

앱 화면을 그린다는 것은
가장 기본적인 것만 알고
나머진 하면서 찾으면(구글링, 공식문서 등) 유려하고 화려하게, 디테일하게 잘하게 됨.

처음부터 많은 걸 배우고, 구현해야지 하는 게 아니라
쪼끄만한 것에서부터 막 부딪혀보기 시작하셔야 돼요.
이렇게 스트레스 받는 건 맞는 것.


[만드는 과정]
1) 어떤 태그가 필요할지 생각한 후!
2) 해당 태그에 어떤 속성 기능이 존재하는 지 공식문서를 찾아본 후!         //필요한 속성이 어디있는지 공식문서에서 찾아서 적용    // 1,2 이렇게 습관 들이기
3) 디자인을 고려하며 옷을 입히기!

[기본 골격]
import React from 'react';
import main from './assets/main.png';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native';

export default function App() {
  return (

JSX 문법(태그형식)
중간중간 {js문법이나 변수} // 그 안에 또 JSX, 그 안에 또 {}가 나올 수도 있음.


    <ScrollView style={styles.container}>
      <Text style={styles.title}>나만의 꿀팁</Text>
      <Text style={styles.weather}>오늘의 날씨: {todayWeather + '°C ' + todayCondition} </Text>
      <Image style={styles.mainImage} source={{uri:main}}/>
      <ScrollView style={styles.middleContainer} horizontal indicatorStyle={"white"}>
        <TouchableOpacity style={styles.middleButton01}><Text style={styles.middleButtonText}>생활</Text></TouchableOpacity>
        <TouchableOpacity style={styles.middleButton02}><Text style={styles.middleButtonText}>재테크</Text></TouchableOpacity>
        <TouchableOpacity style={styles.middleButton03}><Text style={styles.middleButtonText}>반려견</Text></TouchableOpacity>
        <TouchableOpacity style={styles.middleButton04}><Text style={styles.middleButtonText}>꿀팁 찜</Text></TouchableOpacity>
  )

}

const styles = StyleSheet.create({
  container: {
    //앱의 배경 색
    backgroundColor: '#fff',
  },
  title: {
    //폰트 사이즈
    fontSize: 20,
    //폰트 두께
    fontWeight: '700',
    //위 공간으로 부터 이격
    marginTop:50,
    //왼쪽 공간으로 부터 이격
    marginLeft:20
  }


})


[import]
import { SafeAreaView } from 'react-native'; //모든 기계에 화면을 안전하게 맞춘다.
Button //스타일을 주는데 어려움(장농에 레고성을 넣으려면 장농에 맞게 고쳐야한다) 원하는 곳에 배치하기 어려움.
TouchableOpacity //button과 똑같음. button보다 더 편하게 버튼 구현(장에 넣을 레고를 처음부터 만들기 때문에, 스타일에 대한 자유도가 높음)
//button과 똑같지만, 옷을 입히기 더 수월하다. 그래서 TouchableOpacity만 사용하면 됨.
//원하는 곳에 배치하기 더 쉬움?

[문법.규칙]
# 함수 쓰는 법 2가지
onPress={customAlert}
onPress={() => {customAlert()}}

# 텍스트를 감싸는 부모 태그는 반드시 View 태그
텍스트 태그는 직접 텍스트를 담을 때,
전체적인 레이아웃을 결정하는 것은 무조건 View 태그

# JSX 문법에서 태그 사이에 자바스크립트 문법이나 변수를 넣고 싶으면
{} 중괄호를 이용하면 됨.

#
jsx 문법에서 여러가지 반복적인 태그를 돌려서 화면에 나타내는 경우에
그 반복적으로 나타내는 태그는 고유한 키 값을 부여해줘야 돼요
그러니까, 반복적으로 나타나는 태그마다
'아 이거 고유한 태그야'라고 알려줘야지 오류가 안남
이럴 때, key라는 속성에다가 i를 넣으면 그 문제가 해결됨( key={i} ) 
(i:순서를 나타내는 값. 인덱싱.)

#
프로젝트 안에 있는 리스트, 그러니까 json파일 같은 것을 가지고 오려면
모듈시스템을 통해서 외부에 있는 파일을 그대로 상대주소를 통해서 우리가 가지고 와서 사용할 수도 있다.
모듈시스템:export default / import from

#
z-index가 없지만 RN은 무조건 뒤에 있는 컴포넌트을 맨 위로 올려둡니다.

#
jsx문법에서
return 해서 바깥에 내보내는 것은 항상 소괄호





- 태그-속성 -

#button말고 TouchableOpacity 사용

#Image : 가로/세로 크기 지정해야 나타남
두가지 있음. asset안에 것 혹은 밖의 것 불러오는 것
asset:
<Image
source={favicon}
resizeMode={"repeat"} //repeat, cover..
style={styles.imageStyle}
/>
imageStyle: {
width:"100%", //넓이
height:"100%", //높이     '100%' / 200
alignItems:"center",
justifyContent:"center"
}

외부:
<Image 
        source={{uri:'https://images.unsplash.com/photo-1424819827928-55f0c8497861?fit=crop&w=600&h=600%27'}}
        resizeMode={"cover"}
        style={styles.imageStyle}
/>
imageStyle: {
width:"100%",
height:"100%",
alignItems:"center",
justifyContent:"center",
borderRadius:10
}

repeat : 반복
cover : 





#Text
style={styles.textNote} numberOfLines={3} ellipsizeMode='head'

#ScrollView
horizontal //횡스크롤. 기본은 true이니 왼쪽과 같이 써도 됨. horizontal={true}

#상위 고정
http://daplus.net/react-native-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-%EA%B3%A0%EC%A0%95-%EB%B0%94%EB%8B%A5-%EA%B8%80-%EB%B0%98%EC%9D%91/

#https://g6ling.gitbooks.io/react-native-tutorial-korean/content/4_1ko.html
<View style={{position: 'absolute', backgroundColor: '#FFFFFF', right: 30, bottom: 30, height: 30, width: 30}}></View>
//상위 View로부터의 상대적인 위치

#배경에 이미지 주기
이미지 태그를 가장 상위 티어 바로 아래에 놓고,
스타일 포지션으로 absolute로 준다.
*<ImageBackground>태그도 있음.

 

 

===========================================================================

[[[react native-CSS 파츠_220212_v0.02]]]

[위치]


[시작 시]




-스타일 공식 문서
https://reactnative.dev/docs/style#docsNav
https://reactnative.dev/docs/layout-props




[color]
#eee : 회색



[문법]
#stylesheet은 옷장이라고 보면 됨. stylesheet.create 안에 Dictionary가 거대하게 존재함. 거기 안에 옷들이 존재.
  container라는 옷이 있고, imageStyle이라는 옷이 있어서, 이 옷을 태그에 입혀주는 것
  stylesheet.create({
  container: {
  },
  imageStyle: {
  }
  })


#폰트 font
fontSize:20
fontWeight:["normal","bold","100","200","300","400","500","600","700","800","900"] // 글자의 두께를 결정
textAlign:"center" //가로기준으로 글자의 위치를 결정
color:"red"


#flex
유연하게, 화면의 영역을 결정짓게 하는 기술
★앱 화면 구성 시, 가장 중요. 영역의 레이아웃을 결정. view만으로 부족한 걸 채워줌.
자주 쓰고, 모든 개발자가 씀.
flex는 상대적인 개념. 합의 개념(같은 레벨의 flex 숫자를 모두 합한 걸 분모로 하고, 자신의 flex 숫자를 분자로 함)

# flexDirection
화면의 영역을 나누는 방향
내부에 있는 자식들 컨텐츠의 정렬을 의미
flexDirection:"row" //왼쪽에서 오른쪽으로 정렬
flexDirection:"column" //위에서 아래로 정렬 (default)

# justifyContent
영역 안에 있는 콘텐츠의 위치를 정함.
justifyContent:"flex-start" //영역의 앞쪽에 붙이는 것
justifyContent:"flex-end" //영역의 끝쪽에 붙이는 것
justifyContent:"center" //가운데

-# alignItems (justifyContent랑 반대. flexDirection:"row"/"column"이 반대로 반응한다)
영역 안에 있는 콘텐츠의 위치를 정함.
alignItems:"flex-start" //영역의 앞쪽에 붙이는 것
alignItems:"flex-end" //영역의 끝쪽에 붙이는 것
alignItems:"center" //가운데

#
backgroundColor:"red"
padding: 20
margin: 20
marginTop:20
marginLeft:20
borderRadius:10
alignSelf:"center" //하위 view안에 있지 않고 바로 놨을 때 / 자기 자신 위치(예: button)

경계선
borderBottomWidth:0.5
borderBottomColor:"#eee" //이런 식으로 구분선 구현 가능

#image 이미지 사진 그림 pic picture

 

===========================================================================

[[[react native 팁_220210_v0.01]]]

#
프로젝트 생성 시 App.js 코드에 강사님이랑 자동 import되는 게 다른데, 이건 따로 설정하신 건가요? 저는 react import는 수동으로 쳐줘야 합니다ㅠ

->

React 17 버전부터는 React 안에서 필요한게 없으신 이상 (JSX만 쓰시는 경우 등) import React from ‘react’ 없이 개발 가능하게 되었습니다! 그러니까 강사님은 수업녹화당시 리액트 버전이 17 이하이셨을것으로 봅니다!

오! 좋은 정보 공유 감사드립니다! 맞아요, 승윤님 말씀대로 리액트 16 버전 기준으로 강의가 만들어졌을 겁니다!



#
안되는 거 있으면, 스트레스 받지 말고,
바로 물어보거나, 바로 검색하면 됨.

원하는 거 있으면 생각나는 키워드로 바로 검색해서 적용하면 됨. 스트레스 받지 않으셨으면 좋겠어요.

처음부터 몰라도, 못해도 된다. 결국 알면 됨.

#
공식문서에서 키워드로 찾으면,
그 단어 아니더라도 설명문구에 걸릴 수도 있으니, 이렇게 찾기 좋음.


#
쭉 나열되어 있는 부분을 Card라고 함.

예를 들어, 인스타그램에서 그림이랑 글이 있는 거 한 뭉텅이가 카드.
이 카드가 쭉 리스트업 되어 있음.

 

===========================================================================

[[[react native 에러_220211_v0.01]]]

[expo 앱]
#
Can't find variable: StyleSheet
->
react-native 임포트에 StyleSheet 추가

#
- `Unexpected token ';'` / `no stack` 오류가 발생합니다.
    
    A. data.json 파일이 저장이 안되었을 가능성이 높습니다! data.json 파일을 저장하고 휴대폰 앱을 껐다 켜보세요!


[질문]
1. <View style={{position: 'absolute', backgroundColor: '#FFFFFF', right: 30, bottom: 30, height: 30, width: 30}}></View> 이와 같은 소스를 예시로 들면, jsx 안에 중괄호 안은 js인데, 이것도 js라 볼 수 있나요? 아니면 css? style?

2. 그리고 jsx 밑에 스타일 작성하는 게, react 전용 StyleSheet인가요? 반응형 화면 고정하는 걸 css에서는 position:fixed로 썼는데, 여기는 fixed도 없고 표기법 도 position='----'로 달라서 여기 쓰이는 건 뭔지 궁금합니다.


->

https://reactnative.dev/docs/layout-props#position
react native 공식문서로 조회하시면 됩니다~!

View와 Stylesheet에대한 스타일을 React-native에 포함된 요소로 사용하고있습니다. 공식문서 위에 검색하는란있는데 검색하시면 사용되는 모든것들이나옵니다~!
추가로 설치한모듈일경우, 해당 모듈의 공식문서를 보면됩니다. 

1. 네, javascript object 이에요

===========================================================================

[[[react 매뉴얼]]]

공식문서

https://ko.reactjs.org/tutorial/tutorial.html

 

자습서: React 시작하기 – React

A JavaScript library for building user interfaces

ko.reactjs.org

 

[[[react native 매뉴얼]]]

공식문서

https://reactnative.dev/docs/view?redirected 

 

View · React Native

The most fundamental component for building a UI, View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls. View maps directly to the native view equivalent on whatever platform React Native is running o

reactnative.dev

Tutorial

https://jeffgukang.github.io/react-native-tutorial/docs/basic-tutorial/basic-features(todolist)/02-change-background-and-title/change-background-title-kr.html 

 

배경색 및 타이틀 변경

React Native Tutorial For Beginners - 2019

jeffgukang.github.io

 

[[[js 매뉴얼]]]

공식문서

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

 

Array.prototype.filter() - JavaScript | MDN

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

developer.mozilla.org

 

 

 

 

[[[VS code 확장기능_220210_v0.01]]]

[Extension]

Material Icon Theme
폴더 트리의 아이콘 예쁘고 구분 잘되고, 특징 드러나게.
https://vscode.tistory.com/entry/Material-Icon-Theme

Bracket Pair Colorizer
코드에 커서 올리면 닫는 부분 강조되게

[[[기획 팁]]]
#
모바일 앱 강의
6-8주차 기획안 링크 제출하기가 있어서 요청드립니다! 혹시 기획안 만드셨던 자료 같은 거 공유해주실 수 있으실까요? 현업에서 실제 어떻게 기획안? 기획서? 같은 거 만드는지 궁금합니다!
->
회사 내부 자료는 대외비라서 공유가 불가합니다^^;;;;만
퍼블리에서 대략 https://publy.co/content/6100?s=hgpjzx 이런 자료를 보시면 도움이 되실 거 같네요!

 

===========================================================================

[[[json 파츠_220210_v0.01]]]

[json데이터 형태]
data.json
{
    "tip":[
        {
            "idx":0,
            "category":"생활",
            "title":"먹다 남은 피자를 촉촉하게!",
            "image":"https://storage.googleapis.com/sparta-image.appspot.com/lecture/pizza.png",
            "desc":"먹다 남은 피자는 수분이 날라가기 때문에 처음처럼 맛있게 먹을 수 없는데요. 이럴 경우 그릇에 물을 받아 전자레인지 안에서 1분 30초에서 2분 정도 함께 돌려주면 촉촉하게 먹을 수 있습니다. 물이 전자레인지 안에서 수증기를 일으키고, 피자에 촉촉함을 더해줍니다.",
            "date":"2020.09.09"
        },
        {
            "idx":1,
            "category":"생활",
            "title":"바나나를 싱싱하게 보관하기",
            "image": "https://storage.googleapis.com/sparta-image.appspot.com/lecture/banana.png",
            "desc":"바나나에 날파리가 꼬이거나 금방 익어버리는 것을 예방하기 위한 방법인데요. 바나나 양쪽 끝을 자른 후, 보관용 케이스나 비닐봉지에 묶어 밀봉합니다. 그리고 냉장고에 넣어주면 되는데요. 하루에 1~2개씩 꺼내서 싱싱하게 먹을 수 있습니다.",
            "date":"2020.09.09"
        },
        {
            "idx":2,
            "category":"생활",
            "title":"셔츠에 묻은 볼펜 자국 없애기",
            "image": "https://storage.googleapis.com/sparta-image.appspot.com/lecture/shirt.png",
            "desc":"셔츠를 자주 입는 사람의 경우, 종종 볼펜 자국이 묻기 마련인데요. 이럴 경우에는 집에 있는 물파스로 가볍게 지울 수 있습니다. 옷 뒷부분을 키친타올로 받쳐 번지는 것을 방지한 후, 볼펜 자국 있는 부분을 물파스로 눌러주고, 키친타올로 닦아냅니다.",
            "date":"2020.09.09"
        },
        {
            "idx":3,
            "category":"재테크",
            "title":"잠자는 내 돈을 찾아라",
            "image": "https://storage.googleapis.com/sparta-image.appspot.com/lecture/money1.png",
            "desc":"‘새는 돈’에는 미처 몰랐던 카드 포인트, 휴면예금이나 환급금도 포함됩니다. 확실히 파악하지 못한 잠자는 돈을 찾아보고 자투리 돈들을 모으는 것도 중요합니다. 케이블방송, 위성방송 서비스를 이용하면서 중복 납부한 요금, 셋톱박스 보증금 등 돌려받지 않은 돈이 있는지 확인 해보세요. 또, 카드 포인트 통합 조회 서비스를 이용해 여러 개의 카드 포인트가 모두 얼마인지 체크해두는 것이 좋습니다. 보험해약 환급금, 휴면 보험금이나 휴면 예금을 찾아보고 돌려받는 일도 요즘에는 어렵지 않습니다.",
            "date":"2020.09.09"
        },
        {
            "idx":4,
            "category":"재테크",
            "title":"할인행사, 한정할인판매 문구의 함정 탈출!",
            "image": "https://storage.googleapis.com/sparta-image.appspot.com/lecture/money2.png",
            "desc":"‘안 사면 100% 할인’이라는 말 들어보셨나요? 견물생심, 좋은 물건을 보면 사고 싶기 마련입니다. 특히 대대적인 ‘할인 행사’ 중인 대형 마트에 갔을 때는 말할 것도 없겠죠. 따라서 생필품을 살 때, 한꺼번에 사서 사용하는 것보다 필요할 때 조금씩 구매하는 편이 좋습니다. 장을 보면서 대형마트에 자주 가다 보면 지금 필요한 것뿐 아니라 앞으로 필요할 것까지 사게 되어 지출이 커지기 때문입니다. 특히 할인 품목을 보면 뜻하지 않은 소비를 하는 경우도 많아진다. 홈쇼핑, 대형마트 등의 ‘할인행사’, ‘한정할인판매’ 등의 문구를 조심하세요. ",
            "date":"2020.09.09"
        },
        {
            "idx":5,
            "category":"생활",
            "title":"방전된 건전지 살리기",
            "image": "https://storage.googleapis.com/sparta-image.appspot.com/lecture/battery.png",
            "desc":"건전지를 다 사용하지 않아도 방전되면, 버리는 경우가 종종 있는데요. 건전지의 무게감이 느껴진다면, 드라이기를 활용해 방전된 건전지를 깨울 수 있습니다. 드라이기 열기를 10초~30초 정도 골고루 가해주면 되는데요. 건전지가 불필요하게 낭비되는 것을 막을 수 있습니다.",
            "date":"2020.09.09"
        },
        {
            "idx":6,
            "category":"반려견",
            "title":"반려견에게 배변 교육 시킬 때",
            "image": "https://storage.googleapis.com/sparta-image.appspot.com/lecture/puppy.png",
            "desc":"우선, 배변패드를 순서대로 돌며 간식을 조금씩 떨어뜨려 놓는다. 2단계는 배변패드 앞에서 기다렸다 반려견이 스스로 올라오면 간식을 주어서 보상하고, 3단계는 “화장실 가자”나 “매트” 같은 명령어를 붙여 말한 뒤 배변패드에 올라오면 간식을 주는 것이다. 마지막 단계는 배변패드에 올라간 반려견이 대소변을 본 다음 간식을 줌으로써 이 장소가 즐거운 곳이라는 인식을 심어주는 것이다. 그리고 무엇보다 1, 2회 사용한 배변패드는 바로 갈아줘야 한다.",
            "date":"2020.09.09"
        },
        {
            "idx":7,
            "category":"반려견",
            "title":"반려견이 주인과 떨어지는 것을 무서워 할 때",
            "image": "https://storage.googleapis.com/sparta-image.appspot.com/lecture/puppy2.png",
            "desc":"분리불안교육은 반려견에게 혼자 남는 법을 알려주기 위한 것이 아니라, 보호자가 ‘언제나 너에게 돌아올 거야’라고 알려주는 교육이다. 반려견과 5초 동안 떨어져 있다가 다시 문을 열고 들어가 손 냄새를 맡게 해주는 훈련을 하루 10번씩 7일 동안 반복하는 ‘5,10,7 법칙’을 통해 반려견의 마음을 편안하게 해줄 수 있다.",
            "date":"2020.09.09"
        },
        {
            "idx":8,
            "category":"반려견",
            "title":"반려견을 아이와 함께 키울 때",
            "image": "https://storage.googleapis.com/sparta-image.appspot.com/lecture/puppy3.png",
            "desc":"‘인간의 행복’을 위해 반려동물을 키우는 것에 대해 꾸준히 비판과 우려를 제기해온 그는 특히 ‘아이들의 정서’를 위해 반려견을 키우려 한다는 부모들에게 당부한다. “반려동물을 통해 아이들의 정서가 좋아진다면, 그것은 부모가 나와 생김새와 느낌, 말과 행동이 다른 동물을 아끼는 모습을 보기 때문입니다.” 인간의 뜻에 의해 인간과 함께 살게 된 생명을 좀 더 이해하고 행복하게 살 수 있도록 하는 것은 역시 인간의 노력에 달려 있다.",
            "date":"2020.09.09"
        },
        {
            "idx":9,
            "category":"재테크",
            "title":"렌탈 서비스 금액 비교해보기",
            "image": "https://storage.googleapis.com/sparta-image.appspot.com/lecture/money2.png",
            "desc":"요즘은 정수기, 공기 청정기, 자동차나 장난감 등 다양한 대여서비스가 활발합니다. 사는 것보다 경제적이라고 생각해 렌탈 서비스를 이용하는 분들이 늘어나고 있는데요. 다만, 이런 렌탈 서비스 이용이 하나둘 늘어나다 보면 그 금액은 겉잡을 수 없이 불어나게 됩니다. 특히, 렌탈 서비스는 빌려주는 물건의 관리비용까지 포함된 것이기에 생각만큼 저렴하지 않습니다. 직접 관리하며 사용할 수 있는 물건이 있는지 살펴보고, 렌탈 서비스 항목에서 제외해보세요. 렌탈 비용과 구매 비용, 관리 비용을 여러모로 비교해보고 고민해보는 것이 좋습니다. ",
            "date":"2020.09.09"
        }

    ]
}

 

===========================================================================

[[[js 파츠_220211_v0.02]]]

[예시]
<script src="https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/free_newyear_2022.js"></script> <script> let mycode = 'cb8f6acbf7c708895351fcbae8dad9c1'; </script>

그림 클릭 시 얼럿창
<div class="box">
<img onclick="alert('새해복!')" src="" />
</div>


[문법]
#
!==
% : 나머지

#삼항 연산자
let result = 10 > 2 ? "참" : "거짓"


[함수]
#.map함수
리스트 안에 있는 요소 하나하나를 끝날 때까지 순차적으로 검색해 보면서
그 값을 내뱉는 애가 map
tip.map((content,i)=>{ //content는 value, i는 순서
})

-예시-
import React from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native';

const main = 'https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Fmain.png?alt=media&token=8e5eb78d-19ee-4359-9209-347d125b322c'
import data from './data.json';

export default function App() {
  let tip = data.tip;
  let todayWeather = 10 + 17;
  let todayCondition = "흐림"
  //return 구문 밖에서는 슬래시 두개 방식으로 주석
  return (
    /*
      return 구문 안에서는 {슬래시 + * 방식으로 주석
    */
    <ScrollView style={styles.container}>
      <Text style={styles.title}>나만의 꿀팁</Text>
      <Text style={styles.weather}>오늘의 날씨: {todayWeather + '°C ' + todayCondition} </Text>
      <Image style={styles.mainImage} source={{uri:main}}/>
      <ScrollView style={styles.middleContainer} horizontal indicatorStyle={"white"}>
        <TouchableOpacity style={styles.middleButton01}><Text style={styles.middleButtonText}>생활</Text></TouchableOpacity>
        <TouchableOpacity style={styles.middleButton02}><Text style={styles.middleButtonText}>재테크</Text></TouchableOpacity>
        <TouchableOpacity style={styles.middleButton03}><Text style={styles.middleButtonText}>반려견</Text></TouchableOpacity>
        <TouchableOpacity style={styles.middleButton04}><Text style={styles.middleButtonText}>꿀팁 찜</Text></TouchableOpacity>
      </ScrollView>
      <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>
   
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    //앱의 배경 색
    backgroundColor: '#fff',
  },
  title: {
    //폰트 사이즈
    fontSize: 20,
    //폰트 두께
    fontWeight: '700',
    //위 공간으로 부터 이격
    marginTop:50,
    //왼쪽 공간으로 부터 이격
    marginLeft:20
  },
  weather:{
    alignSelf:"flex-end",
    paddingRight:20
  },
  mainImage: {
    //컨텐츠의 넓이 값
    width:'90%',
    //컨텐츠의 높이 값
    height:200,
    //컨텐츠의 모서리 구부리기
    borderRadius:10,
    marginTop:20,
    //컨텐츠 자체가 앱에서 어떤 곳에 위치시킬지 결정(정렬기능)
    //각 속성의 값들은 공식문서에 고대로~ 나와 있음
    alignSelf:"center"
  },
  middleContainer:{
    marginTop:20,
    marginLeft:10,
    height:60
  },
  middleButton01: {
    width:100,
    height:50,
    padding:15,
    backgroundColor:"#fdc453",
    borderColor:"deeppink",
    borderRadius:15,
    margin:7
  },
  middleButton02: {
    width:100,
    height:50,
    padding:15,
    backgroundColor:"#fe8d6f",
    borderRadius:15,
    margin:7
  },
  middleButton03: {
    width:100,
    height:50,
    padding:15,
    backgroundColor:"#9adbc5",
    borderRadius:15,
    margin:7
  },
  middleButtonText: {
    color:"#fff",
    fontWeight:"700",
    //텍스트의 현재 위치에서의 정렬 
    textAlign:"center"
  },
  middleButton04: {
    width:100,
    height:50,
    padding:15,
    backgroundColor:"#f886a8",
    borderRadius:15,
    margin:7
  },
  cardContainer: {
    marginTop:10,
    marginLeft:10
  },
  card:{
    flex:1,
    //컨텐츠들을 가로로 나열
    //세로로 나열은 column <- 디폴트 값임 
    flexDirection:"row",
    margin:10,
    borderBottomWidth:0.5,
    borderBottomColor:"#eee",
    paddingBottom:10

  },
  cardImage: {
    flex:1,
    width:100,
    height:100,
    borderRadius:10,
  },
  cardText: {
    flex:2,
    flexDirection:"column",
    marginLeft:10,
  },
  cardTitle: {
    fontSize:20,
    fontWeight:"700"
  },
  cardDesc: {
    fontSize:15
  },
  cardDate: {
    fontSize:10,
    color:"#A6A6A6",
  },


});

 

===========================================================================

[[[js 팁]]]

#
1주차 두번째 과제 질문입니다. 강의노트에 올려주신 예제에 따르면 let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']
let podo_list = fruit_list.filter(f => f=='포도') 해도 결과가 나오는데, let fruit_list = ['사과','감','감','배','포도','포도','딸기', '포도','감','수박','딸기'] let podo_list = fruit_list.filter((f)=>{ return f == '포도' }) console.log(podo_list) //['포도','포도','포도'] 혹시 정답은 이렇게 양식을 약간 바꿔서 길게 쓴 이유가 있을까요?

->

말씀해주신 코드는 Arrow function의 implicit return 기능을 이용해주신 것입니다! (Arrow functions may implicitly return values by simply omitting the curly braces that traditionally wrap a function's body if their body only contains a single expression.)
https://riptutorial.com/javascript/example/17665/implicit-return

강의노트의 코드는 implicit return을 사용하지 않고 작성한 코드라고 이해해주시면 될 거 같습니다! 둘 다 동작에는 문제가 없으니 둘 다 정답이라고 볼 수 있을 거 같아요!

 

===========================================================================

여기서부턴 아직 직접적으로 나오진 않아서 상관없지만, 올린 김에 올림

===========================================================================

[[[HTML 파츠]]]

[기본]
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스파르타코딩클럽 | HTML 기초</title>
</head>

<body>
    <!-- 구역을 나누는 태그들 -->
    <div>나는 구역을 나누죠</div>
    <p>나는 문단이에요</p>
    <ul>
        <li> bullet point!1 </li>
        <li> bullet point!2 </li>
    </ul>

    <!-- 구역 내 콘텐츠 태그들 -->
    <h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
    <h2>h2는 소제목입니다.</h2>
    <h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
    <span>다른 설정 적용을 위해 잘게 나누는 것</span>
    <hr>
    a 태그입니다: <a href="http://google.com/" target="_blank">하이퍼링크</a>
    <hr>
    img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <hr>
    input 태그입니다: <input type="text" />
    <hr>
    button 태그입니다: <button> 버튼입니다</button>
    <hr>
    textarea 태그입니다: <textarea></textarea>
</body>





//div:박스
</html>








[카카오톡]
카카오톡에 링크 보내면 뜨는 내용
<meta property="og:title" content="ㅇㅇ 님의 덕담 페이지"/>
<meta property="og:description" content="덕담 한마디 남겨주세요!"/>
<meta property="og:image" content="https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/ogimage.png"/>











[예시]
그림 클릭 시 얼럿창
<div class="box">
<img onclick="alert('새해복!')" src="" />
</div>

 

 

===========================================================================

[[[HTML 팁]]]

#
html에서 한가지 속성만 입력하시는 경우에는 기존 이미지의 비율대로 늘어나고 줄어듭니다.

#
폰트어썸이나 부트스트랩등에서 가져오신 아이콘은 크기 조절도 font-size로 조절합니다.
폰트어썸이나 부트스트랩은 쉽고 간단하게 아이콘을 생성해주죠.
Font awesome 검색해보시면 어떤것인지 알아보실수 있습니다

===========================================================================

 

'' 카테고리의 다른 글

앱개발 종합반 5주차  (0) 2022.02.27
앱개발 종합반 4주차  (0) 2022.02.27
앱개발 종합반 3주차  (0) 2022.02.27
앱개발 종합반 1주차  (0) 2022.02.03
앱개발 종합반 0주차  (0) 2022.01.24
Posted by 캬웃
,

앱개발 종합반 1주차

2022. 2. 3. 17:58

자바스크립트와

간단한 팁(문법)들을 배웠다.

 

숙제는

.map함수와

.filter함수였다.

 

ES6(ECMAScript6) 언급됨. JS를 더 쉽게하려는 문법 ES7까지 나온 듯.

(애로우 함수도 ES6에서 나왔다.)

'' 카테고리의 다른 글

앱개발 종합반 5주차  (0) 2022.02.27
앱개발 종합반 4주차  (0) 2022.02.27
앱개발 종합반 3주차  (0) 2022.02.27
앱개발 종합반 2주차  (0) 2022.02.12
앱개발 종합반 0주차  (0) 2022.01.24
Posted by 캬웃
,