React Native 초기 설정 가이드

1. 필수 프로그램 설치

• node.js 설치 (React 사용해봤으면 이미 설치되어 있음)
• JDK 설치 및 환경 변수 설정 : [참고링크]
• 안드로이드 스튜디오 설치 및 기본 설정, 환경 변수 설정 : [참고링크]
  • 안드로이드 스튜디오 설정 : New project 아무거나 생성 → 왼쪽 상단 Files 클릭 → Settings 클릭 후 <SDK Tools에서 intel x86 Emulator Accelerator(HAXM installer)> 설치되어있는지 확인하고 없으면 설치하기(선택 후 apply)

• 오른쪽 상단 Device Manager 클릭 후 + 버튼으로 가상 기기 생성
  • 가상 기기 설정 : pixel 8a → API 35

• 패키지 관리 도구 설치 : npm install --global yarn

2. 프로젝트 내려받고 실행하기

1. 깃허브 레포지토리에서 파일 내려받기
2. node-modules 설치 : yarn install
3. 안드로이드 실행 :yarn run android
4. 웹 실행 : yarn run web

3. 프로젝트 구조

• 웹에서 보이는 화면 : src/App.tsx
• 안드로이드에서 보이는 화면 : App.tsx
• icons : svg 파일
• 프로젝트 특성상 캐시를 자주 지워주면서 개발해야 좋음 - 캐시 삭제 : yarn start --reset-cache
• 작업은 전과 동일하게 src에서 하면 됨

4. 웹/안드로이드 차이

• 웹에서는 잘 동작하지만 안드로이드에서는 오류가 나는 경우, 반대의 경우에도 오류가 많으므로 주의해서 작성해야 함
• 웹에서 svg 불러올 때와 안드로이드에서 svg 불러오는 형식이 다름 (src파일에 컴포넌트를 작성해서 App.tsx에서 불러올 때도 형식이 다르면 오류가 남) → 추후 동시에 사용할 수 있는 방법을 찾거나 웹 용 컴포넌트를 따로 만드는 식으로 작성할 예정

• 웹과 안드로이드에서 적용되는 스타일 컴포넌트 형식이 다름 → 웹은 html 기반이라 작성법이 다른 것

(좌: 안드 / 우: 웹)

• 웹에서는 잘 동작하지만 안드로이드에서는 오류가 나는 경우, 반대의 경우에도 오류가 많음
• 코드 작성 방법이 다르기 때문에 안드로이드로만 개발 후 웹은 추후 생각할 예정

5. 프로젝트 화면

• 안드로이드 화면만 컴포넌트의 스타일이 적용되어 있음 (4-3에 의해)

6. 기타 참고 사이트

• https://thebook.io/080236/0001/