Sweat100

앱과 서버. , 서버리스 ex) 파이어베이스(구글)

Request, Response 

API (Application Programming Interface): 서버쪽에서 정한 규칙

 - 주소를 통해 만들어진 api .

 - 제공해주는 함수를 통해 규칙제공.  >> firebase

useEffect();

팁 찜하기. 

openweathermap api.

4-2 15:34

- 컴포넌트 :Component : 정해진 요소를 사용하여 만든 화면의 일부분 !!!재사용성

ex) View, Image, TouchableOpacity

- 속성 : Props: 컴포넌트에 데이터 전달 

ex)numberofline, resizeMode  <Text numberofline={3} >

 export default function Card({content}) {  : 비구조 할당. 딕셔너리로 넘겨줌. 

- 상태 : State, useState : 사용할 데이터

UI = component(state)

- useEffect : 화면에  그려진 다음 가장 먼저 실행되는함수, 컴포넌트가 그려지면 처음 실행해야 하는 함수들을 모아두는곳. 

useEffect(()=>{

},[])  : useEffect(함수, 빈리스트)

useState + useEffect : 비동기 기술 사용. 

TypeError: undefined is not an object (evaluating 'tip.map')

App.js : 진입부 (state)  -> props Component  (state)

                                     -> props  Component (state)

return ready ? <Loading/> :  (서비스 화면)

const [state,setState] = useState([])

const [ready,setReady] = useState(true)

useEffect(()=>{ setTimeout(()=>{ setState(data) setReady(false) },1000) },[])

카테고리 기능 

const [state,setState] = useState([]) 

const [cateState,setCateState] = useState([]) 

const [ready,setReady] = useState(true)

useEffect(()=>{ setTimeout(()=>{ setState(data.tip) setCateState(data.tip) setReady(false) },1000) },[])

setCateState(state.filter((d)=>{ return d.category == cate }))

<TouchableOpacity style={styles.middleButtonAll} onPress={()=>{category('전체보기')}}>  

cateState.map((content,i)=>{ return (<Card content={content} key={i}/>) })

Status Bar 관리

https://reactnative.dev/docs/statusbar

expo install expo-status-bar

import { StatusBar } from 'expo-status-bar';

<StatusBar style="light" />

스택네비게이션 

stack : 쌓다.

navigate :  길을 찾다. 항해하다. 다루다. : 앱에서는 페이지이동. 

https://reactnative.dev/

네비게이션 설치코드 :  yarn add @react-navigation/native

네비게이션 추가 설치코드 : expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

스택네비게이션 설치 : yarn add @react-navigation/stack

초기값 고려해야함. 

share -linking

expo install expo-linking

ButtonGroup

>>스파르타 친구추천링크  5만원할인>>

개발일지 : Weekly I learned : 이번주에 내가 배운 것. 

김건희 투터. 

클라이언트(프론트) - 서버(백엔드)

: 데이터를 주고받는 관계 

네이티브앱 : 안드로이드(Java&Kotlin) vs 아이폰(swift)

하이브리드앱 : 웹에 껍데기

크로스 플랫폼 앱 : 자바스크립트로 개발.  >> 수업진행 : 리액트 네이티브(React Native)

리액트 네이티브(React Native) : 페이스불 만들고 지원, 사용자 UI를 만드는데 특화되어 있음

리액트( React.js) 라이브러리/프레임워크 기반으로 다루는 기술 , js로 개발가능

1주차 : 자바스크립트 배우기

자바스크립트 :멀티-패러다임 언어로 명령형, 함수형, 객체 지향형 언어다.

                       수업에선... 웹사이트(웹문서)에 움직이는 그림을 그릴 때 쓰이는 가벼운 언어

크롬 개발자 모드 : F12  , ios  옵션 command i

-. 변수(variable)

데이터(data)를 저장하기 위해 프로그램에 의해 이름을 할당받은 메모리 공간

 ex) x, y 미지수 

변수선언 let const  .. const 값 재할당 안됨. 

snake case/camel case

