앱개발 종합반 2주차 수강일지

대문자/띄어쓰기 잘 확인 !!!!

* VS code 단축키 

Alt + z(View - word wrap)   - 화면에 맞게 코드 정렬

Ctrl + /   - 한줄 주석처리

ctrl + c    - 서버 종료(서버 시작 명령어 : expo start)

 

* 개발은 무에서 유를 창조하는게 아니라 정리된 코드를 잘 찾고 잘 가져와서 응용하는 것이 더 효율적

(나중에 써먹을 수 있게 잘 정리 해 놓기)

 

* 렌더링 = 작업한 코드의 결과물을 보여주는 작업

 

* 우리가 리액트 네이티브(자바스크립트 언어 하나로 안드로이드 앱과 iOS앱 두 가지 모두 만들어주는 라이브러리)

로 앱을 개발한다는 것은...

Node.js로 자바스크립트 개발 환경을 구축하고,

NPM으로 필요한 자바스크립트 앱 개발 도구들을 가져와 사용하는 모습으로 진행

yarn은 npm 보다 가볍고 빠르게 자바스크립트 패키지를 관리 할 수 있게 해주는 자바스크립트 패키지 매니저 툴

cf) 라이브러리 = 도구

 

Expo =>

리액트 네이티브로 앱을 개발할 때, 안드로이드 & iOS 코드를 건드려야 하는 대부분의 상황들을 안 건드려도 되게끔 도와주는 툴

(Expo 어플에선 html 번역 불가. web에선 가능.)

- Expo 사이트 가입 후 - cmd에 expo login 입력해서 로그인

- VScode에서 ctrl + ~ / ctrl + shift + ~ 입력해 창을열어 cmd처럼 사용가능

 

- cmd 창에서 expo init + 이름 입력하면 프로젝트 생성가능

💡 그럼 터미널에서 어떤 유형의 Expo 앱을 만들어줄까? 물어보는데, blank를 선택해주세요

👉 그러면 조금 이따 Expo 앱이 완료되었다고 터미널에 나타납니다. 그리고 왼편에 프로젝트 앱 폴더도 생성된 것을 확인 할 수 있습니다.

Expo 앱이 완료되었단 뜻은, 위에서 우리가 고른 blank 타입의 앱. 즉, Expo가 제공 해주는 스타터 키트같은 기본앱을 만들어 제공해주는 것입니다.

따라서 우린 앞으로 Expo가 만들어준 기본 앱을 수정하며 앱을 만들어 나갑니다!

👉 너무 간단하죠? 하지만 아직 완전히 끝나지 않았습니다.

여러분들은 현재 Expo앱을 부모 폴더에서 만들고 부모 폴더에 존재합니다. 무슨 말이냐구요?

내컴퓨터에 C드라이브를 바라보고 있으면 C드라이브 안의 내용물들을 볼 수 없는 것처럼, 여러분들 터미널상에서 여러분들의 위치는 방금 만든 Expo앱을 바라보고 있을 뿐입니다.

즉, 여러분들은 이제 여러분들이 만든 Expo앱 폴더 안으로 들어가야 하는데요! 터미널에서 이렇게 명령어를 치면 됩니다.

cd <폴더명> : change directory의 약자로 입력한 폴더명으로 이동하는 명령어입니다.

ex)

cd sparta-myhoneytip-gun

 

💡

cd <폴더명> 은 폴더명으로 진입하는 명령어 였습니다. 그럼 진입한 폴더에서 다시 뒤로 나오는, 뒤로가기 명령어는 뭘까요? 너무 간단하게도 다음과 같습니다.

cd ..

cd + 띄고 + .. 입니다! ..이 뒤로가기라는 뜻을 담고 있다는 것을 기억한다면 곧 코드 단에서 다시 마주칠때 당황하지 않을 수 있습니다! 자바스크립트 모듈을 다룰 때 다시 보게되거든요

 

👉

