Realm을 활용하기 위한 Realm Helloworld!


1. 프로젝트 생성

 

npx를 이용한 react-native 프로젝트 생성

 

2. npm을 이용한 Realm 인스톨 

npm install 진행

3. ios 폴더로 들어가 pod install 진행

pod install 진행

 하지만, 위의 작업을 진행하자마자 아래와 같은 메세지가 발생했다.

 

흠.. 왜일까, 

  이와 관련된 누락사항에 대해서 하나씩 찾아보기로 했다.

 

 1. 우선 React Native 의 버전이다.

 

   만약 React Native의 버전이 v0.60보다 낮다면 react-native link realm을 처리해줘야한다. 그래서 package.json 파일을 확인했다.

 

package.json의 react-native 버전 확인

 React Native 버전의 문제가 아닌건 확실해보인다. 

 

 2. Node Modules을 삭제하고 다시한번 npm install을 진행했다. 

 

node modules 삭제 후 npm을 통한 재설치 진행

아~! 위와 같이 진행하고 난 뒤에 다시 pod install을 진행했더니 너무 잘 진행이되는 것이었다!

정상적인 pod install 결과 

위와 같이 설치 하고 난 이후, ios 폴더 내의 xcworkspace 파일을 실행했다. 

XCode 내의 RealmJS를 확인할 수 있었다. 

RealmJS 설치 후 XCode 확인

본격적으로 RealmJS를 활용하기 위한 로딩 화면이다. 

React Native를 이용한 IOS의 기본 화면

 

'알아보기' 카테고리의 다른 글

0004 Reactive Programming 2  (0) 2019.12.05
0004 Reactive Programming 1  (0) 2019.12.04
0002 Realm 활용하기 3  (0) 2019.11.22
0003 자바를 이용한 병렬 프로그래밍 1  (0) 2019.11.20
0002 Realm 활용하기 1  (0) 2019.11.20

2019년 11월 22일 기준 

 

Realm을 활용할 수 있는 가이드는 아래의 링크에 상세하게 잘나와있기 때문에 실제 개발 예제에 따라 어떤 방식으로 사용할 수 있는지 알아보려 한다. 

 

Realm Javascript 한글 공식 가이드  

 


요구사항 

  1. Lines 라는 그룹에 사용자를 화면이 로딩 될 때 추가한다. 

  2. 버튼을 이용해 추가한 사용자를 가져온다. 

  3. 중복 사용자는 저장되면 안된다. 

 

 위의 요구사항를 위해서 아래와 같이 코드를 작성해보았다. 

import React, { Component} from 'react';
import { View, Text, Button, TextInput } from 'react-native';
const Realm = require('realm');

class DBSample extends Component {
    constructor(props){
      super(props);

      this.realm = {};

      this.state = {
        formData : {
          userId : "",
          userPwd : "",
          position : ""
        }
      }

      this.createLinesSchema();

      
    }

    createLinesSchema = () => {
      const LineSchema = {
        name : 'LineUser',
        properties : {
          userId : 'string',
          userPwd : 'string',
          position : 'string?'
        }
      }

      this.realm = new Realm({schema : [ LineSchema ]});

      this.realm.write( () => {
        const LineUser = this.realm.create('LineUser', {
          userId : "admin",
          userPwd : "admin@1234"
        });

        LineUser.position = "Manager";
      });
    }
    
    searchUserData = () => {
      const cars = this.realm.objects("LineUser").filtered("userId == 'admin'");

      this.setState({ formData : cars[0]});
    }

    handleInputData = ( value, field ) => {

      let formData = this.state.formData;

      formData[field] = value;

      this.setState({ formData : formData});
    }

    render() {
      return (
        
          Home Screen
           this.props.navigation.navigate('Home')}
          />
          
           { this.handleInputData(value, "userid") } } >
           { this.handleInputData(value, "userpwd") } } >
           { this.handleInputData(value, "position") } } >
        
      );
    }
  }

export default DBSample;

 

위에서 사용된 Realm의 기본적인 함수들에 대해서 알아보면,

 