- 리스트(배열 = [] , 배열[번째]), 딕셔너리(딕 = {} , 딕[키] , 딕.키 ) 

JSONVue(https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko)

http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99 >> 사용예시보기

- js 함수 :  split, join, toUpperCase

function 함수이름(필요한변수들){내릴 명령들순차적으로 작성}

함수이름(필요한변수들);

- 조건문, if, else if , else and or

- 반복문 for(시작조건; 반복조건;더하기){매번실행}

1. 화살표 함수(람다.) 

let a = function(){}  : 리터럴방식 

let a = () => {} : 화살표함수. 람다. 

2. 딕셔너리 비구조 할당  

let blog = {owner:'name', url:'주소', getPost(){ 내용}};

기존 : blog.owner or blog.getPost() 

let{owner, getPost} = blog;

let blogFunction = ({owner,url,getPost}) => {
console.log(owner);
console.log(url);
console.log(getPost());
};

blogFunction(blog); 

3. 백틱(느낌표 옆키) - 줄바꿈, 변수처리 

기존 줄바꿈 '\n' 외울필요없이 바꿔서 저장됨. 

cosnt test =`dk

`;

=> console.log(test )> 'dk\n\n'

const id='아이디';

const idInfo = `${id} 정보`;

console.log(idInfo)>'아이디 정보'

4. 딕셔너리를 짭게 : 객체 리터럴

var name ="이름" ; var job="직업";

기존 : var user = {name:name, job:job};

최신 : let user={name, job};  // 자동 대입

5. map함수 - 리스트 출력시 길이 값을 몰라도 됨. 

ES6,7 :  최근 많이 쓰는 축약형문법

let numbers = [1,2,3,4,56,6];

numbers.map((value,i)=> {console.log(value,i)});

numbers.map(function(value,i) { console.log(value,i)});

6. fillter함수

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; const result = words.filter(word => word.length > 6); 

console.log(result);

2주차 : 리액트 네이티브와 Expo 기본 (JSX문법)

리액트 네이티브 : 페이스북 에서만듬,  안드로이드앱 ios 앱 두가지 모두 만들어주는 라이브러리 (도구)

Expo :엑스포: 리액트 네이티브 쉽게 사용하게 도와줌. 블루트스같은 네이티브한 부분도 쉽게 사용 expo client 다운 

JSX : 구역(레이아웃)을 잡는 문법언어  : 구역 <View>, 글자쓸때 <Text> 

import { Text, View } from 'react-native';

<View> <Text>Hello, I am {props.name}!</Text> </View>

node다운 설치(npm: 개발자들이 미리 만들어둔 도구) 

npm 으로 다운: Yarn 다운 설치 

>npm install -g yarn
added 1 package, and audited 2 packages in 4s

>yarn -v

1.22.19

창비우기 : cls 

>npm install -g expo-cli

npm notice New major version of npm available! 8.19.2 -> 9.1.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.1.2
npm notice Run npm install -g npm@9.1.2 to update!

>expo

>expo --version

>expo login   >> 웹 가입후 로그인 

visual studio code.- vsCode. 

시작>  열기 - 폴더 지정.   : vs code 연동됨. 

view > terminal  : 명령어 창 열기 

원하는 폴더 안에서 실행.  : 폴더 연동시킬때 주의 할점. 

$expo init spart-myhoneytip-mimimi

앱실행

$expo start    : 서버 켬 

큐알코드  or 해당 앱 클릭 

Open up App.js to start working on your app! : \sparta-myhonytip-mimimi\App.js

ctrl +s 시작 : app 최신코드상태로 refresh 

ctrl +c 정지  

1) assets : 이미지, 아이콘

2) node_modules : 라이브러리

3) App.js :  시작되는 진입점   

      - Loading.js

      - Navigate.js -> Page01.js(Button.js...), Page02.js....

4) app.json : 앱 설명서, 설정 정보. 

앱설치	익스텐션 : 도와주는 프로그램.  시작태그 종료태그알려줌 앱  Rainbow Brackets 아이콘...Material Icon Theme