expo start 명령어를 실행하면 터미널에 Expo 실행이 진행되며, 자동으로 브라우저가 열리면서 Expo 앱을 열 준비를 합니다.

expo start 명령어는 Expo 서버를 킨 것과 동일합니다. Expo 서버를 킨다는 것은 현재 개발하고 있는 앱을 실행시킨다는 뜻과 같습니다..

반대로 서버를 끌땐?

윈도우 : 컨트롤 + c 맥 : command + c

 

1) assets 👉 앱이 동작되고 서비스되는데에 기본적으로 가지고 있는 이미지 및 아이콘 파일들을 담는 폴더 입니다.

2)node_modules 👉 여러분들이 리액트 네이티브&Expo로 앱을 만들면서 설치하게 되는 많은 라이브러리들이 저장되는 장소입니다.

3)App.js 👉 리액트 네이티브 앱이 시작되는 출발선 및 진입점입니다. 웹으로 따지면 index.html 또는 main.html처럼 메인 파일이라고 생각하면 편합니다.

여기선 앱이 시작될 때 필요한 준비들(필요한 이미지 준비, 필요한 폰트들 준비)을 하는 장소이며, 준비를 할때 준비중입니다~라는 화면도 띄워주는 곳입니다.

준비가 끝나면, 본 화면을 보여줍니다.

즉 앞으로 우리가 만들 앱은 모두 App.js로부터 시작됩니다.

4)app.json 👉 앱의 이름, 앱의 출시 버전, 앱이 휴대폰에 설치될때 보여질 아이콘, 앱이 켜질때 보여지는 스플래시 스크린 화면, 안드로이드 또는 IOS 각각의 광고 설정 등

앱이 가지는 기본 정보들을 설정하는 파일입니다.

후반부에 광고 및 배포외엔 거의 다룰 일이 없으므로, 일단 알아만 둡니다!

 

👉 정리

1. node,npm 설치

2. window cmd 창에서

npm install -g yarn 명령어 쳐서 yarn 설치

npm install -g expo-cli 입력해서 expo 명령어 도구 설치

expo login 쳐서 로그인

3. VScode에 terminal에서 expo init 폴더명 으로 폴더만들기(기본 blank 선택)

- expo init 하면 기본 골격이 짜여있는 코드 세팅해줌

4. cd + 폴더명입력해서 입력한 폴더명으로 이동(뒤로가기는 "cd + 띄고 + ..")

5. expo start로 Expo 앱 실행(expo 서버 끌때는 "컨트롤 + c")

6. 휴대폰에 설치한 Expo 클라이언트 앱으로 Expo 앱 실행

 

 

 

👉 App.js

1. 간단히는 App.js는 앱의 화면을 그려주는 커다란 함수입니다. 또는!
2. 자세히는 App.js는 리액트 네이티브 라이브러리 그리고 Expo에서 제공해주는 기능들을 사용하여 화면을 그려주는 커다란 함수입니다.

 

👉 JSX

