[Expo] Expo 기본 프로젝트 구조 분석하기
·
Frontend/ReactNative
npx create-expo-app@latest 로 생성한 Expo의 기본 프로젝트는 아래와 같은 파일 구조로 이루어져 있습니다.app앱의 기본적인 구조를 정의합니다. _layout.tsx에서는 앱에 어떤 화면(페이지)들이 존재하는지 정의합니다. 이라는 이름의 컴포넌트를 사용하는데, 이는 여러 개의 화면들을 스택으로 쌓아 보여주는 것입니다. 맨 위에 오는 요소가 제일 먼저 보이는 화면이므로, 기본 템플릿에서는 (tabs) 경로의 화면이 맨 처음 보이게 됩니다. (tabs) 화면이 사라지면, modal.tsx에서 정의한 화면이 보일 것입니다. (tabs)(tabs) 하위 경로는 탭 화면을 구현한 파일들을 모아놓은 폴더입니다.이렇게 괄호()로 묶인 이름의 폴더는 URL 경로에 포함되지 않기 때문에, 이..
[Expo] Expo 프로젝트 시작하기
·
Frontend/ReactNative
1. 프로젝트 생성npx를 통해 expo 프로젝트를 생성합니다.npx create-expo-app@latestOk to proceed?에 y로 진행하고What is your app named?에 생성할 프로젝트의 이름을 입력해줍니다.이후에는 필요한 패키지를 설치하게 됩니다.모든 패키지의 설치가 완료되면, 현재 경로에 입력한 이름의 프로젝트 폴더가 생성될 것입니다.2. 프로젝트 실행아래 명령어를 통해 프로젝트를 실행할 수 있습니다.npx expo// 또는npx expo start잠시 기다리면 이렇게 터미널에 QR코드가 나타나게 됩니다.모바일 기기에 Expo Go 앱이 설치되어 있다면, 해당 QR코드를 스캔하여 모바일 기기에서 앱을 실행시켜볼 수 있습니다.기본적으로 생성된 템플릿은 아래와 같이 Home(in..
[Expo] Expo에 대하여
·
Frontend/ReactNative
Expo는 React Native 프레임워크를 좀 더 쉽고 빠르게 사용할 수 있도록 지원해주는 오픈 소스 플랫폼(도구 모음)입니다. Expo를 사용하면 모바일 앱의 빌드와 테스트가 빨라진다는 장점이 있습니다. Expo에서 지원하는 API를 적절히 활용한다면, React Native 코드를 쓰지 않아도 대부분의 모바일 앱 기능을 구현할 수도 있습니다.Expo Go 모바일 기기에 Expo Go 앱을 설치하면 개발하던 앱을 빌드과정 없이 바로 테스트해볼 수 있습니다.Expo SDK 카메라, 파일 시스템, Push 알림, 센서, 애니메이션 등 React Native에서는 직접 네이티브 모듈을 설치해야 하는 기능을 Expo는 단일 API로 제공합니다.Expo CLI 빌드에서 부터 배포과정까지 개발과정을 보조하는 ..