!!!!!  이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\~~~.ps1 파일을 로드할 수 없습니다. window command 안될때.  터미널 창 오른쪽에 + 버튼 - Terminal Settings Default Profile: windows  검색  : null -> comand Prompt 출처 : https://velog.io/@min-zi

앱 화면 만들기 : JSX 문법

JSX 기본문법

1. 모든 태그는 가져와서 사용  : import {태그} from '도구함'

2. 태그는 항상 닫는 태그와 자체적으로 닫는 태그를 구분해서 사용. 

ex) <statusBar style="dark"/>   or <Text> 문장 </Text>

3. 모든 엘리먼트는 감싸는 최상위 엘리먼트가 있어야 한다.엘리먼트 =>  태그 =>  <>

View > Text , StatusBar    상위 하위 섞으면 에러남. 

4. return에 의해 렌더링 될 땐 항상 소괄호로. 

return { 태그 };

5. 주석. 

return 밖은 //  : js

return 안은  /**/ : JSX

View, Text, ScrollView 태그 

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, ScrollView} from 'react-native';

export default function App() {
  return (
    <ScrollView style={styles.container}>

      <View style={styles.textContainer}>
          <Text style={styles.textStyle}>옹ㅇㅇ2</Text>
        </View>
        <View style={styles.textContainer}>
          <Text style={styles.textStyle}>옹ㅇㅇ3</Text>
        </View>
        <View style={styles.textContainer}>
          <Text style={styles.textStyle}>옹ㅇㅇ4</Text>
        </View>
        <View style={styles.textContainer}>
          <Text style={styles.textStyle}>옹ㅇㅇ4</Text>
        </View>
        <View style={styles.textContainer}>
          <Text style={styles.textStyle}>옹ㅇㅇ4</Text>
        </View>
        <View style={styles.textContainer}>
          <Text style={styles.textStyle}>옹ㅇㅇ4</Text>
        </View>
        <View style={styles.textContainer}>
          <Text style={styles.textStyle}>옹ㅇㅇ4</Text>
        </View>
        <View style={styles.textContainer}>
          <Text style={styles.textStyle}>옹ㅇㅇ4</Text>
          <View style={styles.subContainerOne}>
            <Text style={styles.textStyle}>옹ㅇㅇ4</Text>
          </View>
          <View style={styles.subContainerTwo}>
            <Text style={styles.textStyle}>옹ㅇㅇ4</Text>
          </View>
        </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  subContainerOne: {
    flex:1,
    backgroundColor:"yellow"
  },
  subContainerTwo: {
    flex:1,
    backgroundColor:"green"
  },
  textContainer: {
    height:100,
    borderColor:'#000',
    borderWidth:1,
    borderRadius:10,
    margin:10,
  },
  textStyle: {
    textAlign:"center"
  }
});

Button : https://reactnative.dev/docs/button

Alert : https://reactnative.dev/docs/alert#docsNav

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, SafeAreaView, Button, Alert} from 'react-native';

export default function App() {

  const customAlert = (text)=>{
    Alert.alert(text);
  }
  return (
    <SafeAreaView style={styles.container}>

      <View style={styles.textContainer}>
         <Text style={styles.textStyle}>옹ㅇㅇ1</Text>
          {/* 버튼 onPress 속성에 일반 함수를 연결 할 수 있습니다. */}
        <Button 
          style={styles.buttonStyle} 
          title="버튼입니다 "
          color="#f194ff" 
          onPress={function(){
            Alert.alert('팝업 알람입니다!!222')
          }}
          />
                  {/* ES6 문법으로 배웠던 화살표 함수로 연결 할 수도 있습니다. */}
        <Button 
        style={styles.buttonStyle} 
        title="버튼입니다 "
        color="#FF0000" 
        onPress={()=>{
          Alert.alert('팝업 알람입니다!!11')
        }}
        />
        <Button 
        style={styles.buttonStyle} 
        title="버튼입니다 "
        color="#FF0000" 
        onPress={customAlert('바로실행')}
        />
        <Button 
        style={styles.buttonStyle} 
        title="버튼입니다 "
        color="#FF0000" 
        onPress={()=>{customAlert('클릭실행')}}
        />
      </View>
    </SafeAreaView> 
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  textContainer: {
    height:100,
    margin:10,
  },
  textStyle: {
    textAlign:"center"
  },
});


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  textContainer: {
    height:100,
    margin:10,
  },
  textStyle: {
    textAlign:"center"
  },
});

