1. express
Node.js를 사용해서 쉽게 서버 구성을 할 수 있게 만들어주는 클래스와 라이브러리 집합이다.
express 설치 명령어
npm i express
설치 후 express 모듈 가져오기
const express = require("express");2. body-parser
body-parser는 요청과 응답사이에서 공통적인 기능을 해주는 미들웨어다.
데이터를 body라는 객체 안에 담아서 요청 응답을 받을수 있게 해준다고 보면 된다.
설치 명령어
npm i body-parser
설치후 모듈 가져오기
const bodyParser = require("body-parser");
3. ejs
ejs는 node.js와 express에서 많이 사용하고 있는 템플릿 엔진이다.
ejs는 우리가 쓴느 기존 html 문법을 사용하면서 <% %> 이런 문법을 사용해서
크게 벗어나지 않게 서버와 데이터를 사용할 수 있는 장점이 있다.
ejs 설치 명령어
npm i ejs
설치후 모듈 가져오기
const ejs = require("ejs");4. MySQL
MySQL은 데이터베이스를 관리하기 위함
const mysql = require("mysql2");
MySQL에 js를 이용하여 연동하기
const temp = mysql.createConnection({
user: "root"(유저네임 넣어주면된다),
password: "MySQL설치시 입력한 비밀번호",
database: "MySQL 내에 있는 Database이름",
});
tabel 만들어 주기
temp.query("SELECT * FROM products", (err, res) => {
if (err) {
const sql =
"CREATE TABLE products(id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(20), number VARCHAR(20), series VARCHAR(20))";
temp.query(sql);
} else {
console.log(res);
}
});products라는 테이블이 없을시 즉, err일시 테이블을 만들어주는 쿼리문이다.
5. fs
fs는 파일 읽기 쓰기를 쉽게 도와주는 모듈이다.
fs는 원래 있는 모듈이라 따로 설치를 안해줘도 된다.
fs 모듈 불러오기
const fs = require("fs");
6.express를 이용해서 서버연결
express함수를 실행해서 반환 값을 app에 담아준다.
const app = express();bodyParser를 이용해서 사용할 모듈을 설정
const app = express();
app.use(
bodyParser.urlencoded({
extended: false,
//extended의 옵션
// true : express에 기본 내장된 쿼리 스트링 모듈을 사용한다.
// false : 쿼리 스트링 모듈의 기능이 좀더 확장된 qs모듈을 사용한다.
})
);포트 정하기
const PORT = 4000;로컬 서버 연결하기
app.listen(PORT, () => {
console.log("server start");
});get방식으로 받기
app.get("요청 url", 콜백)작성할 홈페이지 외관인 list.html 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>리스트페이지</title>
</head>
<body>
<table style="width: 100%">
<a href="/insert">추가 페이지</a>
<tr>
<th>삭제</th>
<th>수정</th>
<th>아이디</th>
<th>이름</th>
<th>전화번호</th>
<th>시리즈</th>
</tr>
<% data.forEach(function(el, index){ %>
<tr>
<td>삭제</td>
<td>수정</td>
<td><%= el.id %></td>
<td><%= el.name %></td>
<td><%= el.number %></td>
<td><%= el.series %></td>
</tr>
<% }); %>
</table>
</body>
</html>localhost:4000 에 들어가면 요청(req)과 반응(res)에 대한 함수 작성
app.get("/", (req, res) => {
/*
http에선 end함수로 보내고 끝냈지만 express에서는 send로 보낸다
fs모듈로 파일을 읽어온다.
fs.readFile 파일을 읽어오는 함수
매개변수 첫번째 파일의 경로이름
두번째는 인코딩 방식
세번째는 콜백 함수
*/
fs.readFile("src/list.html", "utf-8", (err, data) => {
temp.query("SELECT * FROM products", (err, result) => {
//ejs render함수로 해당 불러온 파일을 그려준다.
// ejs 두번째 매개변수로 데이터를 전달할 수 있다.
res.send(
ejs.render(data, {
data: result,
})
);
});
});
});
fs로 list.html 을 utf-8 방식으로 불러온다.
불러올 때 temp의 쿼리문으로 products라는 테이블에서 값을 받아옴.
res.send로 값을 띄운다.
ejs.render함수로 불러온 파일 값을 띄움
localhost:4000/insert 들어가면 req, res 함수 작성
app.get("/insert", (req, res) => {
fs.readFile("src/insert.html", "utf-8", (err, data) => {
res.send(data);
console.log(data);
});
});post방식으로 값 불러오기
app.post("/insert", (req, res) => {
/*
body객체 안에 form에서 보내준 데이터는 input들의 name이 키값
해당 input의 value값으로 전달된다.
*/
let data = req.body;
const sql = "INSERT INTO products (name,number,series) VALUES(?,?,?)";
temp.query(sql, [data.name, data.number, data.series], () => {
// url 경로를 redirect함수의 매개변수 내용 경로로 이동한다
res.redirect("/");
});
});
'개발 > node.js' 카테고리의 다른 글
| [Node.js] socket.io 로 채팅방 만들기 (0) | 2022.07.26 |
|---|---|
| [Node.js] 삭제, 수정버튼 만들기 (0) | 2022.07.26 |
| Node.js 핵심개념 (0) | 2022.07.20 |
| [node.js] formatting, linting (0) | 2022.07.19 |
| [node.js] node.js (0) | 2022.07.19 |