앱개발 공부 4일차

이번 왕초보 앱개발 프로젝트는 자바스크립트를 이용하여 개발할 예정이다. 하지만, 나중에 앱을 계속 만들다보면 특정상황에서 안드로이드, iOS 각각의 폴더에 들어가 직접 코드를 만져야 하는 상황이 발생한다고 한다. 이런 경우에 안드로이드와 iOS 코드를 몰라도 개발을 가능하도록 도와주는 기능이 있다. 

 

yarn 설치하기

 

cmd 창에서 npm install -g yarn을 입력하면 아래와 같이 설치되었다는 문구가 나온다. 

 

 

Expo 설치하기

 

노드(Node.js)와 노드 패키지 매니저(npm)까지 설치가 완료되면 Expo 명령어 도구를 설치할 수 있다. Expo는 개발 중인 앱테스트를 위한 Expo클라이언트 앱을 제공해준다. 

명령어창에 다음과 같이 입력하면 설치가 된다.

 

C:\Users\LG>npm install -g expo-cli

 

Expo를 설치하면, 프로젝트를 생성하고, 실행해 볼 수 있다. Expo사이트에 가입하면 생성한 앱을 관리할 수도 있다. 

 

이제  Visual Studio 프로그랩을 열고 작업폴더를 지정해준다. 그리고 상단 [View]메뉴에서 Terminal을 선택하여 다음과 같이 명령어를 입력한다. 

 

expo init sparta-myhoneytip-rose

 

그러면 expo에 프로젝트 파일폴더를 만들고, 그에 필요한 파일들도 자동으로 설치된다.

 

Expo로 개발중인 앱을 마켓에 배포하기 위해선 여러분들 컴퓨터에 Expo계정을 세팅해야 한다. 

 

Expo 가입하기

 

Expo 계정을 생성했으면, 컴퓨터에 Expo계정을 연결시켜줘야 한다. 명령어창에서 다음과 같이 입력하여 아이디와 비번을 설정해준다. 

 

expo login --username "Expo 사이트 가입당시 입력한 name"

... expo 패스워드 입력란이 차례로 나오고, 차례대로 입력하면 로그인 성공!

 

이제 expo를 실행하기 위해 바탕화면에 작업폴더를 만들고, VSCode프로그램을 연다. 

에디터상의 터미널을 열고 다음과 같이 입력한다. 

 

expo init sparta-myhoneytip-영어이름

그럼 터미널에서 어떤 유형의 Expo앱을 만들어줄지 물어보는데, 'blank'를 선택한다. 그러면 왼편에 프로젝트 앱 폴더가 생성된 것을 확인할 수 있다. 

 

Expo서버를 키기 위해, 다음의 명령어를 입력한다. (끄는 것은 컨트롤+c이다.)

expo start  

 

그러면 화면에 QR코드가 생성이 된다. 이 QR코드를 핸드폰 카메라에 갖다대면 해당 페이지를 핸드폰에서 열어볼 수 있다. 물론 'expo go'가 핸드폰에 설치되어 있어야 한다. 

 

JSX 문법

 

프로젝트 파일폴더에서 App.js파일을 클릭하면 우측에 코드들이 자세하게 나온다. 여기에서 <View> 태그로 둘러쌓여 있는 부분이 JSX로 작성된 부분이다. 

 

보통 코드 안에서 주석을 달 땐 앞에 //을 붙이지만, JSX안에서는 {/*   */}을 붙인다. 이것을 더 간단하게 하려면, 주석내용을 선택하고 'Ctrl+/' 키를 쳐주면 된다. 

 

App.js파일에서 <View>태그는 영역을 만들어 준다. style 태그를 통해 영역과 색깔을 지정할 수 있다. 

 

 

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
// 아래의 코드들은  'react-native'라이브러리에서 가져온다. 

//함수 이름(App)과 파일이름은 동일해야 한다. 
export default function App() { 
  return (
    <View style={styles.container}>
      <View style={styles.subContainerOne}></View>
      <View style={styles.subContainerTwo}></View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  subContainerOne: {
    flex:1,
    backgroundColor:"yellow"
  },
  subContainerTwo: {
    flex:1,
    backgroundColor:"green"
  }
});

 

