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 주소 문제라는 것까지는 알겠는데, 해결방법을 몰라 질문드립니다.. 아시는 분 도와주시면 정말 감사드립니다!

  • app.listen(8080 이기 때문에 axios.get('http://localhost:8080/login') 엽토군 2022.10.11 16:04
  • 감사합니다!! 말씀하신대로 해보니 Unexpected end of JSON input 에러가 node 실행한 콘솔창에서 발생하네요. JSON문제였나 봅니다. 감사합니다! 박승연 2022.10.12 13:20

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)