[스파르타코딩클럽] 웹개발자가 듣는 앱개발 초보 강의_JSX & style

>>스파르타 친구추천링크 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);

let fruit_list = ['사과','감','감','배','포도','포도','딸기', '포도','감','수박','딸기'];

let countRB = 0;

fruit_list.map(function(value){if(value=='딸기') countRB++;});

console.log(countRB);

let bB = fruit_list.filter(value -> value == '포도');

console.log(bB );

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
WARNING: expo-cli has not yet been tested against Node.js v18.12.1.
If you encounter any issues, please report them to https://github.com/expo/expo-cli/issues

expo-cli supports following Node.js versions:
* >=12.13.0 <15.0.0 (Maintenance LTS)
* >=16.0.0 <17.0.0 (Active LTS)

  Usage: expo [command] [options]

  Options:

    -V, --version                     output the version number
    --non-interactive                 Fail, if an interactive prompt would be required to continue.
    -h, --help                        output usage information

  Commands:

    init [name]                       Create a new Expo project
    start [path]                      Start a local dev server for the app
    start:web [path]                  Start a Webpack dev server for the web app
    export [path]                     Export the static files of the app for hosting it on a web server
    install [packages...]             Install a module or other package to a project
    run:android [path]                Run the Android app binary locally
    run:ios [path]                    Run the iOS app binary locally
    send [path]                       Share the project's URL to an email address

    login                             Login to an Expo account
    logout                            Logout of an Expo account
    register                          Sign up for a new Expo account
    whoami                            Return the currently authenticated account

    client:install:ios                Install Expo Go for iOS on the simulator
    client:install:android            Install Expo Go for Android on a connected device or emulator

    config [path]                     Show the project config
    doctor [path]                     Diagnose issues with the project
    upgrade [sdk-version]             Upgrade the project packages and config for the given SDK version

    customize:web [path]              Eject the default web files for customization
    prebuild [path]                   Create native iOS and Android project files before building natively.
                                      Learn more: https://docs.expo.dev/workflow/customizing/

    publish [path]                    Deploy a project to Expo hosting
    publish:set [path]                Specify the channel to serve a published release
    publish:rollback [path]           Undo an update to a channel
    publish:history [path]            Log the project's releases
    publish:details [path]            Log details of a published release

    build:web [path]                  Build the web app for production

    credentials:manager [path]        Manage your credentials
    fetch:ios:certs [path]            Download the project's iOS standalone app signing credentials
    fetch:android:keystore [path]     Download the project's Android keystore
    fetch:android:hashes [path]       Compute and log the project's Android key hashes
    fetch:android:upload-cert [path]  Download the project's Android keystore

    push:android:upload [path]        Upload an FCM key for Android push notifications
    push:android:show [path]          Log the value currently in use for FCM notifications for this project
    push:android:clear [path]         Delete a previously uploaded FCM credential

    url [path]                        Log a URL for opening the project in Expo Go
    url:ipa [path]                    Log the download URL for the standalone iOS binary
    url:apk [path]                    Log the download URL for the standalone Android binary

    webhooks [path]                   List all webhooks for a project
    webhooks:add [path]               Add a webhook to a project
    webhooks:remove [path]            Delete a webhook
    webhooks:update [path]            Update an existing webhook

    build:ios [path]                  Superseded by eas build in eas-cli
    build:android [path]              Superseded by eas build in eas-cli
    build:status [path]               Superseded by eas build:list in eas-cli
    eject [path]                      Superseded by expo prebuild
    upload:android [path]             Superseded by eas submit in eas-cli
    upload:ios [path]                 Superseded by eas submit in eas-cli
    client:ios [path]                 Superseded by Expo Dev Clients

  Run a command with --help for more info 💡
    $ expo start --help

>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 문법

\sparta-myhonytip-mimimi\App.js
import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View , LogBox} from 'react-native';	{ StatusBar } : 비구조 할당 light : 상단상태바 하얗게 dark 상단 상태바 검정색 { StyleSheet, Text, View } : 필요한 도구
export default function App() { LogBox.ignoreLogs(['Warning:...']); //주석 return ( /주석/ <View style={styles.container}> <Text style={styles.container}>우하하하 앱만들기. </Text> <StatusBar style="light" /> </View> ); }	export default : 함수를 내보내겠다 키워드. 랜더링(rendering) - 리턴 밖에 코드는 함수를 만들어 사용. - 리턴 안에 코드는 화면이 그려지는 부분 style : 속성 : 하단 객체의 값을 넣을 수 있음.
const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, textStyle: { text : 'green' } });	스타일즈 화면 꾸미는 코드.

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 조건 ? 참 :거짓

import MainPage from './pages/MainPage';

export default function App(){

return (<MainPage/>)

}

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

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

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

'App' 카테고리의 다른 글

[스파르타코딩클럽] 웹개발자가 듣는 앱개발 초보 강의_백엔드 (0)	2022.12.14
[스파르타코딩클럽] 웹개발자가 듣는 앱개발 초보 강의_리엑트네이티브 기본 (0)	2022.12.13