#1 React-Native

React와 React Native가 같은 건줄 알았는데 아니다.

비슷하긴 한데 React는 웹용이고 React Native 는 js나 typescript를 이용해서 작성하면 각각 네이티브 코드로 변환되어 하이브리드 앱을 만들 수 있게 해주는 것이다.

그렇다고 완전 다른건 아니고 React 동생 정도

 

< React Native 공식 문서 >

https://reactnative.dev/docs/getting-started

 

1. Mac 에 React-Native 환경 셋팅하기

dev-yakuza.github.io/ko/react-native/install-on-mac/

맥(Mac)에 react native 개발 환경 구축하기

윈도우용)

dev-yakuza.github.io/ko/react-native/install-on-windows/

윈도우(Windows)에 react native 개발 환경 구축하기

맥에서 셋팅 후 react-native run-ios 를 터미널에서 실행시켰는데 계속 same network 어쩌구 하면서 서버를 재실행시키라는 문구가 뜨고 앱 화면이 나타나지 않는 문제가 있었다.

이때 서버에 error 메시지를 확인했더니 해당 폴더에 권한이 없었고 sudo chown ~~ 로 폴더 owner를 변경했더니 정상적으로 작동했다

 

# 파일, 폴더 권한 확인하는 방법

$ ls -l  [경로]

ls : 경로에 해당하는 곳의 파일목록을 출력

-l : 파일목록을 list 형태로 출력(파일 권한, owner, group, 파일 크기, 수정일, 파일명),,,

[경로] : 현재 위치(cwd:current working directory)를 기준으로 한 상대경로 또는 절대경로를 사용

            생략하면 cwd의 내용을 출력한다.

 

파일 권한

-rwxr--r--

- 맨 앞의 한 비트는 파일 종류를 나타낸다.

(- :일반 파일, d :디렉토리,,심볼릭링크, 장치 파일,,)

뒤는 3비트씩 묶어서 순서대로 owner, group, others 의 권한을 나타낸다.

 

owner: rwx   (파일 소유자)

- read, write, execute 권한

group: r--   (그룹에 속한 사용자들의 권한)

- read 권한

others: r--  (파일 소유자도 아니고, 그룹에도 해당되지 않는 사용자)

- read 권한

 

 

2. typescript 사용할 수 있게 셋팅하기

dev-yakuza.github.io/ko/react-native/typescript/

typescript

3. styled-component 라이브러리 사용하기

dev-yakuza.github.io/ko/react-native/styled-components/

styled-components

4. 폴더 구조 정리하기

소스 코드를 ./src/ 아래에 두고 관리하기

https://csc0705.tistory.com/63

[React Native]-import 절대경로 설정 방법

dev-yakuza.github.io/ko/react-native/root-import/

RN(React Native)에서 root import하기

디렉토리 구조

Project

|-- __test__/

|-- android/

|-- ios/

|-- node_modules/

|--src/

    |-- @types/

         -- index.d.ts

    |-- App.tsx

    |-- Theme.tsx

|-- app.json

|-- babel.config.js

|-- index.js

|-- metro.config.js

|-- package-lock.json

|-- package.json

|-- tsconfig.json

 

//index.js
//import App from './App'; 에서 수정
import App from './src/App';