<text>태그는 텍스트를 쓰고자 할 때 쓰는 태그이다. 그리고 <View>태그로 감싸져 있어야 한다. 

 

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

 

<ScrollView>태그는 화면의 내용이 넘칠 때, 스크롤 할 수 있는 태그이다. 

 

import React from 'react';
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}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </View>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </View>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </View>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </View>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </View>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </View>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </View>
    </ScrollView>
  );
}

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

 

<Button>태그는 button을 만들기 위해 쓰는 태그이다. onPress 기호 안에 직접 실행문을 쓸수도 있고, 상단에 함수를 정의하여 onPress안에 함수를 호출할 수도 있다.

 

 

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(){
            Alert.alert('팝업 알람입니다!!')
          }}
        />
                     {/* ES6 문법으로 배웠던 화살표 함수로 연결 할 수도 있습니다. */}
        <Button 
            style={styles.buttonStyle} 
            title="버튼입니다 "
            color="#FF0000" 
            onPress={()=>{
              Alert.alert('팝업 알람입니다!!')
            }}
          />
          </View>
    </View>
  );
}

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

 

<TouchableOpacity>는특정 영역에 버튼기능을 활성화 시키고 싶을 때 쓴다. 

 

 

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

export default function App() {
  const customAlert = () => {
    Alert.alert("TouchableOpacity에도 onPress 속성이 있습니다")
  }
  return (
    <ScrollView style={styles.container}>
      <TouchableOpacity style={styles.textContainer} onPress={customAlert}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.textContainer} onPress={customAlert}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.textContainer} onPress={customAlert}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.textContainer} onPress={customAlert}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.textContainer} onPress={customAlert}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.textContainer} onPress={customAlert}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.textContainer} onPress={customAlert}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </TouchableOpacity>
    </ScrollView>
  );
}

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

 

 

이미지 불러오기

 

이미지를 불러오는 방법은 2가지가 있다. 프로젝트 폴더 중 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"} //repeat는 화면전체에 반복해서 보여줌. 공식문서 React Native를 보면 cover, center 등이 있다
        style={styles.imageStyle}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    //justifyContent와 alignContent는 영역 안에 있는 콘텐츠들을 정렬합니다
    justifyContent:"center",
    alignContent:"center"
  },
  imageStyle: {
    width:"100%",
    height:"100%",
    alignItems:"center",
    justifyContent:"center"
  }
});

 

구글 클라우드나 외부서버에 저장된 이미지를 불러오는 경우는 다음과 같다. 외부이미지의 주소만 uri의 키값으로 source에 지정해주면 된다. 

 

 

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={{uri:'https://images.unsplash.com/photo-1424819827928-55f0c8497861?fit=crop&w=600&h=600%27'}}
          // 사용설명서에 나와 있는 resizeMode 속성 값을 그대로 넣어 적용합니다. 코드가 너무 길면 Alt+Z를 치면 자동조절된다
        resizeMode={"cover"}
        style={styles.imageStyle}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    //justifyContent와 alignContent는 영역 안에 있는 콘텐츠들을 정렬합니다
    justifyContent:"center",
    alignContent:"center"
  },
  imageStyle: {
    width:"100%",
    height:"100%",
    alignItems:"center",
    justifyContent:"center"
  }
});

 

자주 사용하는 스타일 속성

 

styles라는 변수에 디자인 속성을 지정할 수 있다. 자주 쓰는 속성들은 아래와 같다. 

 

 

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', //흰색은 #000값을 씀
    //아래 두 속성은 영역 안의 컨텐츠들의 배치를 결정합니다. 
    justifyContent:"center",
    alignContent:"center"
  },
  textContainer: {
    margin:10,      //영역의 바깥 공간 이격을 뜻합니다
    padding: 10,
    borderRadius:10,
    borderWidth:2,
    borderColor:"#000",
    borderStyle:"dotted", //실선은 solid로 함.

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

 

Flex : 컨텐츠의 위치

 

Flex는 영역의 레이아웃을 결정해주는 역할을 한다. 맨 상단의 Flex1은 전체 영역이고 1로 설정되면, 하단의 영역들을 쪼개어 차례로 영역을 설정한다. 

 

사례 1)

 

 

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: {
    flex:1
  },
  containerOne: {
    flex:1,
    backgroundColor:"red"
  },
  containerTwo:{
    flex:2,
    backgroundColor:"yellow"
  }
});

 

