[리액트] react - mysql 연동 시, localhost 연결 거부가 발생합니다

Question

현재 리액트를 통해 mysql 에 있는 데이터를 받아오려고 합니다. 서버와 mysql 연동을 테스트 해봤을 때에는 데이터가 정상적으로 삽입되는 등 제대로 작동하는 것으로 보입니다. 그러나 App.js 에서 서버로 데이터를 넘겨주는 구문을 실행하기만 하면, ERR_CONNECTION_REFUSED 에러가 발생하면서 통신 자체가 이루어지지 않습니다. 글 아랫 부분에 제가 시도한 방식을 서술해 놓았습니다. 코드와 함께 어떻게 시도해보았는지 확인해보시면 좋을 것 같습니다! [설치한 패키지]현재 서버에서는 npm을 이용하여 nodemon, express, mysql,body-parser을 설치한 상태이고,프론트 부분에는 npm을 이용하여 axios 를 설치한 상태입니다. [구현하려고 하는 사항]프론트 부분에서 input태그로 데이터를 입력해주면, 그 값을 http://localhost:3001/api/insert 로 넘긴 뒤, mysql에다 저장해주는 방식으로 구현하고자 합니다. [디렉토리 구조 및 소스코드]우선 디렉토리 구조와 주요 소스 코드는 아래와 같습니다. server/package.json// server/package.json 전문 { "name": "server", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "node index.js", "devStart": "nodemon index.js", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "body-parser": "^1.20.0", "cors": "^2.8.5", "express": "^4.18.1", "mysql": "^2.18.1", "nodemon": "^2.0.16" } } server/index.js// server/index.js const express = require("express"); const bodyParser = require("body-parser"); const app = express(); // const cors = require("cors"); const mysql = require("mysql"); const db = mysql.createPool({ host: "localhost", user: "유저명", password: "비번", database: "test_database", }); // app.use(cors); app.use(bodyParser.urlencoded({ extended: true })); const port = 3001; app.get("/api/insert", (req, res) => { const mname = req.body.mname; const mreview = req.body.mreview; const sqlInsert = "INSERT INTO movie_reviews(mname, mreview) VALUES(?,?);"; db.query(sqlInsert, [mname, mreview], (err, result) => { res.send("hello wang"); console.log(result); }); }); app.listen(port, () => { console.log(`http://localhost:${port}/`); }); movie/App.js// movie/App.js import { useState } from "react"; import Axios from "axios"; function App() { const [movieName, setMovieName] = useState(""); const [review, setReview] = useState(""); const onSubmit = () => { Axios.post("http://localhost:3001/api/insert", { mname: movieName, mreview: review, }).then(() => { alert("success!"); }); }; return (

{ setMovieName(e.target.value); }} /> { setReview(e.target.value); }} />

); } export default App; [시도 방식 1]1.server 디렉토리에서 서버 실행 (명령어 : npm devStart)(포트 3001) // server/package.json 일부 "scripts": { "start": "node index.js", "devStart": "nodemon index.js", "test": "echo \"Error: no test specified\" && exit 1" }, 2. http://localhost:3001/ 에서 http://localhost:3000/ 로 , 브라우저 url창의 값을 직접 변경하여 프론트 화면으로 넘어가고자 함. => 이 부분 자체가 진행되지 않음. 이 -> 유튜브 동영상 과 동일하게 진행 중인데, 10:21 부분을 보면, url만 변경했는데도 바로 App.js화면으로 넘어가게 됩니다. 그러나 저는 이 부분에서 이 화면이 등장하며 넘어가지 않고 있습니다. [시도 방법 2] movie 디렉토리로 이동하여 npm run start 실행하였습니다. 그 후, insert 버튼을 눌러서 서버로 데이터를 넘기는 기능을 수행하면 이런 오류가 나타납니다. 기반 지식이 부족해 이렇게 하는지 잘 모르는 부분이 큰 것 같습니다. 일단 이걸 기반으로 과제를 해야 하는데, 첫 단추가 꿰어지지 않아 굉장히 막막합니다... 혹시 해결 방식을 아시거나 올바른 수행 방식을 아신다면 꼭 답변해주시면 감사하겠습니다. 혹시 올려 놓은 자료 중에 더 필요한 내용이 있다면 바로 첨부하겠습니다. 답변주시면 정말 감사하겠습니다.

인성 절구로 빻음 · Accepted Answer

vscode로 개발중이신것같은데 터미널 창 하나 추가로 열어서 두개 동시에 실행시키셔야해요

인성 절구로 빻음 · Answer

서버랑 react랑 둘다 동시에 띄워보신거죠....?

초리조 · Answer

앗... 동시에 띄우는 방법을 잘 모르겠습니다. 둘중하나를 background로 실행해야 하는 건가요? 일단 찾아보고 있습니다!!

초리조 · Answer

다른 프로젝트 만들어서 시도해본 것 중에, concurrently를 이용해서 시도해보긴 했습니다. 아래와 같은 결과가 나오는데, 이것도 마찬가지로 url 변경만으로 front 와 server를 전환할 수는 없었습니다. ㅠㅠ둘 중 하나는 로딩이 계속 걸리는 모습입니다.

초리조 · Answer

허허 두 개 띄우니까 되는 것 같아요..! 정말 감사합니다!!!

[리액트] react - mysql 연동 시, localhost 연결 거부가 발생합니다

5개의 답변

Q&A 목록