Lines 24 :

   - Realm에 등록할 Model을 설정한다. 

     우리가 데이터를 저장할 Table이라고 생각해도 되며 

   Lines 25의 name은 Realm으로 부터 Model을 꺼내 데이터를 저장, 삭제, 수정할 수 있는 Key되는 명칭이다. 

   Lines 26 부터는 Model에서 사용할 Property를 지정하는데, Table의 Field라고 생각하면 되며, Field에 지정하는 Not Null, Nullable, Default Value, Primary Key , Type 등을 지정할 수 있다. 다만 데이터 타입으로 올 수 있는 것이 좀더 확장된다고 생각해도 좋을 것 같다. 

 

Lines 34 :

   - Realm 연결하기 

    > Realm의 새로운 객체를 생성 후 반환하다. 만약 Realm 이 아예 생성되어 있지않다면 새로 생성할 것이며, 이미 존재한다면 존재하는 Realm 객체를 반환할 것이다. 

 

Lines 36 :

   - 쓰기 트랜잭션을 사용하기 위해서 callback 메서드를 제공하는데, 동기적으로 호출 된다. 

 

Lines 37 :

   -  정의한 데이터 타입과 속성에 맞는 새로운 Realm 객체를 생성한다.

 

Lines 42 : 

   - Realm 오브젝트에 대해서 업데이트를 처리한다. 

 

Lines 47 :

    - Realm 안에 등록되어 있는 type의 모든 오브젝트를 반환한다. 

    - realm.objects로 부터 시작해 데이터를 조회 하고 정렬하는 등의 다양한 작업을 지원할 수 있으며, 메서드 체인으로 호출이 가능합니다. 

 

위에서 사용된 함수들은 

 

    new Realm(config)

    write(callback)

    create(type, properties, update) -> Realm.Object

    objects(type) -> Realm.Results 

    filtered(query, arg) -> Realm.Results

 

이었다. 

 

   위의 함수들외에도 Realm에서 제공하는 Realm API Docs 에서 자세히 확인할 수 있다. 

 

'알아보기' 카테고리의 다른 글

0004 Reactive Programming 2  (0) 2019.12.05
0004 Reactive Programming 1  (0) 2019.12.04
0002 Realm 활용하기 2  (0) 2019.11.22
0003 자바를 이용한 병렬 프로그래밍 1  (0) 2019.11.20
0002 Realm 활용하기 1  (0) 2019.11.20

모바일 관련하여 개발을 진행하다보니, App DataBase로 Realm을 선정하게 되었고, 이에 대해서 좀더 자세하게 알아보고자 한다. 

 

Realm : SQLite와 Core Data의 대안으로 ORM이나 SQLite보다 더 빠른 성능을 제공한다.

 

지원 가능 언어 ( 2019년 11월 20일 현재 ) 

  • 자바 , Java
  • 스위프트 , Swift
  • 오브젝티브-C , Objective-C
  • 자바스크립트 , Javascript
  • 닷넷 : .NET

이번 블로그는 자바스크립트와 React Native를 기준을 설명하겠다. 


Realm에 대한 상세한 가이드는  https://realm.io/docs/javascript/latest/ 를 참고한다면 더욱 도움이 될 것 같다. 

 

참고로 Expo에서는 Realm를 지원하지 않는다. 따라서 

v0.60을 기준으로 ( 나는 MacBook을 이용해서 실행하였다. )

 

$ npx react-native init <project_name>

 

그후, 해당 <project_name> 폴더로 가서 

 

$ cd <project_name>

$ npm install --save realm

 

이후 ios 폴더에서 

 

$ cd ios

$ pod install 

 

위와 같이 진행하면 realm을 XCode에서 돌리기 위한 기본적인 절차는 끝이 났다.

 

위의 내용과 관련하여 이해가 안될 경우 아래의 링크를 참고하면 도움이 될 것이다.

npx, cocoapod, react-native 설치, XCode 호출에 대해서 알아보기

 

Realm의 공식 API 문서 

https://realm.io/docs/javascript/latest/api/

