맛집 앱 만들기 프로젝트 Part1 프로젝트 설치 및 기본설정

프로젝트 설명

맛집을 기록하고 기록한 내용을 공유하는 앱을 만드는 프로젝트이다

그럼 프로젝트를 생성해보도록한다 프로젝트의 구조를 먼저 구상해보자

• front

  • App.tsx
  • src
    • navigation
      • AuthStackNavigator.tsx
    • screens
      • AuthHomeScreen.ts
      • LoginScreen.tsx

ReactNative에 필요한 환경 준비하기

설치 및 적용 방법 : 👉🏻리액트네이티브 기본환경구성 여기를 참고하여 하기 프로그램을 설치 및 환경설정 준비를하도록하자

• Chocolatey
• Nodejs
• Python
• React Native CLI
• JDK
• 안드로이드 스튜디오

프로젝트 만들기

(1) RN프로젝트 생성

npx react-native@latest init matzipApp

(2) 만들어진 프로젝트로 이동후 실행

npx react-native run-android

vscode 확장패키지

[react의 기본 컴포넌트 구성 기본 코드를 만들어주는 확장플러그인 사용법은 srnf 를 입력후 엔터]

• simple-front-snippets

[javascript 및 typescript 등 코드를 자동 정렬해주는 기능의 확장플러그인 설치 및 적용 방법 : 👉🏻Prittier]

• Prittier

필요 패키지 설치

[상단바 부분과 하단바 부분의 사용을 위해 navigation 패키지를 설치 ]

• npm install @react-navigation/native
• npm install react-native-screens react-native-safe-area-context

[각 페이지(스크린)으로 이동하기 위해 Stack Navigator를 설치]

• npm install @react-navigation/stack
• npm install react-native-gesture-handler
• npm install @react-native-masked-view/masked-view

추가 설정

1. [android/app/src/main/java/MainActivity.java 또는 MainActivity.kt 파일 최하단에 아래 코드 추가]

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(null)
  }

1. [android/app/src/main/java/MainActivity.java 또는 MainActivity.kt 파일 상단에 하기 import 구문 추가]

  import android.os.Bundle;

1. [index.js 파일에 하기 import 하기]

  import 'react-native-gesture-handler';