TouchableOpacity    버튼 css 자유롭게	<TouchableOpacity style={styles.textContainer} onPress={customAlert}>        <Text  style={styles.textstyle}>영역을 충분히 갖는 텍스트 입니다!</text> </TouchableOpacity >
image	import favicon from "./assets/favicon.png" {/*이미지 태그 soruce 부분에 가져온 미지 이름을 넣습니다 */}    <Image                source={favicon} // 사용설명서에 나와 있는 resizeMode 속성 값을 그대로 넣어 적용합니다         resizeMode={"repeat"}         style={styles.imageStyle}       />   imageStyle: {     width:"100%",     height:"100%",     alignItems:"center",     justifyContent:"center"   }  <Image         source={{uri:'https://images.unsplash.com/photo-1424819827928-55f0c8497861?fit=crop&w=600&h=600%27'}} // 사용설명서에 나와 있는 resizeMode 속성 값을 그대로 넣어 적용합니다         resizeMode={"cover"}         style={styles.imageStyle}       />
style https://reactnative.dev/docs/style#docsNav https://reactnative.dev/docs/layout-props	extContainer: {     //영역의 바깥 공간 이격을 뜻합니다(하단 이미지 참조)     margin:10,     //영역 안의 컨텐츠 이격 공간을 뜻합니다(하단 이미지 참조)     padding: 10,     //테두리의 구부러짐을 결정합니다. 지금 보면 조금 둥글죠?     borderRadius:10,     //테두리의 두께를 결정합니다     borderWidth:2,     //테두리 색을 결정합니다     borderColor:"#000",     //테구리 스타일을 결정합니다. 실선은 solid 입니다     borderStyle:"dotted",   textContainer: {     //영역의 바깥 공간 이격을 뜻합니다(하단 이미지 참조)     margin:10,     //영역 안의 컨텐츠 이격 공간을 뜻합니다(하단 이미지 참조)     padding: 10,     //테두리의 구부러짐을 결정합니다. 지금 보면 조금 둥글죠?     borderRadius:10,     //테두리의 두께를 결정합니다     borderWidth:2,     //테두리 색을 결정합니다     borderColor:"#000",     //테구리 스타일을 결정합니다. 실선은 solid 입니다     borderStyle:"dotted",   textStyle: {     //글자 색을 결정합니다. rgb, 값 이름, 색상코드 모두 가능합니다     color:"red",     //글자의 크기를 결정합니다     fontSize:20,     //글자의 두께를 결정합니다     fontWeight:"700",     //가로기준으로 글자의 위치를 결정합니다     textAlign:"center"
flex: 합의 개념.	flexDirection:"row", 자식의 화면 나누는 방향 : - 좌-> 우: row , 위-> 아래 :column justifyContent:"flex-start" : 컨텐츠 왼쪽:flex-start, 오른쪽 : flex-end *화면나누는방향 고려  alignItems:"flex-end" : justifyContent 반대 방향

모듈 시스템 :  자바스크립트 파일 불러오기

export function times(x){

return x*x ;

}

import {tims} from './util.js';

data.json

Map 반복문

tip.map((content,i)=>{return(<View>~~~</View>)})

i : index : 고유한 키값으로 정의해야함. 

 3항연산자

return 조건 ? 참 :거짓 

https://storage.googleapis.com/sparta-image.appspot.com/lecture/about.png

4주차 : 파이어베이스 : 백엔드

5주차 : 구글 광고 붙이기 +배포