"summary" react native Expo

react native 조금 더 쉽게

 

조코딩 Expo  youtube 정리해봤습니다. 조코딩 잘해요!!!!

- 📱 앱 종류 소개: 네이티브, 크로스 플랫폼, 하이브리드 앱에 대한 간략한 소개
- 🤖 네이티브 앱: 안드로이드와 iOS에 특화된 앱, 각 운영체제에 맞게 개발
- 🔄 크로스 플랫폼 앱: 리액트 네이티브를 사용하여 안드로이드와 iOS 앱을 하나의 코드로 개발 가능
- 🏞️ 하이브리드 앱: 앱의 껍데기는 있지만 내부는 웹 기술(html, css, js)을 사용하는 형태

- 📲 웹뷰 앱 개요: 웹뷰 앱은 앱의 껍데기 안에 웹 페이지가 들어가는 형태, Expo로 쉽게 개발 가능
- 🛠️ 환경 설정: 노드 js, 비주얼 스튜디오 코드, 깃 설치 방법 안내
- 📝 리액트 네이티브와 Expo 설명: 리액트 네이티브는 안드로이드와 iOS를 하나의 코드로 개발 가능한 크로스 플랫폼 프레임워크, Expo는 리액트 네이티브를 더 쉽게 사용할 수 있게 한 툴

- 📱 웹뷰 앱 개발 목표: 엑스포를 사용하여 웹뷰 앱을 만들고, 스마트폰 앱 개발의 가능성 소개
- 🛠️ 개발 환경 세팅: 노드 js, 비주얼 스튜디오 코드, 깃 설치 과정 안내

- 📱 Expo 앱 설치: Expo 공식 홈페이지에서 회원 가입 후, 구글 플레이 스토어 또는 애플 앱 스토어에서 x4 앱
      다운로드 및 설치

 

- 🔄 Expo 테스트 폴더를 만들고 VS 코드로 엽니다.
- 📂 Expo 테스트 폴더에서 터미널을 열고 명령어를 실행하여 Expo 앱을 만듭니다.
- 🚀 npm 패키지를 설치하여 Expo CLI를 전역으로 설치합니다.
- 🔐 Expo 계정으로 로그인합니다.
- ⚙️ Expo CLI를 이용하여 프로젝트를 설정합니다.

- 📁 프로젝트 설정 중 my 앱 폴더로 이동합니다.
- ⚙️ 프로젝트 디렉토리에서 다양한 설정을 진행합니다.

- 📁 디렉토리 설정: eas.json 파일 수정 필요
- 📱 APK 파일 생성: 명령어를 통해 빌드 수행

- 🔄 웹뷰 앱으로 전환: 리액트 네이티브 웹뷰 라이브러리 설치 필요
- 🖥️ 웹뷰 구현: 앱. js 파일에 웹뷰 예제 코드 삽입
- 🌐 웹뷰 설정: URL 또는 HTML 코드로 웹뷰 내용 설정 가능

- 🔄 저장 및 실행: 코드 수정 후 저장하여 변경 적용 후 앱 실행
- 🔄 파일 교체: 이미지 파일을 쉽게 교체할 수 있습니다.

- 🌐 웹뷰 앱 설정: 기본 예제 대신 개인 사이트 주소를 입력하여 설정합니다.

- 🎨 앱 디자인 꾸미기: 앱 아이콘과 스플래시 이미지를 교체하여 디자인을 개선합니다.
- 🖼️ 이미지 크기 설정: 앱 아이콘은 1024x1024, 스플래시 이미지는 1280x720 크기로 설정합니다.
- 🔄 이미지 교체 방법: 이미지 파일을 교체하고 덮어쓰기를 통해 설정을 완료합니다.

- 🛠️ 스타일 설정 확인: 스타일 컨테이너를 확인하고 필요시 조정하여 오류를 해결합니다.

- 📦 빌드 명령어: 설정이 완료된 후 빌드 명령어를 사용하여 앱을 빌드합니다.

- 📲 앱 업데이트: 업데이트된 앱을 다운로드하여 설치하고, 웹뷰 앱이 정상적으로 작동하는지 확인합니다.
- ✔️ 웹뷰 앱 완성: 설정과 빌드를 통해 웹뷰 앱이 완성되어 개인 사이트를 웹뷰로 확인할 수 있습니다.

- 🎶 음악 추가: 옵션으로 앱에 음악을 추가하여 사용자 경험을 향상할 수 있습니다.

 

대충 알겠는데 자세한 내용은

https://www.youtube.com/watch?v=yjPl8Injlbw&ab_channel=%EC%A1%B0%EC%BD%94%EB%94%A9JoCoding

여기 보세요