사례2 )

 

 

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 style={styles.innerOne}>

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

        </View>

      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex:1
  },
  containerOne: {
    flex:1,
    backgroundColor:"red"
  },
  containerTwo:{
    flex:2,
    flexDirection:"row", // "column"을 지정하면 위, 아래로 영역이 생김
    backgroundColor:"yellow"
  },
  innerOne: {
    flex:1,
    backgroundColor:"blue"
  },
  innerTwo: {
    flex:4,
    backgroundColor:"orange"
  }
});

 

justifyContent 는 플랙스 direction과 동일한 방향으로 내부에 있는 컨텐츠를 정렬한다. 

 

 

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 style={styles.innerOne}>
         
        </View>
        <View style={styles.innerTwo}>
          <Text>!!컨텐츠!!</Text>
        </View>

      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex:1
  },
  containerOne: {
    flex:1,
    backgroundColor:"red"
  },
  containerTwo:{
    flex:2,
    flexDirection:"row",
    backgroundColor:"yellow"
  },
  innerOne: {
    flex:1,
    backgroundColor:"blue"
  },
  innerTwo: {
    flex:4,
    justifyContent:"flex-start", //좌우로 'end', 'center'등을 붙임에 따라 위치가 달라진다. 
    backgroundColor:"orange"
  }
});

 

alignItems는 위, 아래로 컨텐츠를 배치한다. 

 

 

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 style={styles.innerOne}>
         
        </View>
        <View style={styles.innerTwo}>
          <View style={styles.content}></View>
        </View>

      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex:1
  },
  containerOne: {
    flex:1,
    backgroundColor:"red"
  },
  containerTwo:{
    flex:2,
    flexDirection:"row",
    backgroundColor:"yellow"
  },
  innerOne: {
    flex:1,
    backgroundColor:"blue"
  },
  innerTwo: {
    flex:4,
    backgroundColor:"orange",
    alignItems:"flex-end"
  },
  content: {
    width:50,
    height:50,
    backgroundColor:"#000"
  }
});

 

기본 함수 골격

 

다음은 react.native 페이지를 작성하는 기본 골격이므로 그냥 복사해서 쓸 수 있다. 

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 ( )
}
const styles = StyleSheet.create({ })

오늘은 JSX문법을 배워보았다. 나름 규칙을 잘 이해하면 어렵진 않을 것 같은데, 많이 반복해보는 것이 중요한 것 같다. 아직은 단순히 규칙을 외워서 적용하는 단계라 수학만큼 어렵지는 않다. 보통 수학은 처음엔 쉬워보이다가 갑자기 확 어려워진다. 코딩도 아마 배우다 보면 갑자기 어려워지는 단계가 있으리라.

이번 코딩강좌를 들으면서 코딩을 직접할 지, 외주를 줄 지 판단을 해보고자 한다. 코딩이라는 직업은 몰입은 되서 좋지만, 건강에는 안 좋은 것 같다. 몇 시간 동안 꿈쩍않고 컴퓨터 화면을 들여다 보고 있어야 하기 때문이다. 과연 일반인으로서 코딩을 어느 만큼 활용할 수 있을지 의문이다. 이왕이면 또 하나의 외국어처럼 사용할 수 있었으면 좋겠다. 문제는 코딩언어가 너무 빠르게 진화하고, 쉽게 사라진다는 것이다. 한때 HTML을 배우느라 시간을 들였던 적이 있지만, 결국 요즘은 블로그나 쇼핑몰 사이트를 쉽게 만들 수 있는 서비스가 제공되고 있다. 큰 기대는 하지 말자. 그냥 코딩을 배우는 지금 현재를 즐기자.