👾한번 해봄 시리즈👾 React native.js를 배워보자

👾한번 해봄 시리즈👾

=할건 따로있는데 한번 손대고싶어서 일단 찍어먹어보는 시리즈

 

------------------------------

 

1. 터미널에서 설치

npm install expo-cli --global

그 동안에 안드로이드/아이폰에서 expo go 앱을 설치해둠.

 

 

 

2. 터미널에서 실행

expo init my-app

만약 빨간색 글씨로 expo : 이 스크립트를 실행할 수 없으므로... 가 나온다면

아래 링크대로 하면 바로 됨

jy-tblog.tistory.com/8

 

그리고 blank에서 엔터

 

3. 터미널에서 폴더 바꿔주고 시작

cd my-app
npm start

npm start 눌렀는때 에러뜨면서 안되서 식겁했는데 폴더 경로 안바꿔서 그랬음^ㅗ^

 

시작하면 터미널에 큐알코드가 뜨고

웹페이지도 하나 열림!

 

 

 

4. 메트로에서 큐알코드 찍기

web 누르면 옆에 포트 몇번으로 접속하라고 알려줌.

앱 카메라로 큐알코드 찍으면 아이폰 기준 expo go에서 열기가 뜨면서 화면이 보임.

 

새로고침 방법은 그냥 작업하면서 저장누르면

실시간으로 바로바로 적용되서 보여줌.

 

안드는 컴터랑 폰 연결한뒤에 run android~눌러주면 자동으로 화면이 켜짐.

 

 

 

5. <View><Text>...

여기는 div도 없고 h1도 없나봄.

 

 

 

6. css inline으로 쓰는법

<Text style={styles.row1}>종목명</Text>

자바스크립트이기때문에 스타일조차 { }로 써주고,

styles라는 배열안에 row1라는 배열의 css를 참조하라는 뜻이 됨.

 

css는 App() 끝나고 아래처럼 배열로 써주면 됨.

const styles = StyleSheet.create({
  row1: {
    paddingTop: 5, 
    paddingBottom: 5, 
    paddingRight: 5, 
    backgroundColor: "#000", 
    flexWrap: "wrap", 
    flexDirection: "row",
  },
})

 

※ 한 요소에 css 두개 이상 중복 쓰기

<Text style={styles.row1, styles.row2}>종목명</Text>

 

※ px단위는 안쓰고, %는 " "안에 쓰기

paddingTop: 10px ---> 10

paddingTop: 10% ---> "10%"

이렇게 써야함.

 

※ css에서도 없는 단위가 존재

display: inline ---> flexDirection: "row"

이런식으로 작성해야함.

 

※ expo 강제종료

중간에 하다가 expo가 먹통이라 껐다켰는데 그뒤로 계속 앱이 강제종료되서

expo도 재설치해보고 별짓을 다해봤는데,

정말 멀쩡하게 생긴 css를 싹 지워봤더니 잘 되서..

어떤 블로그에서도 css를 지웠더니 되었다고하니 하나씩 지워보는 노가다과정이 필요한듯.

 

 

 

7. 배포

안드로이드기준으로 한다면 터미널에 아래와같이 침.

(진짜 플레이스토어용 말고 그냥 내 폰에 깔아보고싶어서 하는거라 설정이 다를수도 있음)

expo build:android

그러면 패키지 이름을 쓰라고하는데 오류가 난다면 

앱이름-example (예: myapp-example)이라고 써주면 넘어감.

 

그리고 apk, apk-bundle 중에 apk선택.

 

캡쳐한게 사라져서 기억이 잘 안나는데, expo계정과 패스워드를 치라고 하니까

가서 회원가입하고 입력하면 됨.

 

// 이부분은 다시 한번 해보고 쓰는걸로...

 

다하면 apk을 말아주는데 시간이...꽤걸린다... 라면 끓이고 와도 될정도...

 

다 되면 expo 사이트에서도 업로드가 되고,

다운로드 버튼을 통해 apk파일을 받아 설치할 수 있음.

 

왼쪽이 진짜 app이고 오른쪽이 내가 따라서 만들어본건데

일단 폰에서 apk로 실행되는데 넘 멋있었고 생각보다 굉장히 재미있었음...

앱개발 혹한다....

 

 

 

 

 

 

// react.js에서 썼던것처럼 데이터를 가져와서 map돌렸는데 안되는 이유는 아직 못찾음.