react native - Expo 우당탕탕 입문 1

expo가 그렇게 좋대서 시작해본다.

expo 란걸로 하면 그렇게 쉽다길래 expo를 설치하려고했다.

 

node.js 는 이미 설치되어 있다. vscode의 zsh 터미널을 사용했고, 맥북의 데스크톱에 code 폴더를 만들고 안에 expo240705 라는 폴더를 만들었다

 

근데 계속 무슨 npm의 권한이 시스템에 접근하려고 한다고 뭐 expo도 안깔리고 yarn도 안깔리고 난리다. npm은 기본적으로 글로벌 패키지를 시스템 디렉토리(예: /usr/local/lib/node_modules)에 설치하려고 하는데, 여기에 일반 사용자의 쓰기 권한이 없어 문제가 생긴단다. 

mkdir ~/.npm-global

위 명령어로 홈 디렉토리에 접근권한이 이는 디렉토리를 새로 생성해주고.( 홈 디렉토리란, 사용자에게 주어진 공간. ~/ 로 나타내며 실제로는 users/nickname/ 이 위치다.

npm config set prefix '~/.npm-global'

이 명령을 하면 npm에게 "글로벌 패키지를 설치할 때 이 새 디렉토리를 사용하라"고 지시한다고 한다.

 

claude가 무슨 환경변수를 설정하고 어쩌고 했는데 그냥 쌩깠다. 다른 티스토리 보니까 그런말이 없길래. 이자식 계륵같은걸 알려주고있어

 

그리고

npm install -g yarn

하니까 잘만된다. 야호~ 원래 sudo로 할라했는데 claude가 그건 추천 안한단다.

 

계속 의존성 패키지, 의존성 어쩌구 얘기가 나와서 찾아보니

개발의존성 - '개발과정에서 꼭 필요한'

일반의존성 - '사용과정에서도 꼭 필요한' 이런 의미인거 같다.

 

npm install -g expo-cli

이걸 해줬다. expo 용 cli를 설치해주는 건가보다. 근데 cli를 분리해서 써줘야하나? expo 전용 명령어를 사용하게끔 해주는건가? 맞는거같다.

cli에서 - 와  -- 의 차이

갑자기 궁금해져서 찾아봤다. 그냥 단순히 -는 옵션명이 짧을 때 쓰고 --는 길 때 쓴단다. -g --gloabal 이고 -v --version  이겠지 그러면?

---

다시 본론으로 돌아와서, expo-cli를 깔았는데 expo 명령어가 안먹는다

npm config set prefix '~/.npm-global'

이거 때문인거 같다. 환경변수 path를 다르게 설정해주면 된다고 한다. 해보자. 근데 그전에 그냥 cli를 껐다 켰다. 근데도 안되네 슬프다

npm config set prefix '/usr/local'

이렇게 하고,

sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

이걸 하면 npm의 글로벌 설치 디렉토리의 소유권을 현재 사용자에게 부여한댄다. 했다. 운동갔다와서 다시해야지

npm install -g yarn

하니까 됐다.

npm install -g expo-cli

이것도 됐다. 오 뭐여 현재 사용 중인 expo-cli가 Node.js 버전 17 이상을 지원하지 않는다고 오류 떠서

npm uninstall -g expo-cli

npm install expo

 

했고, expo login 했는데, 또 command expo not found 떠서

sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share} 로 

관리자 권한으로 super user do change owner --recursive (유저이름 동적?반환 ) (npm 전역 설치 경로 반환)(소유권 변경할 하위 디렉토리 지정) 구조로다가 한번 해주고

 

mpm install expo

npm install -g expo-cli 또 하고 무슨 조깥은 워닝이 또뜨면서 대신 로컬 cli를 쓸려면 npx expo <command>하라는데 무서우니까 안하고, 걍 expo login 하니까 됐다!!!!!!!!!

https://velog.io/@jisoolee11/%EC%95%B1-%EA%B0%9C%EB%B0%9C-%EC%A4%80%EB%B9%84-React-native-Expo-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0

앱 개발 준비! React native & Expo 설치하기

이거 따라해야즹

 

로그인하고

expo init expo240705

blank 선택하고

cd expo240705

expo start 하니까 또  ERROR

npm uninstall -g expo-cli
npm install expo
npx expo start

하니까 되네?? 엥? 뭔 삽질을 한거지 기부니가 좋다

https://velog.io/@jisoolee11/Expo-%EA%B0%84%EB%8B%A8%ED%95%9C-%EC%95%B1-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EA%B8%B0

[Expo] 간단한 앱 페이지 만들어보기

지수님 누군지 모르겠지만 사랑해요 계속 따라할게요

 

jsx 문법을 찔끔 배워보자

 

jsx문법 밖에서는 // 로 주석, 안에서는 /**/ 로 주석

 

<View></View>

-화면의 영역을 잡아주는 엘리먼트

 

<Text></Text>

- 글을 작성하기 위한 엘리먼트

 

<Image/>

- assets 폴더에 있는 이미지를 가져와서 사용하는 import : jsimport 이미지명 from "이미지위치" / <Image source={이미지명}/}

- 외부 이미지 링크를 넣는 uri : <Image source={{uri:"이미지주소"}}/>

 

<TouchableOpacity></TouchableOpacity>

-버튼 기능 달 때 사용하는 태그

 

스타일을 주는 방법

 

리액트 네이티브의 StyleSheet 기능

import { StyleSheet } from 'react-native';

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

 

<View style={styles.container}>
  <Text style={styles.text}>Hello, World!</Text>
</View>

/*여러 스타일 결합*/
<View style={[styles.container, styles.anotherStyle]}>

/*동적 스타일링*/
<View style={[styles.base, isActive && styles.active]}>

/*플랫폼별 스타일*/
...Platform.select({
  ios: {
    backgroundColor: 'red',
  },
  android: {
    backgroundColor: 'blue',
  },
}),

 

---

진짜 얼탱이가 없는게, 그놈의 파이어베이스 연결할려고

expo install firebase 했는데 또 expo란 명령어가 존재하지 않는다고한다.

npx expo install firebase 하니까 해결됐다.

https://www.vigorously.xyz/docs/expo/expo-doc-guides-develop-an-app-with-expo/

Expo로 앱 개발하기

https://velog.io/@acwell94/%EB%B0%B0%ED%8F%AC-Google-Play-Console%EC%97%90-react-native-expo%EB%A1%9C-%EA%B0%9C%EB%B0%9C%ED%95%9C-app-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0

[배포] Google Play Console에 react native expo로 개발한 app 배포하기