본문 바로가기
Coding

[스파르타코딩클럽] APP 개발 종합반 - 2주차 개발일지

by 준아이덴티티 2022. 11. 18.
SMALL

 

 

 

 

 

  커피도 준비됐고 슬슬 APP개발 종합반 2주차 개발일지를 써보련다. 먼저 앱개발에 뛰어든지 얼마 안 되어 지식이 부족하고 글 주변이 많이 없는 점 이해의 말씀 당부드린다.

 

 



⛵ 수업 목표

  1. 앱 개발 준비 - 리액트 네이티브(기술)과 Expo(도구) 소개 및 설치
  2. 앱 화면 만들기
  3. 앱에서 자주 사용되는 자바스크립트 연습

 

 

 

 

앱 개발 준비🌱

 

  본격적인 앱의 개발 시작에 앞서 첨언하자면 Expo라는 도구로 앱개발을 진행한다. 앱 개발, 즉 리액트 네이티브 앱 개발에서 구역(레이아웃)을 잡는 문법 언어를 JSX라고 부른다.

 

  JSX문법은 화면의 구역을 잡을 때는 <View> 태그를, 글자를 쓸 때는 <Text> 태그를 사용하듯 용도에 맞는 태그가 정해져있고 우리는 필요한 태그를 필요에 맞게 사용하면 된다.

 

  태그란 <> 와 같이 꺽쇠로 표현하는 프로그래밍 문법을 의미. HTML도 태그 문법이라 볼 수 있다.

 

이렇게 상단에서 사용할 엘리먼트를 react-native 라이브러리로부터 꺼내 사용한다.

 

  리액트 네이티브로 앱을 제작하다보면, 자주 사용되는 자바스크립트 문법이 다소 한정적이다. 조건문도 우리가 알고있는 if문보다는 좀 더 간결하고 직관적인 조건문을 사용한다. 리액트 네이티브는 우리가 배운 자바스크립트 언어 하나로 안드로이드 앱과 iOS 앱 두가지 모두 만들어주는 라이브러리다. 라이브러리는 개발할 때 사용하는 도구를 의미.

 

 

 

  위 이미지에서 볼 수 있듯이 특정상황에서는 안드로이드, iOS 각 폴더에 들어가 직접 코드를 만져야하는 상황이 발생한다. 안드로이드,  iOS 앱을 만들 땐 자바&코틀린과 Swift라는 언어를 써야하는데 언어 하나로 앱을 만들 수 있다는 취지에서 벗어나게 된다. 그래서 이에 좀 더 취지에 가깝게 더 쉽고 빠르게 안드로이드, iOS 개발 언어를 잘 몰라도 리액트 네이티브 앱 개발을 수월하게 도와주는 도구가 존재한다.

 

  Expo란 안드로이드와 iOS 코드를 몰라도 개발이 가능하다! 리액트 네이티브로 앱을 개발할 때 코드를 건드려야하는 대부분의 상황들을 안 건드려도 되게끔 도와주는 툴이 많이 존재한다. Expo에서 제공해주는 공식문서와 네이티브 공식문서만 따라 앱을 만들면, 마치 미니카 조립하듯 앱이 뚝딱 만들어진다고(과연).

 

개발 중인 앱 테스트를 위한 클라이언트 앱 제공

 

IOS : https://apps.apple.com/app/apple-store/id982107779
안드로이드 : https://play.google.com/store/apps/details?id=host.exp.exponent&referrer=www 

 

‎Expo Go

‎Start building projects using web technologies with just your iOS device and your computer. Expo is a developer tool for creating experiences with interactive gestures and graphics using JavaScript and React. Note: some programming experience is recomme

apps.apple.com

 

Expo - Google Play 앱

Expo는 JavaScript 및 React를 사용하여 앱을 제작하는 무료 및 오픈 소스 플랫폼입니다.