export default function App() {                
	return (                              //return문은 JSX문법으로 구성된 화면을 앱상에 보여주는 역할
    <View style={styles.container}>           //HTML 태그 같이 생긴 이 문법은 JSX라 불리우며
                                                   실제 화면을 그리는 문법입니다.
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

😁 JSX문법을 화면에 그려준다는 행위, 동작을 렌더링(rendering)이라 부름

 

• 1. JSX 기본 문법      + 전체를 감싸는 container 부모태그(<View>등)를 만든다음 시작
  • (1) 모든 태그는 가져와서 사용함
  • (2) 태그는 항상 닫는 태그와 자체적으로 닫는 태그를 구분해서 사용해야 함!
    (리액트 네이티브 공식문서와 Expo 공식문서를 보면서 사용법에 따라 사용)
    • 리액트 네이티브 공식 문서 https://reactnative.dev/docs/view
    • Expo 공식 문서 https://docs.expo.io/versions/v38.0.0/react-native/view/
  • (3) 모든 엘리먼트는 감싸는 최상위 엘리먼트가 있어야 함.
           엘리먼트 = 태그 = <> 
    👉 다음과 같이 감싸는 엘리먼트가 없다면 오류가 발생합니다.

    //View 엘리먼트 밖에 StatusBar가 나와 있으므로 엘리먼트 전체를 감싸는 엘리먼트가 
    //없어서 오류가 납니다.
    export default function App() {
      return (
        <View style={styles.container}>
          <Text>Open up App.js to start working on your app!</Text>
        </View>
    		<StatusBar style="auto" />
      );
    }
    

    //App.js가 렌더링 하고 엘리먼트는 결국 //Text와 StatusBar엘리먼트를 감싸고 잇는 View입니다.
  • (4) return에 의해 렌더링 될 땐 항상 소괄호로 감싸져야 한다.
  • (5) JSX 문법 밖에서의 주석과 안에서의 주석은 다르다

 

 

//JSX밖에서의 주석
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
//JSX밖에서의 주석
export default function App() {
	//return문 밖에서의 주석                             <--JS의 영역
  return (
    <View style={styles.container}>
			{/*                                    <--JSX의 영역
				return문 안에서의 주석
			*/}
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

//JSX밖에서의 주석
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

.

Tag, CSS 쓸 때 대소문자 구분 잘하기

 

• JSX에서의 줄바꿈 방법 2가지

1. {"\n"} - 역슬래쉬 n이용

<Text style={styles.title}>
        Welcome{"\n"} Home
      </Text>

2. ` - 백틱 사용

<Text>{`
Hi~
this is a test message.
`}</Text>

 

 

 

[앱 화면 만들기] View, Text, ScrollView

👉 <View></View>

화면의 영역(레이아웃)을 잡아주는 엘리먼트입니다. 현재 App.js 상에서 View는 화면 전체 영역을 가집니다. 우리는 이 View 엘리먼트로 다음과 같이 화면을 원하는 대로 분할 할 수도 있습니다.

 

👉 <text>

앱에 글을 작성하려면 반드시 사용해야하는 엘리먼트입니다.

 

👉 <ScrollView>

앱 화면을 벗어나는 영역의 경우 ScrollView 엘리먼트로 감싸면 스크롤이 가능해지면서 모든 컨텐츠를 볼 수 있습니다.

 

 

[앱 화면 만들기] Button, Image

👉 <SafeAreaView>

상단 상태바를 제외한 아래 화면에만 렌더링 해주는 태그(ios에서만 가능? 안드로이드도 되는것 같기도하고?)

 

👉 <Button>

import React from 'react';
import { StyleSheet, Text, View, Button, Alert } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>아래 버튼을 눌러주세요</Text>
        {/* 버튼 onPress 속성에 일반 함수를 연결 할 수 있습니다. */}
        <Button 
          style={styles.buttonStyle}                          
          title="버튼입니다 "
          color="#f194ff" 
          onPress={function(){                               {/*방법 1*/}
            Alert.alert('팝업 알람입니다!!')
          }}
        />
        {/* ES6 문법으로 배웠던 화살표 함수로 연결 할 수도 있습니다. */}
        <Button 
            style={styles.buttonStyle} 
            title="버튼입니다 "
            color="#FF0000" 
            onPress={()=>{                                   {/*방법 2*/}
              Alert.alert('팝업 알람입니다!!')
            }}
          />
          </View>
    </View>
  );
}

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

cf)  title,color,onPress - 속성(props)이라고 부름

 

👉 onPress에 연결한 함수 구현부를 JSX 밖에서 구현한 다음 연결 할 수도 있습니다. 그땐 화살표 함수로 구현하여 함수를 만든 다음 연결해야 합니다.

import React from 'react';
import { StyleSheet, Text, View, Button, Alert } from 'react-native';

export default function App() {
  //화살표 함수 형식으로 함수를 정의하고
  //jSX문법 안에서 사용할 수 있습니다
  const customAlert = () => {                            // JSX 밖에서 함수선언
    Alert.alert("JSX 밖에서 함수 구현 가능!")
  }
  return (
    <View style={styles.container}>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>아래 버튼을 눌러주세요</Text>
        {/* onPress에 밖에서 구현한 함수 이름을 고대로 넣을 수도 있고*/}
        <Button 
          style={styles.buttonStyle} 
          title="버튼입니다 "
          color="#f194ff" 
          onPress={customAlert}                           {/*방법 1*/}
        />
        {/* onPress를 누르면 속성에 바로 구현해 놓은 함수 안에 customALert함수를 두고 실행할 수 있게도 가능합니다 */}
        <Button 
            style={styles.buttonStyle} 
            title="버튼입니다 "
            color="#FF0000" 
            onPress={() => {customAlert()}}               {/*방법 2*/}
          />
          </View>
    </View>
  );
}

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

 

* 화살표 함수

 

 

                                 = 

 

 

 

👉 <TouchableOpacity>

임의의 영역과 디자인에 버튼 기능을 달고 싶을 때 주로 사용하게 될 태그입니다

 

👉 <Image>

1. assets 폴더에 있는 이미지 가져와 사용하기

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
//이렇게 상단에 가져와 사용할 이미지를 불러옵니다
import favicon from "./assets/favicon.png"

export default function App() {
  return (
    <View style={styles.container}>
			{/*이미지 태그 soruce 부분에 가져온 이미지 이름(변수)을 넣습니다 */}
      <Image 
        source={favicon}
				// 사용설명서에 나와 있는 resizeMode 속성 값을 그대로 넣어 적용합니다
        resizeMode={"repeat"}
        style={styles.imageStyle}
      />
    </View>
  );
}

※ import favicon from "./assets/favicon.png"   -   ./ 는 현재 실행되고 있는 폴더,파일(App.js)의 하위폴더나 상위폴더가

아닌 동일 선상에 있는 폴더나 파일을 가리킬때 ./ 를 쓴다 

 

2. 외부 이미지 사용하기(웹주소)

<View style={styles.container}>
      <Image 
        source={{uri:'https://images.unsplash.com/photo-1424819827928-55f0c8497861?fit=crop&w=600&h=600%27'}}
        resizeMode={"cover"}
        style={styles.imageStyle}
      />

 

 

[앱 화면 만들기] 구성한 화면 꾸미기, Styles

리액트 네이티브에서 제공하는 StyleSheet 기능을 가져와 적용합니다. 이 StyleSheet은 결국 객체(딕셔너리)를 하나

만드는데, 이쁜 옷들을 정리해 놓는 객체 입니다.

 

 

* 자주 사용하는 스타일 속성

(엘리먼트를 사용시 위쪽 react-native 에서 import 해와야 하기때문에 써준다)

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

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>스파르타 코딩클럽!!</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    //영역을 잡는 속성입니다. 따로 자세히 다룹니다.
    //flex: 1은 전체 화면을 가져간다는 뜻입니다
    flex: 1,
    //영역의 배경 색을 결정합니다
    backgroundColor: '#fff',
    //아래 두 속성은 영역 안의 컨텐츠들의 배치를 결정합니다. 
    //flex를 자세히 다룰때 같이 자세히 다룹니다
    justifyContent:"center",
    alignContent:"center"
  },
  textContainer: {
    //영역의 바깥 공간 이격을 뜻합니다(하단 이미지 참조)
    margin:10,
    //영역 안의 컨텐츠 이격 공간을 뜻합니다(하단 이미지 참조)
    padding: 10,
    //테두리의 구부러짐을 결정합니다. 지금 보면 조금 둥글죠?
    borderRadius:10,
    //테두리의 두께를 결정합니다
    borderWidth:2,
    //테두리 색을 결정합니다
    borderColor:"#000",
    //테구리 스타일을 결정합니다. 실선은 solid 입니다
    borderStyle:"dotted",

  },
  textStyle: {
    //글자 색을 결정합니다. rgb, 값 이름, 색상코드 모두 가능합니다
    color:"red",
    //글자의 크기를 결정합니다
    fontSize:20,
    //글자의 두께를 결정합니다
    fontWeight:"700",
    //가로기준으로 글자의 위치를 결정합니다
    textAlign:"center"
  }
});

 

margin과 padding은 다음 이미지들 처럼, 영역의 바깥과 안의 여백을 결정합니다.

[앱 화면 만들기] 콘텐츠의 위치: Flex

- flex는 상대적인 개념

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

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

      </View>
      <View style={styles.containerTwo}>

      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {              {/*가장 최상위의 container 스타일을 가져가는 View 
                                엘리먼트는 디바이스 전체 화면의 영역을 가져감*/}
    flex:1
  },
  containerOne: {           {/*안 쪽의 containerOne 스타일이 부여된 View 엘리먼트는 
    flex:1,                     전체를 3등분한 뒤 1/3을 가져감*/}
    backgroundColor:"red"
  },
  containerTwo:{            {/*바깥쪽 containerTwo는 2/3를 가져감*/}
    flex:2,
    backgroundColor:"yellow"
  }
});

 

👉 flexDirection : 화면의 방향을 결정

ex) flexDirection:"row"

row는 왼쪽에서 오른쪽으로, column은 위에서 아래로

 

 

👉 justifyContent : flexDirection과 동일한 방향으로 내부컨텐츠를 정렬하는 속성

(flex-start, center, flex-end, space-between, space-around 속성 사용가능)

 

 

 

※ justifyContent, alignItem

Text 태그나 img 태그 style에 직접 적용하는게 아니라 container 자체 style에 적용해야

그 안의 컨텐츠들을 정렬할 수 있다.

 

 

 

flexDirection : row면 justifyContent : flex-start 했을때 왼쪽에 영역안 컨텐츠들이 정렬 되고 flex-end는 반대인 오른쪽정렬

 

 

👉 alignItems : Flex Direction과 수직한 방향(반대 방향이라고 생각하면 편합니다)으로 정렬하는 속성

flexDirection: 'column'에서 alignItems는 좌우 정렬, flexDirection: 'row'에서 alignItems는 상하 정렬을 뜻합니다

flex-start, center, flex-end, stretch 속성을 가짐

justifyContent, AlignItems은 내부 컨텐츠의 방향을 결정하는 속성

 

 

 

[앱 화면 만들기] 메인화면 꾸미기

- 실습

◀ 나만의 꿀팁 페이지 만들기 완성본

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

일단 내용은 채웠지만

1. 전체 container 위쪽 여백 어떻게 두는지

2. 메인 이미지 여백 조정 깔끔하게 어떻게하는지

3. 스크롤뷰 가로로 정렬 어떻게하는지

4. 3줄 넘어가면 말줄임표 쓰는거 어떻게 하는지

궁금.

▼ style 부분 내가 짜본 코드

const styles = StyleSheet.create({
  container: {
    flex: 1,
    margin:40,
    justifyContent: "center"
  },
  honeytextStyle: {
    fontSize:30,
    marginTop:50,          //margin으로 여백 주기
    marginLeft:20
  },
  mainimg: {
    margin:5,
    width:'90%',            //img 넣을때 가로,세로 길이 정해줘야함
    height:200,
    borderRadius:10,
    marginTop:20,           //소문자,대문자 구분 잘하기
    alignSelf:'center'
  },
  scrollcontainer: {
    flexDirection:'row',     //횡스크롤 만들시 ScrollView에서 horizontal썼으면
  },                           flexDirection 쓸 필요 없음
  textContainer: {
    height:50,
    borderColor:'#000',
    borderWidth:1,
    borderRadius:10,
    margin:10,
  },
  textStyle: {
    fontSize:25,
    textAlign:"center"
  },
  innercontainer: {
    flex:1,
    flexDirection:'row'
  },
  innerimg: {
    width:50,
    height:100,
    borderRadius:10,
    flex: 2
  },
  intextcontainer: {
    flex: 1,
    flexDirection:'column'
  },
  intext1: {
    fontSize:15,
    fontWeight: 'bold'
  },
  intext2: {
  }
  }
);

 

 

※※※

* 소문자, 대문자 구분 해야함(안하면 오류남)  ex)fontSize, flexDirection

* React Native 공식문서에 props 부분은 위쪽 export default funtion App() 부분 태그와 함께 쓸수있는 형식

 

 

*완성본 (But. expo 어플로 확인했을 때 card부분 flex 사용시 cardText 가 짤리는 현상 발생)

- 정답코드랑 비교해봐도 어떤게 잘못된건지 알 수가 없음 .... 나중에 다시 확인해 봐야 겠다.

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

export default function App() {
  return (
    <View 
        style={styles.container}>
      <Text 
        style={styles.title}>나만의 꿀팁</Text>
      <Image
        style={styles.mainimg}
        source={{uri:'https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Fmain.png?alt=media&token=8e5eb78d-19ee-4359-9209-347d125b322c'}}
       />
      <ScrollView style={styles.middleContainer}
                  horizontal>
        <TouchableOpacity style={styles.middleButton01}>
        <Text style={styles.middleButtonText}>생활
        </Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.middleButton01}>
          <Text style={styles.middleButtonText}>재테크
          </Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.middleButton01}>
          <Text style={styles.middleButtonText}>반려견
          </Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.middleButton01}>
          <Text style={styles.middleButtonText}>꿀팁 찜
          </Text>
        </TouchableOpacity>
      </ScrollView>
      <View style={styles.cardContainer}>
        <View style={styles.card}>
          <Image style={styles.cardImage}
            source={{uri:'https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Fpizza.png?alt=media&token=1a099927-d818-45d4-b48a-7906fd0d2ad3'}}
            />
          <View style={styles.cardText}>
            <Text style={styles.cardTitle}>먹다 남은 피자를 촉촉하게!!</Text>
            <Text style={styles.cardDesc} numberOfLines={3}>
              먹다 남은 피자는 수분이 날라가기 때문에 처음처럼 맛있게 먹을 수   없는데요. 이럴 경우 그릇에 물을 받아 전자레인지 안에서 1분  30초에서 2분 정도 함께 돌려주면 촉촉하게 먹을 수 있습니다. 물이    전자레인지 안에서 수증기를 일으키고, 피자에 촉촉함을 더해줍니다.</Text>
            <Text style={styles.cardDate}>2020.09.09</Text>
        </View>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
  },
  title: {
    fontSize:30,
    marginTop:50,
    marginLeft:20
  },
  mainimg: {
    margin:5,
    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
  },
  middleButtonText: {
    color:"#fff",
    fontWeight:"700",
    //텍스트의 현재 위치에서의 정렬 
    textAlign:"center"
  },
  cardContainer: {
    backgroundColor:'blue',
    marginTop:10,
    marginLeft:10, 
  },
  card:{
    flex:1,
    backgroundColor:"red",
    //컨텐츠들을 가로로 나열
    //세로로 나열은 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"
  }
}
);

 

- 강사 완성 코드

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'
export default function App() {
  //return 구문 밖에서는 슬래시 두개 방식으로 주석
  return (
    /*
      return 구문 안에서는 {슬래시 + * 방식으로 주석
    */
    <ScrollView style={styles.container}>
      <Text style={styles.title}>나만의 꿀팁</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 */}
        <View style={styles.card}>
          <Image style={styles.cardImage} source={{uri:"https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Fpizza.png?alt=media&token=1a099927-d818-45d4-b48a-7906fd0d2ad3"}}/>
          <View style={styles.cardText}>
            <Text style={styles.cardTitle}>먹다 남은 피자를 촉촉하게!</Text>
            <Text style={styles.cardDesc} numberOfLines={3}>먹다 남은 피자는 수분이 날라가기 때문에 처음처럼 맛있게 먹을 수 없는데요. 이럴 경우 그릇에 물을 받아 전자레인지 안에서 1분 30초에서 2분 정도 함께 돌려주면 촉촉하게 먹을 수 있습니다. 물이 전자레인지 안에서 수증기를 일으키고, 피자에 촉촉함을 더해줍니다.</Text>
            <Text style={styles.cardDate}>2020.09.09</Text>
          </View>
        </View>
        
      </View>
   
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    //앱의 배경 색
    backgroundColor: '#fff',
  },
  title: {
    //폰트 사이즈
    fontSize: 20,
    //폰트 두께
    fontWeight: '700',
    //위 공간으로 부터 이격
    marginTop:50,
	    //왼쪽 공간으로 부터 이격'
    marginLeft: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
  },
  middleButton04: {
    width:100,
    height:50,
    padding:15,
    backgroundColor:"#f886a8",
    borderRadius:15,
    margin:7
  },
  middleButtonText: {
    color:"#fff",
    fontWeight:"700",
    //텍스트의 현재 위치에서의 정렬 
    textAlign:"center"
  },
  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",
  }


});

 

 

VS code 오류 - data.json 파일이 저장 되어있지 않은 상황(저장 후 재 실행)

---

[앱&자바스크립트] 모듈과 반복문

 

우리가 만든 화면을 그리는 함수들은 리액트 네이티브로 전달되어(내보내져서 == export) 화면을 최종적으로 그린다는 것으로 이해하면 충분합니다. ex) export default function App() {

 

👉 준비한 데이터를 자바스크립트 App.js 파일에서 불러올 땐, 상단에서 다음과 같이 불러오면 됩니다.

(같은 폴더에 있는 data.json 파일을 불러오는법)

import data from './data.json';

 

👉 ./ ⇒ 현재 파일과 동일한 위치에서 불러올 파일을 찾는 코드

     ../ ⇒ 현재 파일이 위치한 폴더보다 상위 위치에서 불러올 파일을 찾는 코드

강의 초반에 cd .. 에 대해 다루었었죠? ..은 현재 위치한 폴더 뒤로가는 코드 였습니다

이렇게 어디에 위치한 파일인지 명시하고 불러온다음, data라는 이름으로 불러왔습니다.

파일 자체를 App.js로 불러오는 것이기 때문에, 원하는 변수명으로 불러올 수 있습니다.

그럼 이 불러오는 딕셔너리 + 리스트 데이터를 가지고 화면에서 반복 적용을 해보겠습니다.

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';           //data.jon 파일을 data라는 변수로 가져온다

export default function App() {
  let tip = data.tip;                    //data변수안의 tip 데이터를 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)=>{                 //tip변수의 데이터를 map함수로 반복
            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>)          //map 함수로 tip의 데이터를 content변수 선언과 동시에 불러옴
          })                      <text>태그에 변수를 사용시 {content.title}처럼
         }                          중괄호를 써서 불러오기가능
        
      </View>
   
    </ScrollView>
  );
}

* react에서의 조건문 구현 ==> 삼항연산자를 사용

let result = 10 > 2 ? "참" : "거짓"     //물음표 앞의 조건이 참일경우 물음표 바로 뒤 값이 변수에 저장
                                          조건이 거짓일경우 :(콜론)뒤 값이 변수에 저장 
(기본 모습)
let result = 조건 ? 참일 때 : 거짓 일때

(예제)
let result = 10 == 9 ? true : false  // result <-- false 값 할당   (result에 false값이 들어감)
let result = 10 !== 9 ? true : false // result <-- true 값 할당  
let reuslt = 99 > 10 ? true : false // result <-- true 값 할당

 

tip.map((content,i)=>{
            return i % 2 == 0 ? (<View style={styles.cardEven} 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 style={styles.cardOdd} 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>
                
                // 물음표뒤 소괄호를 사용해 참, 거짓 구분하고
                   짝수면 앞부분 내용 저장, 홀수면 뒷부분 내용 저장 하는방식으로 조건문 구현