React Native 앱의 폴더 구조

소개

React Native는 JavaScript와 React를 사용하여 모바일 애플리케이션을 구축하기 위한 강력한 프레임워크입니다. React Native로 개발을 시작하려면 일반적인 React Native 프로젝트의 구조를 이해하는 것이 중요합니다. 각 폴더와 파일에는 특정한 목적이 있으며, 해당 역할을 알면 프로젝트를 보다 효율적으로 관리하고 탐색하는 데 도움이 됩니다. 이 글은 기본 디렉터리(루트 디렉터리, android/ 폴더, ios/ 폴더)의 내용과 목적에 초점을 맞춰 React Native 앱의 폴더 구조에 대한 포괄적인 개요를 제공합니다.

루트 디렉토리

React Native 프로젝트의 루트 디렉터리에는 프로젝트의 종속성, 구성 및 진입점을 관리하는 필수 파일과 폴더가 포함되어 있습니다.

주요 파일 및 폴더

• node_modules/: npm 또는 Yarn을 통해 설치된 모든 종속성과 하위 종속성을 포함합니다. 일반적으로 이 폴더를 직접 터치할 필요는 없습니다.
• package.json: 프로젝트 종속성, 스크립트 및 기타 메타데이터를 나열합니다. 프로젝트 종속성 및 스크립트를 관리하는 데 중요합니다.
• package-lock.json 또는 Yarn.lock: 설치된 종속성 버전을 잠그고 다양한 환경에서 일관성을 보장합니다.
• index.js: React Native 앱의 진입점으로, 일반적으로 앱의 주요 구성 요소를 등록합니다.

핵심 폴더

• android/: 기본 Android 코드를 작성하거나 수정해야 하는 경우 필요한 기본 Android 코드와 구성 파일이 포함되어 있습니다.
• ios/: 기본 iOS 코드를 작성하거나 수정하는 데 필수적인 기본 iOS 코드 및 구성 파일이 포함되어 있습니다.
• app/ 또는 src/: 구성 요소, 화면, 서비스 등 JavaScript/TypeScript 코드의 기본 폴더인 경우가 많습니다. 여기에는 대부분의 앱 코드가 있는 곳입니다.

공통 하위 폴더(app/ 또는 src/ 내부)

• 컴포넌트/: 재사용 가능한 UI 구성요소로, 앱의 다양한 부분에서 UI 요소를 구성하고 재사용하는 데 도움이 됩니다.
• 화면/: 다양한 화면이나 보기를 나타내는 구성 요소로, 탐색 및 개별 화면을 더 쉽게 관리할 수 있습니다.
• navigations/: 앱의 탐색 구조를 정의하는 데 사용되는 탐색 구성 및 구성 요소입니다.
• assets/: 모든 정적 리소스를 정리된 상태로 유지하는 이미지, 글꼴 및 기타 정적 자산입니다.
• redux/(상태 관리를 위해 Redux를 사용하는 경우): 애플리케이션의 전역 상태를 관리하기 위한 작업, 감소기 및 저장소 구성입니다.
• 스타일/: 구성요소와 화면 전반에 걸쳐 사용되는 공통 스타일로, 일관된 디자인을 유지하고 스타일 관리를 단순화합니다.

구성 및 유틸리티 파일

• .babelrc 또는 babel.config.js: Babel 구성 파일, Babel이 코드를 트랜스파일하는 방법을 정의합니다.
• .eslintrc.js: ESLint 구성 파일, 프로젝트에 대한 린팅 규칙을 설정합니다.
• .prettierrc: 더 예쁜 구성 파일, 코드 형식 지정 규칙을 구성합니다.
• metro.config.js: React Native에서 사용하는 JavaScript 번들러인 Metro 번들러에 대한 구성 파일입니다.
• .gitignore: git 저장소에서 무시할 파일과 디렉터리를 지정합니다.

안드로이드/폴더

android/ 폴더에는 Android 기기나 에뮬레이터에서 React Native 앱을 빌드하고 실행하는 데 필요한 모든 기본 Android 코드와 구성 파일이 포함되어 있습니다.

주요 파일 및 폴더

