리액트 db 연동
본문
좀전에 https://sirius7.tistory.com/101 참조하여 필요한 세팅 작업 후 정상적으로 화면이 나왔고 로그인 회원가입등 테스트 다 한 후에 로그아웃을 한 후로 .. 계속 이런 에러가 뜨네요.. 대체 왜 이런걸까요? 어디가 잘못된건지 모르겠네요.. 첨에 몇번 회원가입/로그인/등 테스트 몇 번 할 때는 오류 없었는데 로그아웃 한번 한 후에로 이러네요 ㅎㅎ;;
db.js
var mysql = require('mysql');
var db = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '1111',
database: 'board'
});
db.connect();
module.exports = db;
main.js
import { Autoplay, Pagination, Navigation } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import { useState } from 'react';
import { useEffect } from 'react';
function Login(props) {
const [id, setId] = useState("");
const [password, setPassword] = useState("");
return <>
<h2>로그인</h2>
<div className="form">
<p><input className="login" type="text" name="username" placeholder="아이디" onChange={event => {
setId(event.target.value);
}} /></p>
<p><input className="login" type="password" name="pwd" placeholder="비밀번호" onChange={event => {
setPassword(event.target.value);
}} /></p>
<p><input className="btn" type="submit" value="로그인" onClick={() => {
const userData = {
userId: id,
userPassword: password,
};
fetch("http://localhost:3001/login", { //auth 주소에서 받을 예정
method: "post", // method :통신방법
headers: { // headers: API 응답에 대한 정보를 담음
"content-type": "application/json",
},
body: JSON.stringify(userData), //userData라는 객체를 보냄
})
.then((res) => res.json())
.then((json) => {
if(json.isLogin==="True"){
props.setMode("WELCOME");
}
else {
alert(json.isLogin)
}
});
}} /></p>
</div>
<p>계정이 없으신가요? <button onClick={() => {
props.setMode("SIGNIN");
}}>회원가입</button></p>
</>
}
function Signin(props) {
const [id, setId] = useState("");
const [password, setPassword] = useState("");
const [password2, setPassword2] = useState("");
return <>
<h2>회원가입</h2>
<div className="form">
<p><input className="login" type="text" placeholder="아이디" onChange={event => {
setId(event.target.value);
}} /></p>
<p><input className="login" type="password" placeholder="비밀번호" onChange={event => {
setPassword(event.target.value);
}} /></p>
<p><input className="login" type="password" placeholder="비밀번호 확인" onChange={event => {
setPassword2(event.target.value);
}} /></p>
<p><input className="btn" type="submit" value="회원가입" onClick={() => {
const userData = {
userId: id,
userPassword: password,
userPassword2: password2,
};
fetch("http://localhost:3001/signin", { //signin 주소에서 받을 예정
method: "post", // method :통신방법
headers: { // headers: API 응답에 대한 정보를 담음
"content-type": "application/json",
},
body: JSON.stringify(userData), //userData라는 객체를 보냄
})
.then((res) => res.json())
.then((json) => {
if(json.isSuccess==="True"){
alert('회원가입이 완료되었습니다!')
props.setMode("LOGIN");
}
else{
alert(json.isSuccess)
}
});
}} /></p>
</div>
<p>로그인화면으로 돌아가기 <button onClick={() => {
props.setMode("LOGIN");
}}>로그인</button></p>
</>
}
function Main() {
const [mode, setMode] = useState("");
useEffect(() => {
fetch("http://localhost:3001/authcheck")
.then((res) => res.json())
.then((json) => {
if (json.isLogin === "True") {
setMode("WELCOME");
}
else {
setMode("LOGIN");
}
});
}, []);
let content = null;
if(mode==="LOGIN"){
content = <Login setMode={setMode}></Login>
}
else if (mode === 'SIGNIN') {
content = <Signin setMode={setMode}></Signin>
}
else if (mode === 'WELCOME') {
content = <>
<h2>메인 페이지에 오신 것을 환영합니다</h2>
<p>로그인에 성공하셨습니다.</p>
<a href="/logout">로그아웃</a>
</>
}
return (
<div className="container">
<Swiper
className="visualSwiper"
modules={[Autoplay, Navigation, Pagination]}
spaceBetween={0}
slidesPerView={2}
scrollbar={{ draggable: true }}
navigation={{ }}
pagination={{
clickable: true
}}
autoplay={{
delay: 2500,
disableOnInteraction: false,
}}
breakpoints={{
1024: {
slidesPerView: 1,
},
}}
>
<SwiperSlide>
<div className="visual">
<div className="txt">
<h1>메인 비주얼1</h1>
<p>메인 비주얼 서브 텍스트 입니다. 메인 비주얼 서브 텍스트 입니다.</p>
</div>
</div>
</SwiperSlide>
<SwiperSlide>
<div className="visual">
<div className="txt">
<h1>메인 비주얼2</h1>
<p>메인 비주얼 서브 텍스트 입니다. 메인 비주얼 서브 텍스트 입니다.</p>
</div>
</div>
</SwiperSlide>
<SwiperSlide>
<div className="visual">
<div className="txt">
<h1>메인 비주얼3</h1>
<p>메인 비주얼 서브 텍스트 입니다. 메인 비주얼 서브 텍스트 입니다.</p>
</div>
</div>
</SwiperSlide>
</Swiper>
<div className="inner">
<section className="section1">
<ul>
<li>{content}</li>
<li>컨2</li>
<li>컨3</li>
</ul>
</section>
</div>
</div>
);
}
export default Main;
로컬 db 접속도 다 잘되거든요..
답변 2
위는 코드 잘못은 아닌 것으로 보입니다.
다음을 확인해보세요
1. 현재 mysql 이 정상 구동 되고 있는지 ?
2. 패스워드 오류가 없는지 (위 이미지 기준으로 패스워드 쪽 문제)
3. 커넥트 과다로 인한, 접속 차단은 아닌지 (sql 툴은 정상 접속되고 웹만 접속 안됨)
-----
mysql 재시작 + 서버 종료 (3000포트)
리액트가 db와 연동되는 게 아닌 백엔드가 따로 있으시지 않나요?
리액트 자체는 프론트 라이브러리인 관계로, 노드이든, php든 별도로 백엔드를 구성하셔야 합니다
답변을 작성하시기 전에 로그인 해주세요.