리액트 db 연동

리액트 db 연동

QA

리액트 db 연동

본문

좀전에 https://sirius7.tistory.com/101 참조하여 필요한 세팅 작업 후 정상적으로 화면이 나왔고 로그인 회원가입등 테스트 다 한 후에 로그아웃을 한 후로 .. 계속 이런 에러가 뜨네요.. 대체 왜 이런걸까요? 어디가 잘못된건지 모르겠네요.. 첨에 몇번 회원가입/로그인/등 테스트 몇 번 할 때는 오류 없었는데 로그아웃 한번 한 후에로 이러네요 ㅎㅎ;;

 

32936023_1724659376.2064.png

 

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 접속도 다 잘되거든요..

 

32936023_1724659534.7225.png

 

 

이 질문에 댓글 쓰기 :

답변 2

위는 코드 잘못은 아닌 것으로 보입니다.

다음을 확인해보세요

 

1. 현재 mysql 이 정상 구동 되고 있는지 ?

 

2. 패스워드 오류가 없는지 (위 이미지 기준으로 패스워드 쪽 문제)

 

3. 커넥트 과다로 인한, 접속 차단은 아닌지 (sql 툴은 정상 접속되고 웹만 접속 안됨)

 

-----

 

mysql 재시작 + 서버 종료 (3000포트) 

리액트가 db와 연동되는 게 아닌 백엔드가 따로 있으시지 않나요?

리액트 자체는 프론트 라이브러리인 관계로, 노드이든, php든 별도로 백엔드를 구성하셔야 합니다

답변을 작성하시기 전에 로그인 해주세요.
전체 1,543
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT