React) node.js - mssql 연동관련 Axios 오류 질문드립니다.
조회수 281회
안녕하세요. React를 처음 공부하고 있는 학생입니다. React에서 Node.js를 이용하여 mssql과 연동하는 부분을 진행중인데, 알수 없는 오류를 해결하지 못해 질문을 올립니다.
// server/server.js
const express = require('express');
const app = express();
app.listen(8080, function () {
console.log('listening on 8080')
});
var mssql = require("mssql");
var dbConfig_user = {
server: "실제 서버 주소",
database: "실제 DB 이름"
user: "실제 DB id",
password: "실제 DB pw",
port: 실제 DB 포트번호,
options: {
encrypt: false,
trustServerCertificate: true,
}
};
mssql.connect(dbConfig_user, function(err){
if(err){
return console.error('error : ', err);
}
console.log('MSSQL 연결 완료')
});
app.get('/login', function (req, res) {
var conn = new mssql.ConnectionPool(dbConfig_user);
conn.connect().then(function () {
var req = new mssql.Request(conn);
req.query(`Select * From tblUser`).then(function (result) {
conn.close();
res.json(result.recordset);
})
.catch(function (err) {
conn.close();
res.json(err);
});
})
.catch(function (err) {
res.json(err);
});
});
// src/components/Login.js - 로그인 화면입니다.
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function Login() {
const [inputId, setInputId] = useState('')
const [inputPw, setInputPw] = useState('')
// 생략
// 페이지 렌더링 후 가장 처음 호출되는 함수
useEffect(() => {
axios.get('/login')
.then(res => console.log(res))
.catch()
},
// 페이지 호출 후 처음 한번만 호출될 수 있도록 [] 추가
[])
return(
<div>
<h2>Login</h2>
<div>
<label htmlFor='input_id'>ID : </label>
<input type='text' name='input_id' value={inputId} onChange={handleInputId} />
</div>
<div>
<label htmlFor='input_pw'>PW : </label>
<input type='password' name='input_pw' value={inputPw} onChange={handleInputPw} />
</div>
<div>
<button type='button' onClick={onClickLogin}>Login</button>
</div>
</div>
)
}
export default Login;
와 같이 작성하고, App.js에서도 <Login />
을 작성하였습니다.
구글링을 해보니,
node를 별도로 실행해줘야 한다 해서 console창에 'node server/server.js' 로 실행해주었고, console창에 'MSSQL 연결 완료' 문구까지 확인했습니다.
그러나, 'npm start'를 해주면 크롬 F12(개발자창)에
- GET http://localhost:3000/login 404 (Not Found)
- Uncaught (in promise) AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
오류가 발생하게 됩니다. 404 오류를 통해 login 주소 문제라는 것까지는 알겠는데, 해결방법을 몰라 질문드립니다.. 아시는 분 도와주시면 정말 감사드립니다!
댓글 입력