React Native expo 랑 Node.js 연결 질문드립니다.

Question

처음으로 App 개발을 공부해보고 있습니다. react native expo 를 사용해서 프론트엔드를 만들고, node 서버를 열어서 백엔드를 구현하였습니다. 그리고 이제 통합을 하려는데 막혀서 질문드립니다. 간단한 로그인 로직인데 백엔드쪽으로 요청이 보내지지않습니다. 이유가 뭘까요... 코드 첨부하겠습니다ㅜㅜ//Login/Login.jsximport React, { useState } from 'react';import { Text, View, TextInput, TouchableOpacity } from 'react-native';import { CheckBox } from 'react-native-elements';import LoginStyles from './LoginStyles';import Header from '../Header/Header';import Svg, { Path } from 'react-native-svg';import { useNavigation } from '@react-navigation/native';function Login() { const [isChecked, setIsChecked] = React.useState(false); const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const navigation = useNavigation(); const openMainScreen = async () => { // navigation.navigate('Main'); try { const response = await fetch('http://localhost:3000/login', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ user_id: username, user_pwd: password }), }); if (response.ok) { const data = await response.json(); if (data.redirect) { navigation.navigate(data.redirect); } else { console.log(data.message); } } else { console.error('서버 요청 실패'); } } catch (error) { console.error('오류 발생:', error); } }; return (

Sign In setUsername(text)} /> setPassword(text)} secureTextEntry /> setIsChecked(!isChecked)} /> Remember me Forgot password Sign in Google KaKao );}export default Login;서버쪽 코드입니다.//server/server.jsconst express = require('express');const cors = require('cors');const app = express();const port = 3000;const mysql = require('mysql2/promise');const fs = require('fs').promises;const routes = require('./routes');app.use(cors());app.use(express.json());app.use('/api', routes);app.get('/', (req, res) => { res.send('접속완');});const dbConfig = { host: '127.0.0.1', user: 'root', password: '1234', database: 'pc_management', port: 3306,};async function runSQLFile(filePath) { try { const sqlContent = await fs.readFile(filePath, 'utf-8'); const connection = await mysql.createConnection(dbConfig); await connection.execute(sqlContent); connection.end(); console.log(SQL : '${filePath}' 실행 완료); } catch (err) { console.error(SQL : '${filePath}' 실행 실패:, err); }}async function initializeDatabase() { try { console.log('-------------------------------------------------') await runSQLFile('../DB/drop_table_manager.sql'); await runSQLFile('../DB/drop_table_users.sql'); await runSQLFile('../DB/drop_table_device.sql'); await runSQLFile('../DB/create_table_manager.sql'); await runSQLFile('../DB/create_table_users.sql'); await runSQLFile('../DB/create_table_device.sql'); await runSQLFile('../DB/insert_data_manager.sql'); await runSQLFile('../DB/insert_data_users.sql'); await runSQLFile('../DB/insert_data_device.sql'); console.log('----------[ 모든 SQL 파일 실행 완료 ] -----------'); } catch (err) { console.error('에러 발생:', err); }}async function startServer() { try { await initializeDatabase(); app.listen(port, () => { console.log(>>>> 서버열림 : http://localhost:${port} <<<<); }); } catch (err) { console.error('에러 발생:', err); }}startServer();app.post('/login', async (req, res) => { console.log('POST 요청 /login 엔드포인트로 도착'); const { user_id, user_pwd } = req.body; try { const connection = await mysql.createConnection(dbConfig); const [managerRows] = await connection.execute( 'SELECT * FROM manager WHERE user_id = ? AND user_pwd = ?', [user_id, user_pwd] ); const [userRows] = await connection.execute( 'SELECT * FROM users WHERE user_id = ? AND user_pwd = ?', [user_id, user_pwd] ); connection.end(); if (managerRows.length > 0) { res.json({ redirect: '/manager_main', message: '관리자님 안녕하세요!', userInfo: managerRows[0] }); } else if (userRows.length > 0) { res.json({ redirect: '/user_main', message: ${user_id} 님 안녕하세요!, userInfo: userRows[0] }); } else { res.json({ message: '로그인 실패: 잘못된 사용자 이름 또는 비밀번호' }); } } catch (error) { console.error('데이터베이스 오류:', error); res.status(500).json({ message: '데이터베이스 오류' }); }});app.get('/manager_Main', (req, res) => { res.send('관리자 메인 페이지');});app.get('/user_Main', (req, res) => { res.send('사용자 메인 페이지');});app.get('/api/charge', async (req, res) => { try { const response = { success: true, message: '충전이 성공적으로 처리되었습니다.', }; res.json(response); } catch (error) { console.error('충전 처리 중 오류 발생:', error); res.status(500).json({ success: false, message: '충전 처리 중 오류 발생' }); }});

nextFastKaggle · Answer

에러번호를적으시오

JJJJJJJJJun · Answer

가상 rest key 사용하여 해결했습니다

React Native expo 랑 Node.js 연결 질문드립니다.

2개의 답변

Q&A 목록