[ 스파르타 / TIL ] 내일배움캠프 #43

오늘 한 것

---

• 알고리즘 문제 풀기
• React Native 시작
• Expo go 설치

 

npm을 이용한 Expo 설치

---

1. 아래의 링크로 회원 가입하기.

https://expo.dev/

Expo

 

2. 새로운 프로젝트 만들기

 

3. 프로젝트 이름 입력하기

 

4. 명령어 순서대로 설치하기

expo-cli는 쉽게 react native를 개발할 수 있도록 도움을 준다.

 

아래의 명령어를 설치를 하던 중

 npm install --global eas-cli

 

다음과 같은 에러가 났다.

npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/eas-cli'
npm ERR!  [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/eas-cli'] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'mkdir',
npm ERR!   path: '/usr/local/lib/node_modules/eas-cli'
npm ERR! }

 

해결 방법

---

'sudo'를 사용하여 명령어를 입력했더니 설치가 되었다.

sudo를 사용하는 것은 최상위 사용자로 아래의 명령어를 치면 컴퓨터 비밀번호를 입력하면 설치가 된다.

sudo npm install --global eas-cli

 

설치를 다했다면 터미널에서 code .으로 vsCode 실행.

 

 

5. login

expo에 로그인하기

expo login

 

6. 배포

eas update

 

 

App.js 기본 틀

---

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

 

 

Basic Componant 6가지

---

아래는 기초 컴포넌트들 사용 시 알게 된 것들을 기록해 두었다.

 

 

View

---

• default로 flex 박스이다.
• flex-direction이 column이다.

 

Text

---

• text는 <Text> 컴포넌트로 감싸줘야 에러가 뜨지 않는다.

<Text>style={{ fontSize: 30 }}> Hello!!</Text>

 

Image

---

웹에서는 <img src="">으로 불러온다면 React Native에서는 아래와 같이 이미지를 가져와야 한다. 

source={require('사진이름.png')}

 

ScrollView

---

Text 컴포넌트와 다르게 ScrollView에서는 'contentContainerStyle'를 사용하여 style을 입힐 수 있다.

 

<ScrollView contentContainerStyle={{ backgroundColor: green }}>
	<Text>style={{ fontSize: 30 }}> Hello!!</Text>
</ScrollView>

 

SafeAreaView

---

<SafeAreaView>를 사용하면 폰의 상단에 위치한 시간등 밑에 부터 내용들이 생기게 해 준다.

 

 

StyleSheet

---

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

export default function App() {
  return (
  // css style
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );
}

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