Net.connect is not a function

다음을 통해 DB와 연결을 시도하였다.
!Connected to the database 로그가 찍혀서 정상 작동 된다고 생각했지만 브라우저 콘솔에는 에러가 나타났다.

import { QueryError, QueryResult } from "mysql2";
import mysql from "mysql2";

const connection = mysql.createConnection({
  host: "",
  user: "",
  password: "",
  database: "",
});

connection.connect((err: QueryError | null) => {
  if (err) {
    console.error("!Error connecting to the database:", err);
    return;
  }
  console.log("!Connected to the database");
});

export default connection;

원인

프론트에서 JS를 통해 데이터베이스에 직접 접속은 불가능합니다.

보통은 Node.js든 Spring이든 DB와 통신을 위한 별도 서버를 구축하고 프론트에서백엔드에 요청을 보내면 백엔드에서 DB 데이터를 받아와 클라이언트에 뿌려주는 형태로 구축하셔야 합니다.

본문의 코드는 Node.js에서 작동하는 코드로 Node.js를 활용한 간단한 서버 구축을 먼저 알아보셔야될듯 하네요.
출처

---

js express를 사용했던 것처럼 서버단에서 api를 만들어서 연결을 해야한다.

next.js 를 강의 같은 것을 안듣고 혼자 공부하다 보니 참 모르는 게 많다.

해결

api route 라는 것을 알았다.

에러가 났을 당시에는 api/apiLogin 파일에서 함수를 export 해서 클라이언트에서 바로 사용했었는데 그렇게 하는 것이 아니었다.

fetch("/api/apiLogin") 으로 연결해주고 .then()체인으로 처리한다.