Next.js와 mySQL 연동하기

앞으로에 진행될 프로젝트를 위해 선행되어야할 nextjs 에 대해 공부하려던 참
게시판 한번 만들어 보려고 DB 붙이려는데... 처음부터 난관에 봉착...!

기존 개인용으로 사용하던 오라클 클라우드 DB를 붙여보려했으나 필요한 클라이언트프로그램을 아직 m1은 지원하지 않고 windows 만 지원하질 않나...
정보도 많이 없고 겨우 찾은 블로그 글도 불친철하다...ㅠㅠ

각설하고 어제오늘의 삽질을 기록해보자

mySQL 설정 및 연결

const mysql = require('mysql');  
// const mysql = require('mysql2'); for MAC  
  
const connection = mysql.createConnection({  
	host: 'localhost',  
	// host: '127.0.0.1', for MAC  
	user: 'root',  
	password: 'qkrqudahr1!',  
	database: 'example'  
});

function queryPromise(queryString) {  
	return new Promise((resolve, reject) => {  
		connection.query(queryString, (error, results) => {  
			if (error) {  
				return reject(error);  
			}  
			resolve(results);  
		});  
	});  
}  
		  
export default async function handler(req, res) {  
	let queryString = "SELECT 1 + 1";  
	  
	try {  
		const rows = await queryPromise(queryString);  
		res.status(200).json(rows);  
	} catch (error) {  
		console.error(error);  
		res.status(500).send('Internal Server Error');  
	}  
}

'mysql' 모듈을 사용해 MySQL DB에 연결하고

function queryPromise(queryString) {}

• queryString를 받아 Promise로 감싸 반환
• connection.query()를 실행함수로 갖고있어, 결과에 따라 resolve(성공) 또는 reject(에러) 를 반환한다.

export default async function handler(req, res) {}

• 해당 모듈에서 반환될 함수 (export default)
• 해당 함수는 Promise 가 반환되도록 설정 (async)
• try...catch... : queryPromise() 가 반환한 Promise에 따라 분기 처리
• await 를 통해 queryPromise() 가 처리될 때까지 기다림

...

<li><Link href='/api/dbconfig'>DB TEST</Link></li>

...

위와 같이 Link 걸어두고 테스트 해보면

짜잔...! 성공적으로 TEST가 되었다.

note

---

• 큰 프로젝트가 아니면 이렇게 NEXT.js에서 바로 DB에 붙어 작업하지만, 사이즈가 점점 커질수록
  유지보수, 소스코드관리 등 너무 방대해져 NEXT.js에서도 백과 프론트를 나눌필요가 있다고했다.
  
• windows에서는 오라클DB도 붙여봐야겠다.