[reactNative] 환경설정

프로젝트를 시작하기 위해 npx expo -h를 입력함.

근데, 아래의 에러 메세지가 뜸:

asdf-Mac:example adf$ npx expo -h
npm ERR! code EACCES
npm ERR! syscall open
npm ERR! path /Users/asdf/.npm/_cacache/tmp/b9a26f2dwfa1
npm ERR! errno -13
npm ERR! 
npm ERR! Your cache folder contains root-owned files, due to a bug in
npm ERR! previous versions of npm which has since been addressed.
npm ERR! 
npm ERR! To permanently fix this problem, please run:
npm ERR!   sudo chown -R 321:20 "/Users/asdf/.npm"

npm ERR! A complete log of this run can be found in: /Users/asdf/.npm/_logs/2024-04-11T08_41_34_707Z-debug-0.log

 

찾아보니 캐시 관련 문제로 보여 sudo cache clean --force 해주니 설치되었음.

 

이후 해당 디렉토리로 이동 후 npx expo start를 입력하니 QR코드와 주소가 나왔고 이걸 가지고 안드로이드와 ios의 expo go 앱을 통해 접속 가능했음.

 

이후 git도 homebrew를 통해 새로 설치하였으나 brew command가 not found로 나와서 아래의 블로그를 참고함:

https://hbase.tistory.com/422

M1 Pro 맥북에 Git 설치하기, Homebrew 설치하기

 

git까지 설치 완료 후 watchman을 설치함 (페북에서 만든 파일 모니터링 도구 --- 변화 발생시 특정 작업 처리 도와준다 함)

brew install watchman하면 설치됨...

 

expo를 시작하면 아래의 기본 코드가 나옴:

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! 333</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

<view>의 경우 구성요소를 담기 위한 코드고, status bar의 경우 dark, light, auto로 상태바를 조정할 수 있음.

위 예시에서 각 컴포넌트는 props라는 객체인자를 받을 수 있음 (상위 컴포넌트가 하위에 내려주는 데이터 같은 느낌),, 그리고 컴포넌트는 클래스형이 아닌 함수형을 권장함 (메모리 자원 덜 사용).