[헬스 다이어리 앱 개발] 2편 - 로그인 화면 만들기 & React-Native-Paper 적용하기

보기 좋은 떡이 먹기도 좋다고, React-Native-Paper을 이용해 앱을 예쁘게 꾸며주고 로그인 화면을 만들어보자.

 

 

React-Native-Paper 적용

Home · React Native Paper

React-Native-Paper는 리액트 네이티브용 디자인 라이브러리다.

paper에 있는 예쁜 컴포넌트들을 사용해 헬스 어플을 좀 세련되게 만들어 보자.

위의 사이트에 들어가면 친절하게 어떻게 설치하고 사용하는지가 나와 있다.

 

아래의 명령어를 이용해 paper을 설치하자.

$ yarn add react-native-paper

 

아이디와 비밀번호를 입력하는 인풋필드는 TextInput 컴포넌트를 로그인 버튼은 Button 컴포넌트를 사용했다.

문서에 props로 컴포넌트에 기능을 추가할 수 있는 방법이 자세히 나와 있으니 사용하기 전에 꼭 한번 읽어보자.

 

로그인 화면

paper을 이용해 로그인 화면을 만들었다.

일단 로그인 버튼을 클릭하면 console창에 입력한 id와 password를 출력하도록 했다.

 

간단하게 서버를 만들어 아이디와 비밀번호를 전송해보자.

 

 

Express.js로 서버 구축

아이디와 비밀번호를 받고 로그인을 처리할 서버를 Node.js의 Express.js로 간단히 구현해보자.

 

Express - Node.js web application framework

 

 

디렉토리를 생성한다음, npm init으로 Node.js의 새 프로젝트를 시작하고 Express.js를 설치했다.

$ mkdir health-diary-server
$ cd health-diary-server
$ npm init
$ npm install express

 

아래처럼 잘 설치된 것을 확인할 수 있다.

 

 

express 설치

 

CORS 처리를 위한 CORS 패키지도 설치해준다.

$ npm install cors

 

index.js 파일을 만들어 실행시킬 서버 파일을 만든다.

const express = require('express')
const cors = require('cors');
const app = express()
const port = 8000

app.use(cors());
app.use(express.json());

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.post('/sign-in', (req, res) => {
  res.json({
    success: true,
    body: req.body
  })
})

app.listen(port, () => {
  console.log(`Health-Diary-Server start on port ${port}`)
})

 

서버를 실행시킨다.

$ node index.js

 

localhost:8000에 접속하니 서버가 잘 실행된 것을 볼 수 있다.

 

아직 DB가 없기 때문에 저장된 유저 정보도 없어서, 앱에서 보낸 아이디와 비밀번호가 올바른지 체크할 수 없다.

따라서 일단 모든 로그인 요청에 성공했다고 응답하자.

서버를 구축했다면, APP에 서버와 통신하는 기능을 만들어보자.

 

 

Axios로 서버와 통신

Axios

 

axios는 HTTP 통신을 도와주는 자바스크립트 라이브러리다.

axios를 설치하고 HTTP 통신용 모듈을 만들었다.

import axios from "axios"

const serverApi = "http://localhost:8000"

const apiHelper = ({ url: url, method: method, body: body = null }) => {
  return axios[method](serverApi + url, body)
    .then(function (res) {
      return res
    })
    .catch(function (err) {
      console.log(err)
    })
}

export default apiHelper

 

로그인 버튼을 클릭하면 위에서 만든 apiHelper로 서버에 아이디와 비밀번호를 보내고 결과를 콘솔에 출력하도록 하였다.

지금까지 만든 SignIn 컴포넌트다.

import * as React from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { TextInput, Button } from 'react-native-paper';
import apiHelper from '../module/apiHelper'

export default function SignIn() {
  const [userId, setUserId] = React.useState("");
  const [password, setPassword] = React.useState("");

  const signIn = async ({ userId: userId, password: password }) => {
    const url = '/sign-in'
    const method = 'post'
    const body = {
      userId: userId,
      password: password
    }
    const res = await apiHelper({ url: url, method: method, body: body })
    if (res?.data?.success) {
      console.log(res.data)
    }
  }

  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <TextInput
        mode="outlined"
        label="아이디"
        value={userId}
        onChangeText={userId => setUserId(userId)}
        style={styles.input}
      />
      <TextInput
        mode="outlined"
        label="비밀번호"
        value={password}
        onChangeText={password => setPassword(password)}
        style={styles.input}
        secureTextEntry={true}
      />
      <Button icon="login" mode="contained" onPress={() => signIn({ userId: userId, password: password })}>
        로그인
      </Button>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  input: {
    width: '200px',
    marginBottom: '25px',
  }
});

 

로컬에서 테스트했을 때 잘 작동하는 것을 확인할 수 있다.

axios로 서버와 연결

 

 

다음은 로그인 버튼을 누르면 홈화면으로 이동하는 것을 만들어보자.