react native [1]

토이프로젝트 화면 구현을 위한 스터디

React Native (간단 요약 설명 with GPT)

1. 크로스 플랫폼 개발:
   • React Native는 iOS와 Android에서 모두 동작하는 애플리케이션을 단일 코드베이스로 개발할 수 있게 해줍니다. 이는 개발 시간과 비용을 절감할 수 있는 큰 장점입니다.
2. React 기반:
   • React Native는 React의 컴포넌트 기반 아키텍처를 사용합니다. 즉, UI를 작은 재사용 가능한 컴포넌트로 분리하여 관리합니다. React의 생태계를 활용할 수 있어 개발자에게 익숙한 환경을 제공합니다.
3. 네이티브 성능:
   • React Native는 JavaScript와 네이티브 모듈 간의 브리지(bridge)를 사용하여 네이티브 UI 구성 요소와 기능에 접근합니다. 이를 통해 네이티브 앱과 유사한 성능을 발휘할 수 있습니다.
4. Hot Reloading:
   • 개발 중에 코드 변경 사항을 즉시 반영하여 애플리케이션을 새로 고치지 않고도 변화를 실시간으로 확인할 수 있습니다. 이는 개발 속도를 크게 향상시킵니다.
5. 네이티브 모듈:
   • JavaScript로 작성된 코드와 네이티브 코드(예: Java, Swift, Objective-C) 간의 상호작용을 지원하여, 복잡한 네이티브 기능을 구현할 수 있습니다.
6. 생태계와 커뮤니티:
   • React Native는 강력한 커뮤니티와 풍부한 라이브러리 생태계를 가지고 있습니다. 많은 오픈 소스 라이브러리와 도구들이 있으며, 커뮤니티에서 제공하는 다양한 플러그인과 리소스를 활용할 수 있습니다.

요약

 

• React Native: JavaScript와 React를 사용하여 iOS와 Android에서 네이티브 애플리케이션을 개발할 수 있는 프레임워크입니다.
• 크로스 플랫폼 개발: 한 번의 코드 작성으로 두 플랫폼에서 모두 작동하는 애플리케이션을 개발할 수 있습니다.
• 네이티브 성능: 네이티브 UI 구성 요소와 기능에 접근하여 네이티브 앱과 유사한 성능을 제공합니다.
• 컴포넌트 기반: React의 컴포넌트 기반 아키텍처를 사용하여 UI를 관리합니다.

 

작업 일지

1. 안드로이드 스튜디오를 설치했는데, 내가 원하는 작업 환경은 vscode, react native 임.

2. npx react-native@latest init MyApp

 

3. .git 제거 
 모노레포 형태로 한 리포지토리에 서버, 클라이언트 프로젝트를 다 관리할 계획이므로 npx React init 하면서 생긴 .git은 제거

 

4. 프론트 작업용 브랜치 생성후 이동

 

5. 초기 디렉토리 구조

1. .bundle

이 디렉토리는 보통 React Native 개발 서버가 생성하는 번들 파일들이 저장되는 위치입니다. 이 디렉토리는 주로 개발 중에 사용되며, 배포 시에는 포함되지 않을 수 있습니다. 일반적으로, 이 디렉토리는 .gitignore 파일에 추가되어 버전 관리에서 제외됩니다.

2. .yarn

yarn을 사용하여 의존성을 관리하는 경우, .yarn 디렉토리는 Yarn의 설정 파일과 캐시를 저장합니다. 이 디렉토리는 프로젝트의 의존성을 설치하고 관리하는 데 필요한 정보를 포함합니다. yarn은 npm의 대안으로 사용되는 패키지 관리자입니다.

3. android

이 디렉토리는 Android 플랫폼을 위한 프로젝트 설정과 소스 코드가 포함되어 있습니다. React Native는 Android 네이티브 모듈과 연결하기 위해 이 디렉토리를 사용합니다. 주요 내용은 다음과 같습니다:

• app/: 실제 안드로이드 앱의 소스 코드와 리소스가 포함되어 있습니다.
• build.gradle: 안드로이드 빌드 설정 파일입니다.
• AndroidManifest.xml: 앱의 설정과 권한을 정의하는 파일입니다.

4. ios

이 디렉토리는 iOS 플랫폼을 위한 프로젝트 설정과 소스 코드가 포함되어 있습니다. iOS 네이티브 모듈과의 연결을 위한 모든 설정이 이곳에 있습니다. 주요 내용은 다음과 같습니다:

• MyApp.xcodeproj: Xcode 프로젝트 파일로, iOS 앱을 빌드하고 관리하는 데 사용됩니다.
• MyApp.xcworkspace: CocoaPods를 사용하는 경우, Xcode 작업 공간 파일입니다.
• Info.plist: 앱의 설정 정보를 포함하는 파일입니다.

5. vendor

이 디렉토리는 React Native의 네이티브 모듈, 라이브러리, 또는 종속성이 포함될 수 있는 곳입니다. 보통 React Native의 소스 코드나 외부 라이브러리를 포함할 수 있지만, 기본적으로는 프로젝트의 주요 부분은 아닙니다.

기타 중요한 파일

• App.js: React Native 앱의 기본 컴포넌트가 정의된 파일입니다.
• index.js: 앱의 진입점으로, App 컴포넌트를 등록하여 앱을 시작합니다.
• package.json: 프로젝트의 의존성과 스크립트를 정의하는 파일입니다.

 

android 디렉토리의 구성 요소

1. app/

• 역할: 이 폴더는 Android 앱의 핵심 소스 코드와 리소스가 포함된 디렉토리입니다.
• 주요 내용:
  • src/: Java 또는 Kotlin 소스 코드와 리소스 파일이 포함된 폴더입니다.
    • main/: 기본 소스 파일 및 리소스가 위치합니다.
    • java/ 또는 kotlin/: 앱의 Java 또는 Kotlin 소스 코드가 위치합니다.
    • res/: XML 레이아웃 파일, 드로어블 리소스, 문자열 리소스 등이 포함된 폴더입니다.
    • AndroidManifest.xml: 앱의 설정, 권한, 구성 등을 정의하는 파일입니다.
  • build.gradle: app 모듈의 Gradle 빌드 스크립트 파일입니다. 의존성, 빌드 설정 등을 정의합니다.

2. gradle/

• 역할: Gradle 빌드 도구의 설정 파일과 관련된 폴더입니다. Gradle은 빌드 자동화 도구로, Android 프로젝트의 빌드 과정에서 중요한 역할을 합니다.
• 주요 내용:
  • wrapper/: Gradle Wrapper의 관련 파일들이 포함된 디렉토리입니다. Gradle Wrapper는 프로젝트에 필요한 Gradle 버전을 자동으로 다운로드하고 설정하는 도구입니다.

3. build.gradle

• 역할: 프로젝트의 루트 디렉토리에 있는 build.gradle 파일로, 전체 프로젝트의 Gradle 빌드 설정을 정의합니다.
• 주요 내용:
  • 플러그인 및 의존성의 버전 설정
  • 모든 하위 모듈의 설정을 참조할 수 있는 공통 설정을 포함합니다.

4. gradle.properties

• 역할: Gradle 빌드 시스템의 설정을 정의하는 파일입니다. 이 파일에는 빌드 속성, 환경 변수, 그리고 Gradle 빌드 과정에서 필요한 설정들이 포함됩니다.
• 주요 내용:
  • 프로젝트나 사용자별로 필요한 Gradle 설정을 추가할 수 있습니다.

5. gradlew 및 gradlew.bat

• 역할: Gradle Wrapper 스크립트 파일입니다. gradlew는 Unix 기반 시스템(예: Linux, macOS)에서 사용되고, gradlew.bat는 Windows에서 사용됩니다.
• 주요 내용:
  • Gradle Wrapper를 사용하여 프로젝트의 Gradle 버전을 자동으로 다운로드하고 빌드를 실행합니다.
  • Gradle Wrapper를 사용하면 프로젝트의 Gradle 버전과 Gradle 설정이 명시적으로 관리됩니다.

6. settings.gradle

• 역할: Gradle 빌드 시스템의 설정 파일로, 프로젝트에 포함된 모듈들을 정의합니다.
• 주요 내용:
  • 프로젝트의 모듈(서브 프로젝트)을 포함시키고, 모듈 간의 의존성을 설정할 수 있습니다.

요약

• app/: 앱의 주요 소스 코드와 리소스
• gradle/: Gradle Wrapper 관련 파일
• build.gradle: 프로젝트 전체 또는 모듈의 빌드 설정
• gradle.properties: Gradle 설정 파일
• gradlew 및 gradlew.bat: Gradle Wrapper 스크립트
• settings.gradle: 프로젝트의 모듈 설정

이 구조는 Android 프로젝트가 정상적으로 빌드되고 실행될 수 있도록 필요한 모든 설정과 리소스를 제공합니다.