• build.gradle: 모든 하위 프로젝트/모듈에 공통적인 구성 옵션을 추가할 수 있는 최상위 빌드 파일입니다.
• gradle.properties: Gradle 빌드 시스템의 구성 속성
• gradlew 및 gradlew.bat: 각각 Unix 기반 시스템과 Windows 시스템에서 Gradle 명령을 실행하는 스크립트.
• settings.gradle: 프로젝트가 의존할 수 있는 외부 라이브러리나 추가 모듈을 포함하여 프로젝트의 모듈을 지정합니다.

하위 폴더

앱/

• build.gradle: 앱과 관련된 구성 및 종속성을 포함하는 앱 모듈용 빌드 파일입니다.
• src/: 앱의 Android 부분에 대한 소스 코드가 포함되어 있습니다.
  • 메인/:
  • AndroidManifest.xml: Android 빌드 도구, Android 운영 체제 및 Google Play에 앱에 대한 필수 정보를 설명합니다.
  • java/: 앱의 진입점인 MainActivity.java 또는 MainActivity.kt를 비롯한 Java 또는 Kotlin 소스 파일이 포함되어 있습니다.
  • res/: 레이아웃, 드로어블 파일(이미지), 문자열, 앱에서 사용하는 기타 XML 파일과 같은 앱 리소스가 포함되어 있습니다.
  • assets/: 글꼴이나 기타 바이너리 파일 등 앱에 필요한 원시 자산 파일을 저장합니다.
  • jniLibs/: 앱이 의존하는 사전 컴파일된 네이티브 라이브러리(.so 파일)가 포함되어 있습니다.

그래들/

• wrapper/: Gradle 빌드 시스템에 도움이 되는 파일이 포함되어 있습니다.
  • gradle-wrapper.jar: Gradle 래퍼용 JAR 파일로, 사용자가 Gradle을 설치하지 않고도 프로젝트를 빌드할 수 있습니다.
  • gradle-wrapper.properties: 사용할 Gradle 버전과 기타 속성을 지정합니다.

iOS/폴더

ios/ 폴더에는 iOS 기기나 시뮬레이터에서 React Native 앱을 빌드하고 실행하는 데 필요한 모든 기본 iOS 코드와 구성 파일이 포함되어 있습니다.

주요 파일 및 폴더

• Podfile: CocoaPods에서 관리하는 React Native 앱의 iOS 부분에 대한 종속성을 지정합니다.
• Podfile.lock: Podfile에 지정된 종속성 버전을 잠가서 다양한 환경에서 일관성을 보장합니다.
• .xcworkspace: Xcode에서 프로젝트를 여는 데 사용하는 CocoaPods에서 생성된 작업 공간 파일입니다.
• .xcodeproj: 앱의 프로젝트 설정 및 정보가 포함된 Xcode 프로젝트 파일.

하위 폴더

<프로젝트 이름>/

• AppDelegate.m 또는 AppDelegate.swift: iOS 앱의 진입점인 애플리케이션 수준 이벤트 및 상태를 관리합니다.
• Info.plist: 번들 식별자, 앱 이름, 권한, 기타 설정 등 앱에 대한 구성 정보가 포함되어 있습니다.
• Assets.xcassets/: 앱의 이미지와 아이콘 자산을 포함합니다.
• Base.lproj/: 메인 스토리보드 또는 시작 화면 파일(LaunchScreen.storyboard)이 포함되어 있습니다.
• main.m 또는 main.swift: 앱의 기본 진입점으로, 애플리케이션 개체와 애플리케이션 위임을 설정합니다.
• 지원 파일/: 자격 및 브리징 헤더(Swift를 사용하는 경우)와 같은 추가 리소스 및 구성이 포함되어 있습니다.

결론

효율적인 프로젝트 관리 및 개발을 위해서는 React Native 앱의 폴더 구조를 이해하는 것이 중요합니다. 각 폴더와 파일에는 종속성 및 구성 관리부터 Android 및 iOS 플랫폼 모두에 대한 코드 및 리소스 포함에 이르기까지 특정 역할이 있습니다.

위 내용은 React Native 앱의 폴더 구조의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!