-
질문 & 답변
카테고리
-
세부 분야
데브옵스 · 인프라
-
해결 여부
미해결
axios 통신에서 문제가 생기는 것 같은데 정확히 파악하질 못하고 있습니다.
22.08.26 18:16 작성 조회수 896
0
강의 잘 듣고 있습니다.
그런데 계속 이렇게 axios 통신을 못하고 있더라구요...
backend/server.js 파일은 강의를 보면서 그대로 진행했고
올려주신 깃허브 코드와도 비교를 했습니다.
근데 왜 안되는건지 모르겠네요...
backend/server.js
// 필요한 모듈들을 가져오기
const express = require("express");
const bodyParser = require('body-parser');
const db = require('./db');
// Express 서버를 생성
const app = express();
// json 형태로 오는 요청의 본문을 해석해줄 수 있게 등록
app.use(express.urlencoded({ extended: true }));
// 테이블 생성하기
db.pool.query(`CREATE TABLE lists (
id INTEGER AUTO_INCREMENT,
value TEXT,
PRIMARY KEY (id)
)`, (err, results, fileds) => {
console.log('results', results)
})
//DB lists 테이블에 있는 모든 데이터를 프론트 서베에 보내주기
app.get('/api/values', function (req, res) {
//데이테베이스에서 모든 정보 가져오기
db.pool.query('SELECT * FROM lists;',
(err, results, fileds) => {
if (err)
return res.status(500).send(err)
else
return res.json(results)
})
})
// 클라이언트에서 입력한 값을 데이터베이스 lists 테이블에 넣어주기
app.post('/api/value', function(req, res, next) {
// 데이터베이스에 값 넣어주기
db.pool.query(`INSERT INTO lists (value) VALUES("${req.body.value}")`,
(err, results, fileds) => {
if(err)
return res.status(500).send(err);
else
return res.json({ success: true, value: req.body.value });
})
})
app.listen(5000, () => {
console.log('애플리케이션이 5000번 포트에서 시작되었습니다.')
})backend/db.js
const mysql = require("mysql");
const pool = mysql.createPool({
connectionLimit: 10,
host: 'mysql',
user: 'root',
password: 'johnahn',
database: 'myapp'
});
exports.pool = pool;frontend/src/App.js
import React, { useState, useEffect } from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';
function App() {
useEffect(() => {
// 여기서 데이터베이스에 있는 값을 가져온다.
axios.get('/api/values')
.then(response => {
console.log('test')
console.log('response', response)
setLists(response.data)
})
}, [])
const [lists, setLists] = useState([])
const [value, setValue] = useState("")
const changeHandler = (event) => {
setValue(event.currentTarget.value)
}
const submitHandler = (event) => {
event.preventDefault();
axios.post('/api/value', { value: value })
.then(response => {
if(response.data.success) {
console.log('response', response)
setLists([...lists, response.data])
setValue("");
} else {
alert('값을 DB에 넣는 데에 실패했습니다.')
}
})
}
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<div className="container">
{lists && lists.map((list, index) => (
<li key={index}>{list.value}</li>
))}
<form className="example" onSubmit={submitHandler}>
<input
type="text"
placeholder="입력해주셔요~~~"
onChange={changeHandler}
value={value}
/>
<button type="submit">확인</button>
</form>
</div>
</header>
</div>
);
}
export default App;각각의 소스 파일은 이런 상태인데
혹시나 어떤 부분이 문제인지 확인해 주시면 좋을거 같습니다
답변을 작성해보세요.
0
John Ahn
지식공유자2022.08.27
안녕하세요
현재 프론트에서 요청응 보내면 백엔드 서버에서 에러가 나고 있습니다.
그래서 백엔드 서버에 로그를 살펴봐주시면 감사하겠습니다.
그래도 문제가 잘모르시겠다면 그 백엔드 서버 로그랑 같이 올려주시면 감사하겠습니다.
감사합니다.
Fightest
질문자2022.08.28
app_mysql | 2022-08-27 17:25:59+00:00 [Note] [Entrypoint]: Entrypoint script for MySQL Server 5.7.39-1.el7 started.
app_mysql | 2022-08-27 17:26:00+00:00 [Note] [Entrypoint]: Switching to dedicated user 'mysql'
app_mysql | 2022-08-27 17:26:00+00:00 [Note] [Entrypoint]: Entrypoint script for MySQL Server 5.7.39-1.el7 started.
app_mysql | 2022-08-27 17:26:01+00:00 [Note] [Entrypoint]: Initializing database files
app_mysql | 2022-08-27T17:26:01.146878Z 0 [Warning] TIMESTAMP with implicit DEFAULT value is deprecated. Please use --explicit_defaults_for_timestamp server option (see documentation for more details).
app_mysql | 2022-08-27T17:26:01.152042Z 0 [ERROR] --initialize specified but the data directory has files in it. Aborting.
app_mysql | 2022-08-27T17:26:01.152177Z 0 [ERROR] Aborting
app_mysql |
app_backend |
app_backend | > backend@1.0.0 dev
app_backend | > nodemon server.js
app_backend |
app_backend | [nodemon] 2.0.19
app_backend | [nodemon] to restart at any time, enter rs
app_backend | [nodemon] watching path(s): .
app_backend | [nodemon] watching extensions: js,mjs,json
app_backend | [nodemon] starting node server.js
frontend_1 |
frontend_1 | > frontend@0.1.0 start
frontend_1 | > react-scripts start
frontend_1 |
nginx_1 | /docker-entrypoint.sh: /docker-entrypoint.d/ is not empty, will attempt to perform configuration
nginx_1 | /docker-entrypoint.sh: Looking for shell scripts in /docker-entrypoint.d/
nginx_1 | /docker-entrypoint.sh: Launching /docker-entrypoint.d/10-listen-on-ipv6-by-default.sh
nginx_1 | 10-listen-on-ipv6-by-default.sh: info: Getting the checksum of /etc/nginx/conf.d/default.conf
nginx_1 | 10-listen-on-ipv6-by-default.sh: info: /etc/nginx/conf.d/default.conf differs from the packaged version
nginx_1 | /docker-entrypoint.sh: Launching /docker-entrypoint.d/20-envsubst-on-templates.sh
nginx_1 | /docker-entrypoint.sh: Launching /docker-entrypoint.d/30-tune-worker-processes.sh
nginx_1 | /docker-entrypoint.sh: Configuration complete; ready for start up
nginx_1 | 2022/08/27 17:26:01 [notice] 1#1: using the "epoll" event method
nginx_1 | 2022/08/27 17:26:01 [notice] 1#1: nginx/1.23.1
nginx_1 | 2022/08/27 17:26:01 [notice] 1#1: built by gcc 10.2.1 20210110 (Debian 10.2.1-6)
nginx_1 | 2022/08/27 17:26:01 [notice] 1#1: OS: Linux 5.10.25-linuxkit
nginx_1 | 2022/08/27 17:26:01 [notice] 1#1: getrlimit(RLIMIT_NOFILE): 1048576:1048576
nginx_1 | 2022/08/27 17:26:01 [notice] 1#1: start worker processes
nginx_1 | 2022/08/27 17:26:01 [notice] 1#1: start worker process 31
nginx_1 | 2022/08/27 17:26:01 [notice] 1#1: start worker process 32
nginx_1 | 2022/08/27 17:26:01 [notice] 1#1: start worker process 33
nginx_1 | 2022/08/27 17:26:01 [notice] 1#1: start worker process 34
app_backend | 애플리케이션이 5000번 포트에서 시작되었습니다.
app_backend | 5000
app_backend | results undefined
app_mysql exited with code 1
frontend_1 | (node:27) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
frontend_1 | (Use node --trace-deprecation ... to show where the warning was created)
frontend_1 | (node:27) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
frontend_1 | Starting the development server...
frontend_1 |
frontend_1 | Compiled successfully!
frontend_1 |
frontend_1 | You can now view frontend in the browser.
frontend_1 |
frontend_1 | Local: http://localhost:3000
frontend_1 | On Your Network: http://172.18.0.4:3000
frontend_1 |
frontend_1 | Note that the development build is not optimized.
frontend_1 | To create a production build, use npm run build.
frontend_1 |
frontend_1 | webpack compiled successfully
app_mysql | 2022-08-27 17:26:14+00:00 [Note] [Entrypoint]: Switching to dedicated user 'mysql'
app_mysql | 2022-08-27 17:26:14+00:00 [Note] [Entrypoint]: Entrypoint script for MySQL Server 5.7.39-1.el7 started.
app_mysql | 2022-08-27 17:26:15+00:00 [Note] [Entrypoint]: Initializing database files
app_mysql | 2022-08-27T17:26:15.534241Z 0 [Warning] TIMESTAMP with implicit DEFAULT value is deprecated. Please use --explicit_defaults_for_timestamp server option (see documentation for more details).
app_mysql | 2022-08-27T17:26:15.541433Z 0 [ERROR] --initialize specified but the data directory has files in it. Aborting.
app_mysql | 2022-08-27T17:26:15.541566Z 0 [ERROR] Aborting
app_mysql |
app_mysql | 2022-08-27 17:26:20+00:00 [Note] [Entrypoint]: Switching to dedicated user 'mysql'
app_mysql | 2022-08-27 17:26:20+00:00 [Note] [Entrypoint]: Entrypoint script for MySQL Server 5.7.39-1.el7 started.
app_mysql | 2022-08-27 17:26:21+00:00 [Note] [Entrypoint]: Initializing database files
app_mysql | 2022-08-27T17:26:21.053307Z 0 [Warning] TIMESTAMP with implicit DEFAULT value is deprecated. Please use --explicit_defaults_for_timestamp server option (see documentation for more details).
app_mysql | 2022-08-27T17:26:21.058081Z 0 [ERROR] --initialize specified but the data directory has files in it. Aborting.
app_mysql | 2022-08-27T17:26:21.058496Z 0 [ERROR] Aborting
app_mysql |
app_mysql exited with code 1
app_mysql | 2022-08-27 17:26:25+00:00 [Note] [Entrypoint]: Switching to dedicated user 'mysql'
app_mysql | 2022-08-27 17:26:25+00:00 [Note] [Entrypoint]: Entrypoint script for MySQL Server 5.7.39-1.el7 started.
app_mysql | 2022-08-27 17:26:26+00:00 [Note] [Entrypoint]: Initializing database files
app_mysql | 2022-08-27T17:26:26.061511Z 0 [Warning] TIMESTAMP with implicit DEFAULT value is deprecated. Please use --explicit_defaults_for_timestamp server option (see documentation for more details).
app_mysql | 2022-08-27T17:26:26.065472Z 0 [ERROR] --initialize specified but the data directory has files in it. Aborting.
app_mysql | 2022-08-27T17:26:26.065538Z 0 [ERROR] Aborting
app_mysql |
app_mysql exited with code 1
app_mysql | 2022-08-27 17:26:31+00:00 [Note] [Entrypoint]: Switching to dedicated user 'mysql'
app_mysql | 2022-08-27 17:26:31+00:00 [Note] [Entrypoint]: Entrypoint script for MySQL Server 5.7.39-1.el7 started.
app_mysql | 2022-08-27 17:26:31+00:00 [Note] [Entrypoint]: Initializing database files
app_mysql | 2022-08-27T17:26:31.341695Z 0 [Warning] TIMESTAMP with implicit DEFAULT value is deprecated. Please use --explicit_defaults_for_timestamp server option (see documentation for more details).
app_mysql | 2022-08-27T17:26:31.344916Z 0 [ERROR] --initialize specified but the data directory has files in it. Aborting.
app_mysql | 2022-08-27T17:26:31.345304Z 0 [ERROR] Aborting
app_mysql |
app_mysql exited with code 1
app_mysql | 2022-08-27 17:26:37+00:00 [Note] [Entrypoint]: Switching to dedicated user 'mysql'
app_mysql | 2022-08-27 17:26:37+00:00 [Note] [Entrypoint]: Entrypoint script for MySQL Server 5.7.39-1.el7 started.
app_mysql | 2022-08-27 17:26:38+00:00 [Note] [Entrypoint]: Initializing database files
app_mysql | 2022-08-27T17:26:38.237102Z 0 [Warning] TIMESTAMP with implicit DEFAULT value is deprecated. Please use --explicit_defaults_for_timestamp server option (see documentation for more details).
app_mysql | 2022-08-27T17:26:38.241033Z 0 [ERROR] --initialize specified but the data directory has files in it. Aborting.
app_mysql | 2022-08-27T17:26:38.241099Z 0 [ERROR] Aborting
app_mysql |
app_mysql exited with code 1
app_mysql | 2022-08-27 17:26:47+00:00 [Note] [Entrypoint]: Switching to dedicated user 'mysql'
app_mysql | 2022-08-27 17:26:47+00:00 [Note] [Entrypoint]: Entrypoint script for MySQL Server 5.7.39-1.el7 started.
app_mysql | 2022-08-27 17:26:48+00:00 [Note] [Entrypoint]: Initializing database files
app_mysql | 2022-08-27T17:26:48.344694Z 0 [Warning] TIMESTAMP with implicit DEFAULT value is deprecated. Please use --explicit_defaults_for_timestamp server option (see documentation for more details).
app_mysql | 2022-08-27T17:26:48.349301Z 0 [ERROR] --initialize specified but the data directory has files in it. Aborting.
app_mysql | 2022-08-27T17:26:48.349466Z 0 [ERROR] Aborting
app_mysql |
app_mysql exited with code 1
app_mysql | 2022-08-27 17:27:04+00:00 [Note] [Entrypoint]: Switching to dedicated user 'mysql'
app_mysql | 2022-08-27 17:27:04+00:00 [Note] [Entrypoint]: Entrypoint script for MySQL Server 5.7.39-1.el7 started.
app_mysql | 2022-08-27 17:27:04+00:00 [Note] [Entrypoint]: Initializing database files
app_mysql | 2022-08-27T17:27:04.834565Z 0 [Warning] TIMESTAMP with implicit DEFAULT value is deprecated. Please use --explicit_defaults_for_timestamp server option (see documentation for more details).
app_mysql | 2022-08-27T17:27:04.838207Z 0 [ERROR] --initialize specified but the data directory has files in it. Aborting.
app_mysql | 2022-08-27T17:27:04.838272Z 0 [ERROR] Aborting
app_mysql |
app_mysql exited with code 1
app_mysql | 2022-08-27 17:27:33+00:00 [Note] [Entrypoint]: Switching to dedicated user 'mysql'
app_mysql | 2022-08-27 17:27:33+00:00 [Note] [Entrypoint]: Entrypoint script for MySQL Server 5.7.39-1.el7 started.
app_mysql | 2022-08-27 17:27:34+00:00 [Note] [Entrypoint]: Initializing database files
app_mysql | 2022-08-27T17:27:34.124577Z 0 [Warning] TIMESTAMP with implicit DEFAULT value is deprecated. Please use --explicit_defaults_for_timestamp server option (see documentation for more details).
app_mysql | 2022-08-27T17:27:34.129634Z 0 [ERROR] --initialize specified but the data directory has files in it. Aborting.
app_mysql | 2022-08-27T17:27:34.129698Z 0 [ERROR] Aborting
app_mysql |
app_mysql exited with code 1
nginx_1 | 172.18.0.1 - - [27/Aug/2022:17:27:51 +0000] "GET / HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36" "-"
nginx_1 | 172.18.0.1 - - [27/Aug/2022:17:27:51 +0000] "GET /static/js/bundle.js HTTP/1.1" 304 0 "http://localhost:3000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36" "-"
nginx_1 | 172.18.0.1 - - [27/Aug/2022:17:27:51 +0000] "GET /ws HTTP/1.1" 404 141 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36" "-"
nginx_1 | 172.18.0.1 - - [27/Aug/2022:17:27:51 +0000] "GET /static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg HTTP/1.1" 304 0 "http://localhost:3000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36" "-"
nginx_1 | 172.18.0.1 - - [27/Aug/2022:17:27:51 +0000] "GET /manifest.json HTTP/1.1" 304 0 "http://localhost:3000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36" "-"
nginx_1 | 172.18.0.1 - - [27/Aug/2022:17:27:51 +0000] "GET /favicon.ico HTTP/1.1" 304 0 "http://localhost:3000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36" "-"
nginx_1 | 172.18.0.1 - - [27/Aug/2022:17:27:51 +0000] "GET /logo192.png HTTP/1.1" 304 0 "http://localhost:3000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36" "-"
nginx_1 | 172.18.0.1 - - [27/Aug/2022:17:27:51 +0000] "GET /static/js/bundle.js.map HTTP/1.1" 200 380289 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36" "-"
nginx_1 | 172.18.0.1 - - [27/Aug/2022:17:27:52 +0000] "GET /ws HTTP/1.1" 404 141 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36" "-"
nginx_1 | 172.18.0.1 - - [27/Aug/2022:17:27:54 +0000] "GET /ws HTTP/1.1" 404 141 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36" "-"
nginx_1 | 172.18.0.1 - - [27/Aug/2022:17:27:58 +0000] "GET /ws HTTP/1.1" 404 141 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36" "-"
nginx_1 | 172.18.0.1 - - [27/Aug/2022:17:28:06 +0000] "GET /ws HTTP/1.1" 404 141 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36" "-"
답변 1