Introduction
Node.js의 기본적인 작동 방식부터 공부하고 포스트를 보는 것을 추천한다.
쉬운 듯 하지만 살짝 까다로운 부분이 없지 않아 있기 때문에, 생활코딩이나 w3school? 같은 곳에서 간단히라도 공부해야함
솔직히 이것만 이해하면 node.js를 통해 만들지 못하는 웹은 거의 없다.
해당 포스팅은 제목과 같이 ejs 템플릿 엔진을 통해 MySQL의 DB에서 가져온 데이터 리스트를 웹 페이지에 표시하는 방법을 소개할 것이다.
1. Database in MySQL
우선 시작하기 전에 사용할 내 MySQL 계정에 있는 데이터를 소개하겠다.
위의 사진은 내 데이터베이스들이다.
그 중 "shyunku"라는 이름의 데이터베이스를 사용할 것이다.
해당 데이터베이스 내에는 "friends"라는 이름의 table이 하나 있고, 그 테이블의 내용은 오른쪽 사진과 같다.
(ID, 이름, 나이 순으로 이루어진 fields)
실제 데이터는 위와 같이 있다고 생각하자.
2. Node.js 서버 및 라우터 설정
내가 사용할 파일은 main.js와 index.ejs 뿐이다. (package-lock.json 제외)
ejs 템플릿 엔진은 구글링하면 무엇인지 더 자세히 알게 되겠지만, 간단히 설명하고 넘어가도록 하겠다.
템플릿 엔진은 HTML 형식의 파일 내에서 웹 컨텐츠 데이터를 더 쉽게 삽입하고 관리할 수 있도록 만들어진 엔진이다.
아래에 있는 ejs 파일의 형식을 보면 대충 무슨 느낌인지 감이 올 듯.
- main.js
const express = require('express');
const app = express();
const fs = require('fs');
const ejs = require('ejs');
const mysql = require('mysql');
const client = mysql.createConnection({
host: "localhost",
user: "root",
password: "<PASSWORD>",
database: "shyunku"
});
const mainPage = fs.readFileSync('./index.ejs', 'utf8');
app.get('/', (req, res) => {
var page = ejs.render(mainPage, {
title: "Temporary Title",
});
res.send(page);
});
app.get('/getdata?', (req, res) => {
client.query("SELECT * FROM friends;", function(err, result, fields){
if(err) throw err;
else{
var page = ejs.render(mainPage, {
title: "Temporary Title",
data: result,
});
res.send(page);
}
});
});
app.listen(3400, () => {
console.log('Server Running on Port 3400!');
});위 코드의 <PASSWORD> 에는 자신의 MySQL 패스워드를 넣어주기 바람.
사족.
우선 나로서는 웹 공부를 밑바닥부터 강의 없이 쌩으로 구글링과 함께 Node.js를 공부하는 것이기 때문에, 코드에 틀린 부분이 없을 것이라고는 장담하지 못한다.
하지만 적어도 원하는 결과를 얻었기 때문에 성공한 케이스를 올린 것임.
이 코드를 작성하면서 상당히 많은 오류가 있었다.
여러 번 시도하면서 도전하기 바람.
모듈이 없으면 $ npm install <MODULE_NAME> --save 하셈
app은 express 프레임워크 변수로, 기존에 사용하던 httpServer에서 서버를 올리고 연결하던 복잡하던 과정을 손쉽게 사용할 수 있도록 묶어준 것이다.
mysql과 연동되는 connection 값과 함께, query문을 작성하여 가져온 데이터를 ejs파일과 패킹하여 내보낸다.
라우팅은 애플리케이션 엔드 포인트(URI)의 정의, 그리고 URI가 클라이언트 요청에 응답하는 방식을 말한다.
express와 라우팅에 관한 자세한 정보는 https://expressjs.com/ko/guide/routing.html를 참고하라.
- index.ejs
<!DOCTYPE html>
<html>
<head>
<title>
<%= title %>
</title>
<meta charset="utf-8">
</head>
<body>
sample text
<form action="/getdata" method="GET">
<button type="submit">데이터 불러오기</button>
</form>
FOR 1 datalist<br>
<% if(locals.data){ %>
<% for(let i=0;i<data.length;i++){ %>
NAME : <%= data[i].name %>, AGE : <%= data[i].age %><br>
<% } %>
<% } %>
FOR 2 datalist<br>
<% if(locals.data){ %>
<% for(let dat in data){ %>
NAME : <%= dat.name %>, AGE : <%= dat.age %><br>
<% } %>
<% } %>
FOR 3 datalist<br>
<% if(locals.data){ %>
<% data.forEach(function(val){ %>
NAME : <%= val.name %>, AGE : <%= val.age %><br>
<% }) %>
<% } %>
</body>
</html>해당 ejs 파일에서 굳이 for문을 3개 넣은 이유는 가져온 데이터를 어떠한 방식의 반복문으로 출력할 수 있는지 테스트하기 위함이다.
3. 테스트
이제 실제로 실행을 해보자.
우선 서버는 잘 켜진다.
이 상태로 127.0.0.1:3400 또는 localhost:3400 에 접속하면 다음과 같은 화면이 뜰 것이다.
이대로 [데이터 불러오기] 버튼을 누르면,
위와 같이 뜬다.
1차적으로 DB에서 데이터가 잘 가져와진 것 같긴 하지만 2번째 반복문 방식은 쓸 수 없는 것 같으니, 1번째와 3번째 방법 중 편한 반복문을 선택하여 사용하면 잘 될 것 같다.
간단히 원리를 설명하자면, 버튼을 누를 때 form action을 통해 URL이 /getdata?인 GET 형식 request를 서버에 보내는데 main.js에서 라우터 설정으로 이를 캐치하여 데이터를 다시 보내주는 것이다.
처음에는 localhost:3400/getdata?가 아닌 localhost:3400/ 으로 다시 리다이렉션하여 데이터를 업데이트 하는 식으로 하려고 했는데 아직 방법을 찾지 못했다 ㅠㅠ
'WEB > Node.js' 카테고리의 다른 글
| [Nodejs] VSCode에서 CommonJS에서 ESM 형식 import로 바꾸기 (1) | 2024.02.25 |
|---|
