Quickstart

16 분

소개

이 가이드는 새로운 프로젝트 또는 기존 프로젝트에서 Back4App을 설정하고 사용하는 데 도움을 줄 것입니다. React Native CLI를 사용합니다. Parse SDK, 앱 키로 초기화하고, Back4App에서 데이터를 저장하고 검색하기 위한 첫 번째 API 호출을 생성합니다.

전제 조건

이 튜토리얼을 완료하려면 다음이 필요합니다:

Back4App에서 앱 생성이 필요합니다.
Npm 또는 yarn이 설치되어 있어야 합니다.
Npx 패키지 러너가 설치되어 있어야 합니다.

1 - React Native 프로젝트 생성

React Native 프로젝트를 생성하는 주요 방법은 두 가지입니다: React Native CLI 와 Expo. 개발 환경과 대상 플랫폼(iOS 또는 Android)에 따라 선택하세요.

2 - 의존성 설치

리액트 네이티브 프로젝트에서 Parse Javascript SDK 및 AsyncStorage를 설치하려면 다음을 실행하세요:

npm install parse @react-native-async-storage/async-storage --save

Parse Javascript SDK - Back4app 서버와 앱을 통합하기 위해.
리액트 네이티브 Async Storage - Parse SDK를 사용하려면 AsyncStorage 핸들러가 필요합니다.

iOS의 경우, 네이티브 AsyncStorage 지원도 추가하세요:

cd ios & pod install

3 - 앱 키 가져오기

Back4App에서 앱을 만든 후, 앱 설정 > 보안 및 키 아래에서 앱 키를 찾으세요. 연결하려면 애플리케이션 ID와 JavaScript KEY가 필요합니다.

4 - Parse 초기화 및 Back4App에 연결

index.tsx를 열고 애플리케이션 ID와 JavaScript KEY로 Parse를 초기화하세요:

import Parse from 'parse/react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

// Initialize Parse only once
Parse.setAsyncStorage(AsyncStorage);
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com/';

5 - 데이터 저장 및 검색

Parse가 초기화되면, index.tsx에 두 개의 함수를 만들어 Back4App에서 데이터를 저장하고 가져오세요.

  // Function to create a new Person 
  async function createPerson() {
    setLoading(true);
    setError(null);
    
    try {
      const PersonObject = Parse.Object.extend("Person");
      const personObject = new PersonObject();
      
      personObject.set("name", "Back4App User");
      
      const result = await personObject.save();
      setResult(`Object created with ID: ${result.id}`);
      
    } catch (error) {
      setError(error instanceof Error ? error.message : 'Unknown error');
    } finally {
      setLoading(false);
    }
  }

  async function fetchPeople() {
    setLoading(true);
    setError(null);
    
    try {
      const PersonObject = Parse.Object.extend("Person");
      const query = new Parse.Query(PersonObject);
  
      const results = await query.find();
      const names = results.map(result => ({
        objectId: result.id,
        name: result.get("name"),
      }));
      
      setResult(`Fetched names: ${JSON.stringify(names, null, 2)}`);
      
    } catch (error) {
      setError(error instanceof Error ? error.message : 'Unknown error');
    } finally {
      setLoading(false);
    }
  }

6 - 앱 테스트

프로젝트의 터미널을 엽니다.
프로젝트를 실행합니다.

다음 명령어를 실행합니다: npx react-native run-android 또는 npx react-native run-ios 를 사용하여 대상 플랫폼에서 애플리케이션을 엽니다.

다음 명령어를 실행합니다: expo start, 그리고 브라우저나 장치에서 앱을 보려면 지침을 따릅니다.

문제 해결

일반적인 문제와 해결책:

메트로에서 오류가 발생했습니다: 모듈 “idb-keyval”을 파일에서 해결하는 중

해결책: metro.conf.js 파일로 가서 다음과 같이 변경합니다:

1   const { getDefaultConfig } = require("@expo/metro-config");
2   const defaultConfig = getDefaultConfig(__dirname);
3   defaultConfig.resolver.assetExts.push("cjs");
4   module.exports = defaultConfig;

모듈 ‘EventEmitter’를 해결할 수 없습니다

해결책: 파일로 가세요: node_modules\parse\lib\react-native\EventEmitter.js 이 줄을 변경합니다:

var EventEmitter = require('../../../react-native/Libraries/vendor/emitter/EventEmitter');

다음과 같이 변경합니다:

import EventEmitter from 'react-native/Libraries/vendor/emitter/EventEmitter';

같은 파일에서 EventEmitter.js, 다음 행을 변경하세요:

module.exports = EventEmitter;

이것으로:

export default EventEmitter;

바벨 문제

바벨에서 문제가 발생하는 경우, 다음과 같이 babel.config.js를 업데이트하는 것을 고려하세요:

module.exports = function (api) { api.cache(true); return { presets: ['babel-preset-expo'], plugins: [ '@babel/plugin-proposal-export-namespace-from', 'react-native-reanimated/plugin', ], }; };

다음 단계

이 가이드는 Back4App을 사용한 기본 설정 및 데이터 저장을 다룹니다. 데이터 저장, 실시간 기능, 로컬 데이터 저장, 클라우드 함수, 인증 및 파일 저장을 포함한 Parse 기능을 탐색하세요.