'알아보기' 카테고리의 다른 글

0004 Reactive Programming 2  (0) 2019.12.05
0004 Reactive Programming 1  (0) 2019.12.04
0002 Realm 활용하기 2  (0) 2019.11.22
0002 Realm 활용하기 3  (0) 2019.11.22
0003 자바를 이용한 병렬 프로그래밍 1  (0) 2019.11.20

React Native와 Realm 

 

로그인 정보를 App Data로 저장하기


로그인 정보를 App내에서 사용하기 위해서 모바일 App Database로 활용할 수 있는 다양한 App을 찾아 본 결과 

 

  • SQLite
  • Realm

크게는 SQLite 와 Realm을 주로 많이 사용하는 것으로 보이며, 이전에 SQLite로 개발했을 때 마치 RDB를 설계하는 듯한 느낌이 들어서

별로였었는데, Realm의 심플함에 반해서 Realm으로 넘어왔다. Mobile Database로 Realm을 추천하는 사례들도 많아졌기에 이번 App을 개발시에 적용해 보려한다. 

 

Realm 설치 


$ cd {React Native 프로젝트 경로}

 

$ npm insall --save realm

Realm 설치

 

$ react-native link realm

realm 연동

$ cd ios 

$ pod install

pod install 실행

 

이후 XCode를 실행시켜  Realm을 사용하는 방법을 알아보겠다.

 

 

 

Realm 사용하기 


Realm을 사용하기위한 DataBase Component 작성 

var Realm = require('realm');

const DataBase = ( props ) => {
    
    const LoginSchema = {
        name : 'Login',
        properties : {
            userId : 'string'
        }
    }

    const CategorySchema = {
        name: 'Category',
        properties: {
            categorySeqNo : 'int',
            categoryName  : 'string',
        }
    };

    const CategoryListSchema = {
        name: 'CategoryList',
        properties : {
            categoryList : { type : 'list' , objectType : 'Category' }
        }
    }

    let realm = new Realm({ schema : [LoginSchema, CategoryListSchema, CategorySchema]});

    return realm;
}

export default DataBase;

로그인의 일부 코드 

  saveUserId 함수를 보면, Realm을 이용해서 데이터를 저장하고, 가져오는 방식을 간단하게 작성해봤다.

  좀더 상세한 활용 방법 및 사용법은 https://realm.io/docs/javascript/latest/ 링크를 접속해서 확인할 수 있다. 

import React, {Component} from 'react';
import { View, Text, TextInput, StyleSheet, TouchableHighlight } from 'react-native';
import { widthPercentageToDP as wp } from 'react-native-responsive-screen';
import DataBase from '../../../components/database';

export default class LoginScreen extends Component {
    
    constructor(props) {
      super(props);
      this.state = {
        email   : '',
        password: '',
      }

      this.realm = DataBase();

      console.log(this.realm)
    }
      
    static navigationOptions = {
        header: null,
    }

    saveUserId = async userIdValue => {
      try {
        let login = this.realm.objects('Login');

        if(!login["0"].userId){
          this.realm.write(() =>{
            this.realm.create('Login', { userId :  userIdValue })
          });
        }
        
        console.log(login);
        console.log(login["0"].userId);

      } catch (error) {
        // Error retrieving data
        console.log(error.message);
      }
    }

로그인 화면에서 id를 입력하고 값을 가져오는 방법 위와 같이 작성하면, 아래와 같은 결과를 얻을 수 있었다. 

shj@lines.com을 4번을 입력하고 그 중 첫번째 userId만 가져오도록 한 결과이다. 

 

Realm에 대해서는 추후에 별도로 정리할 예정이다. 

'따라해보기' 카테고리의 다른 글

0001 React Native App 개발기 6-1  (0) 2019.12.12
0001 React Native App 개발기 5  (0) 2019.12.08
0001 React Native App 개발기 4  (0) 2019.11.22
0001 React Native App 개발기 2  (0) 2019.11.15
0001 React Native App 개발기 1  (0) 2019.11.15

+ Recent posts