play.google.com

 

 

  우리는 처음부터 끝까지 자바스크립트로 앱을 만드는 과정을 함께하게 된다. 그러나 자바스크립트로 바닥부터 만들어가는 것은 아니라고. 똑똑한 개발자들이 미리 만들어둔 자바스크립트 선물상자들을 가져와 적재적소에 사용해야한다. 이때 필요한게 Node와 NPM이다.

 

  우리가 리액트 네이티브로 앱을 개발한다는 것은 Node.js로 자바스크립트 개발 환경을 구축하고, NPM으로 필요한 자바스크립트 앱 개발 도구들을 가져와 사용하는 모습이라 보면된다.

 

  맥은 terminal, 윈도우는 cmd창에 다음과 같이 순서대로 입력해 보자.

 

 

  yarn은 npm보다 가볍고 빠르게 자바스크립트 패키지를 관리할 수 있게 해주는 자바스크립트 패키지 매니저 툴이다. 각자의 장/단점이 있지만, 우린 앞으로 패키지 관리자로 yarn을 좀 더 많이 사용하게 된다.

 

  노드(Node.js)와 노드 패키지 매니저(npm)까지 설치가 완료되면 본격적으로 Expo 명령어 도구를 PC에 설치할 차례다. 이 Expo 명령어로 앱도 생성하고, 필요한 앱 개발 도구도 설치한다.

 

  맥 사용자들은 npm 명령으로 도구들을 설치할 때 "permission denied"라는 오류가 발생시 당황하지 말고 sudo를 앞에 붙여주자. ex> sudo npm install -g expo-cli 내 PC 깊이 설치하는 과정이라 권한이 없다는 이야기다.

 

  윈도우 사용자들이 자주 겪는 에러로는 파일 로드 오류가 있다. 그럴 때는 이 영상을 참고해보자. https://www.notion.so/signed/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F7f233dd5-7920-4554-a435-705871419809%2Fchange_default_shell.mp4?table=block&id=3612a7ee-dfb9-40bd-9736-c38614b49c2f&spaceId=83c75a39-3aba-4ba4-a792-7aefe4b07895&userId=abc30c53-7b4b-4a92-b9d5-a549362b697f&cache=v2

 

 

npm install -g expo-cli 의 의미는 아래와 같다.

 

npm: 노드 패키지 매니저 명령을 실행.

install: 설치.

-g: PC 전역적으로 설치 == 어디서든지 -g 다음 오는 명령어를 사용할 수 있게끔.

expo-cli: 설치할 패키지 이름.

 

  우린 이 명령어 한 줄로, PC 어디서든지 Expo를 사용할 수 있게끔 패키지를 전역적으로 설치했다. Expo를 설치 및 사용한다는건 Expo가 기본적으로 제공해주는 명령어들(프로젝트 생성, 프로젝트 실행, 프로젝트 빌드 등)의 다양한 기능을 사용할 수 있다는 것을 의미.

 

  Expo로 개발중인 앱을 마켓에 배포하기 위해 우리는 PC에 Expo 계정을 세팅해야 한다.  그래야 추후 앱 관리와 배포를 한번에 진행할 수 있다.

 

 

 

  Expo 가입링크에서 실제 가입이 가능하다. 가입 후 로그인을 하면 지금은 비어있지만 앞으로 앱을 개발하고 배포할 때 다음과 같이 대시보드에 앱을 업로드해서 쓸 수 있다.

  

 

 

 

 

 

  Expo 계정을 생성했다면, 이제 PC에 Expo 계정을 연결시켜줘야한다. 아까와 동일하게 윈도우는 cmd, 맥은 terminal에서 다음 명령어를 실행한다.

 

 

 

 

  이제 리액트 네이티브&Expo 앱을 생성할 때가 됐다. 이후 VSCode 명령어 세팅과 디바이스 상의 Expo 어플 설치 및 추가로 설정해주어야하는 부분이 더러있는데, 이 글은 개발일지를 적을 목적이었기 때문에 추후 여유가 되면 따로 다루어보고 지금은 JSX 문법 부분 및 앱 화면 만들기를 중점적으로 나누고자한다.

 

 

 

 

 

앱화면 만들기🛠

 

 

  App.js는 JSX문법으로 그려져 준비된 화면을 반환한다. 리액트 네이티브에서 return은 우리가 작성한 JSX문법으로 구성된 화면을 앱 상에 보여주는 역할을 하는 것이다. 여담으로 JSX문법을 화면에 그려준다는 행위, 동작을 렌더링이라 부른다고.

 

  <View> <Text>와 같이 꺽쇠로 쓰여져있는 것들은 리액트 네이티브에서 JSX라고 부르며 또 하나의 화면을 그리는 문법이다. JSX 문법상의 꺽쇠를 태그라고 부르고 <View>영역</View>과 같이 닫는 태그로 온전히 화면의 한 영역을 구성할 때 JSX에서는 엘리먼트라 부른다.

 

  우리가 앞으로 사용할 태그들, View나 Text 같은 문법은 임의로 만든 태그들이 아니다. 리액트 네이티브에서 제공해주는 이미 존재하는 태그 문법을 가져와서 사용하는 것이라고. App.js 파일 상단을 보면 우리가 화면을 그릴 때 사용할 태그들을 가져와 준비해 놓는다.

 

  첫째, 태그는 항상 닫는 태그와 자체적으로 닫는 태그를 구분해서 사용해야한다. 둘째, 모든 엘리먼트는 감싸는 최상위 엘리먼트가 있어야한다. 엘리먼트는 곧, 태그<>다. 감싸는 엘리먼트가 없다면 오류가 발생한다. 꼭 감싸는 엘리먼트 없이, 혹은 추후 디자인적 측면을 위해 없이 진행해야 한다면, 프래그먼트라는 의미없는 엘리먼트로 감싸서 렌더링할 수도 있다. 하지만 이 방법은 지양하는 방식이라고. 마지막으로 셋째, return에 의해 렌더링될 땐 항상 소괄호로 감싸져야만 한다. 

 

  이렇게 세가지를 준수하면서 화면을 그려나가면 된다. 개발을 할 때의 주석을 남기는 일은 꽤나 중요한데 주석은 다음과 같이 작성할 수 있다.

 

 

  <View></View> : 화면 영역을 잡아주는 엘리먼트. 현재 App.js상에서 View는 화면 전체영역을 가지며 우리는 이 엘리먼트로 아래 캡쳐처럼 화면을 원하는대로 분할할 수 있다.

 

 

  <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 } from 'react-native';

