Mysql + node.js + React native 앱 로그인, 회원가입 예제입니다.
Check source in github

개발환경 구축

MYsql

node.js에서 데이터를 불러오기 위해 MYsql로 로컬 데이터베이스를 구축한다.
Mysql에서 아래 코드를 실행해 RNTest라는 데이터베이스를 만든다.

create database RNTest;
use RNTest;

RNTest안에 4개의 테이블을 만든다.

1. myinfo - TabHome MYToday에 있는 심박수, 걸음수 등등의 정보를 유저별로 저장
   

CREATE TABLE `myinfo` (
  `userEmail` varchar(30) NOT NULL,
  `heartbeat` int DEFAULT NULL,
  `walk` int NOT NULL,
  `cal` int NOT NULL,
  `today_min` int NOT NULL,
  `today_cal` int NOT NULL,
  `today_km` float NOT NULL,
  PRIMARY KEY (`userEmail`)
) CHARSET=utf8

2. raceinfo - TabHome 와 TabRaceInfo의 접수중인대회에서 불러올 정보 저장

   

CREATE TABLE `raceinfo` (
  `raceTitle` varchar(100) NOT NULL,
  `raceDate` varchar(30) DEFAULT NULL,
  `raceCity` varchar(30) DEFAULT NULL,
  `racePlace` varchar(30) DEFAULT NULL,
  `raceDetail` varchar(100) DEFAULT NULL,
  PRIMARY KEY (`raceTitle`)
) CHARSET=utf8

3. userinfo - 유저들의 로그인정보를 저장

   

CREATE TABLE `userinfo` (
  `userName` varchar(30) DEFAULT NULL,
  `userPassword` varchar(30) DEFAULT NULL,
  `userEmail` varchar(30) NOT NULL,
  `userAge` smallint DEFAULT NULL,
  PRIMARY KEY (`userEmail`)
) CHARSET=utf8

4. userrace - TabRaceInfo의 참가대회 바로가기에 불러올 정보를 유저별로 저장

   

CREATE TABLE `userrace` (
  `raceTitle` varchar(100) DEFAULT NULL,
  `userEmail` varchar(30) DEFAULT NULL,
  `raceDate` varchar(30) DEFAULT NULL,
  `raceStatus` tinyint(1) DEFAULT '1',
  KEY `userEmail` (`userEmail`),
  KEY `raceTitle` (`raceTitle`),
  CONSTRAINT `userrace_ibfk_1` FOREIGN KEY (`userEmail`) REFERENCES `userinfo` (`userEmail`) ON DELETE RESTRICT ON UPDATE CASCADE,
  CONSTRAINT `userrace_ibfk_2` FOREIGN KEY (`raceTitle`) REFERENCES `raceinfo` (`raceTitle`) ON DELETE RESTRICT ON UPDATE CASCADE
) CHARSET=utf8

node.js 서버 구축

cmd창에서 아래 명령어를 통해 node.js서버 구동에 필요한 모듈을 설치한다.

cd ReactNativeProject
cd Express_Backend
npm i

Express_Backend\src\db_config.js 파일 내용을 자신의 host, username, password, database이름으로 바꿔준다.
그 후 node app 명령어를 통해 서버를 실행한다.

React native 앱 시작

cmd창에서 아래 명령어를 통해 로그인 앱 구동에 필요한 모듈을 설치한다.

cd ReactNativeProject
cd Mobile_Frontend
npm i

Mobile_Frontend\src\user.js ServerIP에 "http://IPv4주소:4000(포트번호)" 를 입력해준다.
그 후 react-native run-android를 통해 React native 앱을 안드로이드 에뮬레이터나 컴퓨터와 연결된 안드로이드에 로드해준다.

개발버전

Express_Backend

Node.js - 16.14.0
"dependencies": {
"body-parser": "^1.18.3",
"cors": "^2.8.4",
"express": "4.17.3",
"mysql": "github:mysqljs/mysql"
}

Mobile_Frontend

"dependencies": {
"@react-native-community/async-storage": "^1.12.1",
"@react-native-community/checkbox": "^0.5.12",
"@react-native-community/masked-view": "^0.1.11",
"@react-native-picker/picker": "github:react-native-picker/picker",
"@react-navigation/bottom-tabs": "6.2.0",
"@react-navigation/drawer": "^6.3.1",
"@react-navigation/material-bottom-tabs": "^6.1.1",
"@react-navigation/native": "^6.0.8",
"@react-navigation/stack": "^6.1.1",
"axios": "^0.26.1",
"react": "17.0.2",
"react-native": "0.67.3",
"react-native-gesture-handler": "^2.3.1",
"react-native-picker-select": "8.0.4",
"react-native-reanimated": "^2.4.1",
"react-native-responsive-screen": "^1.4.2",
"react-native-safe-area-context": "^4.2.2",
"react-native-screens": "^3.13.1",
"react-native-vector-icons": "9.1.0"
},
"devDependencies": {
"@babel/core": "7.17.5",
"@babel/runtime": "7.17.2",
"@react-native-community/eslint-config": "2.0.0",
"@types/react-native-vector-icons": "^6.4.10",
"babel-jest": "26.6.3",
"eslint": "7.14.0",
"jest": "26.6.3",
"metro-react-native-babel-preset": "0.66.2",
"react-native-paper": "^4.11.2",
"react-test-renderer": "17.0.2"
},