내배캠 2022.12.30

React-Native 시작하기

expo go에서 create new project 한다

 

내 컴퓨터에서 넣어야하는 명령어

npm install --global eas-cli

npx create expo-app 파일명

eas init --id 숫자숫자

npm start

 

 

a를 눌러서 amulator가 뜨지 않고 저런 오류가 떴다. a를 누르는게 아닌가?

 

Android SDK라는것이 아예 다운 받아져 있지 않아서 그 안에 있는 adb도 없다는 내용인 것 같다.

 

Android SDK란?

안드로이드 SDK는 포괄적인 개발 도구를 포함하는 소프트웨어 개발 키트이다.

여기에는 디버거, 라이브러리, QEMU 기반 핸드셋 에뮬레이터, 설명서, 샘플 코드 및 튜토리얼이 포함된다. 

 

adbAndroid 디버그 브리지

안드로이드 기반 기기들의 디버깅에 사용되는 프로그래밍 도구이다.

 

Android Studio를 깔면 adb가 포함된 SDK도 깔리는 것 같다.

 

그 후 expo start 하고 다시 a를 눌렀는데

emulator가 자동으로 시작되지 않는다고 한다. 그래서 android studio에 들어가서 Virtual Device manager에 들어가서 제일 위에 이미 만들어져 있는 emulator를 실행했다. 그 후 다시 실행하니까 몇번 오류가 나다가 수동으로 url 주소 넣는 곳에

exp://192.168.219.102:19000 이런 식으로 붙여넣으니까 실행이 되었다.

 

아 그냥 폰으로 바로 틀면 되는 거였넹... 나 왜 에뮬레이터 켤려고 고생한거지

 

eas update 하면 github에 push 하는 것 처럼 expo 사이트에 내용을 올릴 수 있다.

 

<View> = <div>

<Text> = <p>

 

<View>안에 글자 넣으려면 <Text> 태그 꼭 넣어야한다.

style은 기본 flex가 적용되어 있어서 display: flex를 써줄 필요없고, flexdirection은 웹은 row가 기본인데 여기서는 기본이 column이다. 

 

<Image> = <img>

source = src

로컬에 있는 이미지를 가져올 때 require을 써야한다.

  <Image source={require("./assets/adaptive-icon.png")}/>

절대경로를 가져올 때는 uri:를 쓰고 중괄호를 하나더 넣는다.

 <Image
          style={{ width: 200, height: 200 }}
          source={{
            uri: "https://dimg.donga.com/ugc/CDB/WEEKLY/Article/62/ec/82/7b/62ec827b07b9d2738276.jpg",
          }}

 <TextInput> = <input>

웹처럼 바로 보이지 않고 배경 색을 넣어야 구분이 된다.

 

onChange = onChangeText

 

useState와 함께 이용할 때 다르다.

onChange = {(e)=> setState(e.target.value)}

onChangeText = {setState} // 바로 이렇게 써주거나

 

const conChangeText = (text) => {setState(text)}

onChangeText= {onChangeText}// 위 처럼 선언 후에 넣어줄 수 있다.

이벤트 객체는 브라우저에만 있는 것이라 쓰지 않는다. 

 

웹은 내용이 화면을 넘어가면 자동으로 스크롤이 들어가는데

네이티브는 설정을 명확히 <ScrollView>태그를 넣어야하고 style이 아니라 contentContainerStyle을 써준다.

근데 나는 튜터님과 똑같이 backgroundColor을 넣었는데 적용이 되지 않았다. 왜지

 

   <ScrollView contentContainerStyle={{ backgroundColor: "purple" }}>

안에 들어 간 view들을 다 지워주니까 scrollview의 style이 적용되었다. 이미 적용되어있던 style 때문인 것 같다.

 

그리고 SafeAreaView를 넣었는데 노치 부분에 넘어가는 것을 막아주는 태그로 알고 있는데, View 만 넣어고 Android에서는 안 넘어가는 것 같다. 그리고 ScrollView를 넣어서 스크롤 시작하면 노치부분으로 다 넘어가서 무슨 의미가 있는가 싶다.

SafeAreaView 적용안됌

 

Error: Unable to resolve module ./debugger-ui/debuggerWorker.aca173c4 from C:\Users\Seon\Desktop\baeum\React-Native\rn-day1/.:

 

갑자기 오류가 계속 떴다. 

디버깅 툴이 없다는 건가 ...구글링 ㄱ ㄱ

https://ninedc.tistory.com/entry/React-Native-%EC%95%B1-%EA%B0%9C%EB%B0%9C-%EB%94%94%EB%B2%84%EA%B9%85-%ED%99%98%EA%B2%BD-%EC%84%A4%EC%A0%95

 

npm install --save @react-native-community/cli-debugger-ui

을 해주면 된다고 한다.

근데 이거를 깔고나서 오류가 나고 expo 앱이 계속 꺼진다 .

 

style 넣는 방식

 

inline styling

 <TextInput style={{ width: "100%", backgroundColor: "blue" }}/>

 

StyleSheet

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

숫자 넣을 때 단위가 픽셀인 경우 숫자만 적어줄 수 있다. 

<Text style={{ fontSize: 40 }}>

<Text style={{ fontSize: "40px" }}>

 

Tailwind는 bootstrap 같은 것 

onClick 대신에 onPress를 이용하자