리액트 db 연동 채택완료
웹프리죤
1년 전
조회 26,671
좀전에 https://sirius7.tistory.com/101 참조하여 필요한 세팅 작업 후 정상적으로 화면이 나왔고 로그인 회원가입등 테스트 다 한 후에 로그아웃을 한 후로 .. 계속 이런 에러가 뜨네요.. 대체 왜 이런걸까요? 어디가 잘못된건지 모르겠네요.. 첨에 몇번 회원가입/로그인/등 테스트 몇 번 할 때는 오류 없었는데 로그아웃 한번 한 후에로 이러네요 ㅎㅎ;;
http://sir.kr/data/editor/2408/32936023_1724659376.2064.png" width="490" />
db.js
</p>
<p>var mysql = require('mysql');</p>
<p>var db = mysql.createConnection({</p>
<p> host: 'localhost',</p>
<p> user: 'root',</p>
<p> password: '1111',</p>
<p> database: 'board'</p>
<p>});</p>
<p>db.connect();</p>
<p> </p>
<p>module.exports = db;</p>
<p>
main.js
</p>
<p>import { Autoplay, Pagination, Navigation } from 'swiper/modules';</p>
<p>import { Swiper, SwiperSlide } from 'swiper/react';</p>
<p>import 'swiper/css';</p>
<p>import 'swiper/css/navigation';</p>
<p>import 'swiper/css/pagination';</p>
<p> </p>
<p>import { useState } from 'react';</p>
<p>import { useEffect } from 'react';</p>
<p>
</p>
<p>function Login(props) {</p>
<p> const [id, setId] = useState("");</p>
<p> const [password, setPassword] = useState("");</p>
<p> </p>
<p> return <></p>
<p> <h2>로그인</h2></p>
<p> </p>
<p> <div className="form"></p>
<p> <p><input className="login" type="text" name="username" placeholder="아이디" onChange={event => {</p>
<p> setId(event.target.value);</p>
<p> }} /></p></p>
<p> <p><input className="login" type="password" name="pwd" placeholder="비밀번호" onChange={event => {</p>
<p> setPassword(event.target.value);</p>
<p> }} /></p></p>
<p> </p>
<p> <p><input className="btn" type="submit" value="로그인" onClick={() => {</p>
<p> const userData = {</p>
<p> userId: id,</p>
<p> userPassword: password,</p>
<p> };</p>
<p> fetch("<a href="http://localhost:3001/login"," target="_blank" rel="noopener noreferrer">http://localhost:3001/login",</a> { //auth 주소에서 받을 예정</p>
<p> method: "post", // method :통신방법</p>
<p> headers: { // headers: API 응답에 대한 정보를 담음</p>
<p> "content-type": "application/json",</p>
<p> },</p>
<p> body: JSON.stringify(userData), //userData라는 객체를 보냄</p>
<p> })</p>
<p> .then((res) => res.json())</p>
<p> .then((json) => { </p>
<p> if(json.isLogin==="True"){</p>
<p> props.setMode("WELCOME");</p>
<p> }</p>
<p> else {</p>
<p> alert(json.isLogin)</p>
<p> }</p>
<p> });</p>
<p> }} /></p></p>
<p> </div></p>
<p> </p>
<p> <p>계정이 없으신가요? <button onClick={() => {</p>
<p> props.setMode("SIGNIN");</p>
<p> }}>회원가입</button></p></p>
<p> </></p>
<p>}</p>
<p> </p>
<p> </p>
<p>function Signin(props) {</p>
<p> const [id, setId] = useState("");</p>
<p> const [password, setPassword] = useState("");</p>
<p> const [password2, setPassword2] = useState("");</p>
<p> </p>
<p> return <></p>
<p> <h2>회원가입</h2></p>
<p> </p>
<p> <div className="form"></p>
<p> <p><input className="login" type="text" placeholder="아이디" onChange={event => {</p>
<p> setId(event.target.value);</p>
<p> }} /></p></p>
<p> <p><input className="login" type="password" placeholder="비밀번호" onChange={event => {</p>
<p> setPassword(event.target.value);</p>
<p> }} /></p></p>
<p> <p><input className="login" type="password" placeholder="비밀번호 확인" onChange={event => {</p>
<p> setPassword2(event.target.value);</p>
<p> }} /></p></p>
<p> </p>
<p> <p><input className="btn" type="submit" value="회원가입" onClick={() => {</p>
<p> const userData = {</p>
<p> userId: id,</p>
<p> userPassword: password,</p>
<p> userPassword2: password2,</p>
<p> };</p>
<p> fetch("<a href="http://localhost:3001/signin"," target="_blank" rel="noopener noreferrer">http://localhost:3001/signin",</a> { //signin 주소에서 받을 예정</p>
<p> method: "post", // method :통신방법</p>
<p> headers: { // headers: API 응답에 대한 정보를 담음</p>
<p> "content-type": "application/json",</p>
<p> },</p>
<p> body: JSON.stringify(userData), //userData라는 객체를 보냄</p>
<p> })</p>
<p> .then((res) => res.json())</p>
<p> .then((json) => {</p>
<p> if(json.isSuccess==="True"){</p>
<p> alert('회원가입이 완료되었습니다!')</p>
<p> props.setMode("LOGIN");</p>
<p> }</p>
<p> else{</p>
<p> alert(json.isSuccess)</p>
<p> }</p>
<p> });</p>
<p> }} /></p></p>
<p> </div></p>
<p> </p>
<p> <p>로그인화면으로 돌아가기 <button onClick={() => {</p>
<p> props.setMode("LOGIN");</p>
<p> }}>로그인</button></p></p>
<p> </></p>
<p>}</p>
<p>
</p>
<p>function Main() {</p>
<p> </p>
<p> const [mode, setMode] = useState("");</p>
<p> </p>
<p> useEffect(() => {</p>
<p> fetch("<a href="http://localhost:3001/authcheck")" target="_blank" rel="noopener noreferrer">http://localhost:3001/authcheck")</a></p>
<p> .then((res) => res.json())</p>
<p> .then((json) => { </p>
<p> if (json.isLogin === "True") {</p>
<p> setMode("WELCOME");</p>
<p> }</p>
<p> else {</p>
<p> setMode("LOGIN");</p>
<p> }</p>
<p> });</p>
<p> }, []);</p>
<p> </p>
<p> let content = null; </p>
<p> </p>
<p> if(mode==="LOGIN"){</p>
<p> content = <Login setMode={setMode}></Login></p>
<p> }</p>
<p> else if (mode === 'SIGNIN') {</p>
<p> content = <Signin setMode={setMode}></Signin></p>
<p> }</p>
<p> else if (mode === 'WELCOME') {</p>
<p> content = <></p>
<p> <h2>메인 페이지에 오신 것을 환영합니다</h2></p>
<p> <p>로그인에 성공하셨습니다.</p></p>
<p> <a href="/logout">로그아웃</a> </p>
<p> </></p>
<p> }</p>
<p> </p>
<p> return (</p>
<p> </p>
<p> <div className="container"></p>
<p> </p>
<p> <Swiper</p>
<p> className="visualSwiper"</p>
<p> modules={[Autoplay, Navigation, Pagination]}</p>
<p> spaceBetween={0}</p>
<p> slidesPerView={2}</p>
<p> scrollbar={{ draggable: true }}</p>
<p> navigation={{ }}</p>
<p> pagination={{</p>
<p> clickable: true</p>
<p> }}</p>
<p> autoplay={{</p>
<p> delay: 2500,</p>
<p> disableOnInteraction: false,</p>
<p> }}</p>
<p> breakpoints={{</p>
<p> 1024: {</p>
<p> slidesPerView: 1,</p>
<p> },</p>
<p> }}</p>
<p> ></p>
<p> <SwiperSlide></p>
<p> <div className="visual"></p>
<p> <div className="txt"></p>
<p> <h1>메인 비주얼1</h1></p>
<p> <p>메인 비주얼 서브 텍스트 입니다. 메인 비주얼 서브 텍스트 입니다.</p></p>
<p> </div></p>
<p> </div></p>
<p> </SwiperSlide></p>
<p> <SwiperSlide></p>
<p> <div className="visual"></p>
<p> <div className="txt"></p>
<p> <h1>메인 비주얼2</h1></p>
<p> <p>메인 비주얼 서브 텍스트 입니다. 메인 비주얼 서브 텍스트 입니다.</p></p>
<p> </div></p>
<p> </div></p>
<p> </SwiperSlide></p>
<p> <SwiperSlide></p>
<p> <div className="visual"></p>
<p> <div className="txt"></p>
<p> <h1>메인 비주얼3</h1></p>
<p> <p>메인 비주얼 서브 텍스트 입니다. 메인 비주얼 서브 텍스트 입니다.</p></p>
<p> </div></p>
<p> </div></p>
<p> </SwiperSlide></p>
<p> </Swiper></p>
<p> </p>
<p> <div className="inner"></p>
<p> <section className="section1"></p>
<p> <ul></p>
<p> <li>{content}</li></p>
<p> <li>컨2</li></p>
<p> <li>컨3</li></p>
<p> </ul></p>
<p> </section></p>
<p> </div></p>
<p> </div></p>
<p> );</p>
<p>}</p>
<p> </p>
<p>export default Main;</p>
<p>
로컬 db 접속도 다 잘되거든요..
http://sir.kr/data/editor/2408/32936023_1724659534.7225.png" width="608" />
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
답변을 작성하려면 로그인이 필요합니다.
로그인