export default function App() {
  return (
      //각 태그들에는 style이라는 속성을 갖습니다.
      //이 속성은 파일 최하단에 작성한 스타일 코드 객체의 키 값을 부여해
    // 엘리먼트들에 스타일을 줄 수 있습니다.
    //이는 JSX문법을 배우고 난 다음 더 자세히 다룹니다.
    <View style={styles.container}>
         {/* //보인 영역을 갖는 엘리먼트 7가 반복적으로 쓰였습니다. */}
      <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>
    </View>
  );
}

//텍스트가 영역을 갖고, 가운데 정렬도 하며, 테두리 스타일을 갖게 끔 하는 코드입니다.
//JSX를 마저 배우고 스타일에 대해 자세히 다루니
//걱정 안해도 좋습니다!
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  textContainer: {
    height:100,
    borderColor:'#000',
    borderWidth:1,
    borderRadius:10,
    margin:10,
  },
  textStyle: {
    textAlign:"center"
  }
});

 

  충분히 많은 엘리먼트를 복붙했고, 화면에 마지막 부분이 짤려서 보이지 않는다. 이를 다음과 같이 ScrollView를 상단에서 불러온 다음 전체 엘리먼트를 View가 아닌 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> : 대부분 앱엔 당연히 버튼이 있다. 버튼을 누르면 팝업이 뜨기도 하고, 다른 페이지로 넘어가기도 하며  이 밖의 다양한 기능들이 실행됨.

 

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"
  },
});

  Button 태그 안에 있는 문자는 title이란 속성에 값을 넣어서 구현할 수도 있고, 색상은 color 속성에 값을 넣어서 적용할 수 있다. 눌렀을 때 어떤 이벤트가 일어나게 하려면 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"
  },
});

 

  onPress에 연결한 함수 구현부를 JSX 밖에서 구현한 다음 연결할 수도 있다. 그럴 땐 화살표 함수로 구현해 함수를 만든 후 연결해야한다.

 

import React from 'react';
import { StyleSheet, Text, View, Button, Alert } from 'react-native';
export default function App() {
//화살표 함수 형식으로 함수를 정의하고
//jSX문법 안에서 사용할 수 있습니다
const customAlert = () => {
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}
        />
        {/* onPress를 누르면 속성에 바로 구현해 놓은 함수 안에 customALert함수를 두고 실행할 수 있게도 가능합니다 */}
        <Button
                style={styles.buttonStyle}
                title="버튼입니다 "
                color="#FF0000"
                onPress={()
        => {customAlert()}}
        />
    </View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
textContainer: {
height:100,
margin:10,
},
textStyle: {
textAlign:"center"
},
});

 

 

  <TouchableOpacity/> : 이 엘리먼트는 스타일을 주지 않은 이상 화면에 영향을 주지 않는 영역을 갖는다.

 

  Button 엘리먼트는 본인영역을 갖는데 스타일에도 신경써야하고 ScrollView처럼 카드형식으로 만든 경우 버튼 태그를 사용하기 어려움.

 

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"
}
});

 

 

  <Image> : 앱에 이미지를 삽입. 두가지 방식이 있다. assets 폴더에 있는 이미지를 가져와 사용하는 방식과 (import), 외부이미지 링크를 넣어 사용하는 방식(uri).

 

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>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
//혹시 미리 궁금하신 분들을 위해 언급하자면,
//justifyContent와 alignContent는 영역 안에 있는 콘텐츠들을 정렬합니다
justifyContent:"center",
alignContent:"center"
},
imageStyle: {
width:"100%",
height:"100%",
alignItems:"center",
justifyContent:"center"
}
});

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 속성 값을 그대로 넣어 적용합니다
    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 속성 : 태그에 스타일을 주는 방식 또한 리액트 네이티브에서 제공하는 StyleSheet 기능을 가져와 적용한다. 이 StyleSheet은 결국 객체(딕셔너리)를 하나 만드는데, 이쁜 옷들을 정리하는 객체다. 이 객체에 옷을 사용법대로 생성한 다음 잘 정리해두고, JSX에서 사용하면 된다. 사용 시 모든 태그에 공통적으로 있는 style 속성에 아래서 만든 객체 키값을 부여하여 적용한다.

 

 

  가장 바깥에 있는 View 태그를 보면 다음과 같이 styles 속성에 styles 객체 container 키를 연결한 것을 확인할 수 있다. <View style={styles.container}>

 

  StyleSheet : 화면을 꾸며주는 문법(아래 참고)

 

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를 배웠는데 함께 쓰이는 녀석들 덕에 꽤 애 먹었다. 자리잡은 영역의 방향 flexDirection(가로방향의 row와 세로방향의 column), 이 flexDirection과 동일한 방향으로 정렬하는 justifyContent(flex-start, center, flex-end, space-between, space-around 속성을 가짐), flexDirection과 수직(즉 반대) 방향으로 정렬하는 속성의 allignItems 등.

 

  튜터님 말씀으로는 가볍게 듣고 지금까지 배운건 기억 안 나는게 당연하며 절대 외우지말고 필요할 때 그때그때 찾아서 쓰다보면 적재적소에 용도에 맞게 익혀진다고.

 

 

 

 

2주차 끝 그리고 숙제...👾

 

 

2주차 숙제 : 어바웃 화면 만들기

 

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

export default function AboutPage(){

const aboutImage = "https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2FaboutImage.png?alt=media&token=13e1c4f6-b802-4975-9773-e305fc7475c4"

return (

<View style={styles.container}>

    <Text style={styles.title}>HI! 스파르타코딩 앱개발 반에 오신것을 환영합니다</Text>

    <View style={styles.textContainer}>

        <Image style={styles.aboutImage} source={{uri:aboutImage}} resizeMode={"cover"}/>

            <Text style={styles.desc01}>많은 내용을 간결하게 담아내려 노력했습니다!</Text>

            <Text style={styles.desc02}>꼭 완주 하셔서 꼭 여러분것으로 만들어가시길 바랍니다</Text>

            <TouchableOpacity style={styles.button}>

                <Text style={styles.buttonText}>여러분의 인스타계정</Text>

            </TouchableOpacity>

    </View>

</View>)

}


const styles = StyleSheet.create({

container: {

flex:1,

backgroundColor:"#1F266A",

alignItems:"center"

},

title: {

fontSize:30,

fontWeight:"700",

color:"#fff",

paddingLeft:30,

paddingTop:100,

paddingRight:30

},

textContainer: {

width:300,

height:500,

backgroundColor:"#fff",

marginTop:50,

borderRadius:30,

justifyContent:"center",

alignItems:"center"

},

aboutImage:{

width:150,

height:150,

borderRadius:30

},

desc01: {

textAlign:"center",

fontSize:20,

fontWeight:"700",

paddingLeft:22,

paddingRight:22


},

desc02: {

textAlign:"center",

fontSize:15,

fontWeight:"700",

padding:22

},

button:{

backgroundColor:"orange",

padding:20,

borderRadius:15

},

buttonText: {

color:"#fff",

fontSize:15,

fontWeight:"700"

}

})

 

 

 

 

끝으로.

 

  지금까지 난이도 중 가장 기운이 빠지더라. 이러나 저러나 내가 결정한건데 누굴 탓하리. 영화 인터스텔라가 떠올랐다... "우린 답을 찾을 것이다. 늘 그랬듯이."

 

LIST
저작자표시 비영리 변경금지

'Coding' 카테고리의 다른 글

[스파르타코딩클럽] APP 개발 종합반 - 4주차 개발일지  (2) 2022.11.30
[스파르타코딩클럽] APP 개발 종합반 - 3주차 개발일지  (0) 2022.11.23
[스파르타코딩클럽] WEB 개발 종합반 - 2주차 개발일지  (1) 2022.11.22
[스파르타코딩클럽] WEB개발 종합반 - 1주차 개발일지  (1) 2022.11.17
[스파르타코딩클럽] APP 개발 종합반 - 1주차 개발일지  (0) 2022.11.15

관련글

티스토리툴바