진행을 하려면 MYSQL, VSCode 설치가 필요합니다.
https://code.visualstudio.com/download
Download Visual Studio Code - Mac, Linux, Windows
Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.
code.visualstudio.com
https://dev.mysql.com/downloads/installer/
MySQL :: Download MySQL Installer
Select Operating System: Select Operating System… Microsoft Windows Select OS Version: All Windows (x86, 32-bit) Windows (x86, 32-bit), MSI Installer 8.0.25 2.4M (mysql-installer-web-community-8.0.25.0.msi) MD5: 7f64b7ca2c526c359919d9db1bc8d669 | Signatu
dev.mysql.com
위 사이트에서 MYSQL을 설치 해줍니다.
Express.js 설치
설치할 디렉토리를 만듭니다. 빨간색 표시된 곳은 디렉토리가 생성된 경로입니다.
저는 s가 하나 더 붙었네요 그냥 진행할게요 귀찮아서리..
그 다음 디렉토리로 이동해서 npm init -y를 입력합니다.
-y를 누르면 package.json 설정하는 과정이 그냥 스킵됩니다.
express_mysql 디렉토리에 index.js 파일을 다음과 같이 생성할게요
node 명령어로 index.js 파일을 실행합니다.
nodemon 설치
nodemon 실행
nodemon은 한번만 실행하면 코드를 수정하거나 변동사항이 있을 때 자동으로 적용시켜줍니다.
nodemon을 실행시키는 또 다른 방법
package.json을 고치는 방법입니다. scripts에서 아래의 그림에서 표시된 곳을 고쳐줍니다.
아래의 그림에서 npm run devStart(script) 를 실행시켜주면 파란색 표시된 nodemon이 실행될 경로가 표시되면서 작동합니다. 실행시킬 파일과 경로가 함께 기입되어 있어야 합니다.
MYSQL 설치
MySQL의 서버에 설정된 user와 password를 기입해주고 아래처럼 설정합니다..
MYSQL 데이터베이스 생성 및 연결(접속)
실행하면 database created 로그가 표시가 됩니다. 데이터베이스는 하나밖에 만들 수 없으니 이미 생성이 되어있다면 다른 이름으로 하던가, 만들어진 데이터베이스는 삭제하는 것이 방법이 될 수 있습니다.
작성된 코드는 한번밖에 사용할 수 없습니다.
테이블 생성
작성된 DB 커넥트 코드에 database를 추가 합니다.
이제 DB 테이블을 만들어줍니다. 테이블의 코드는 아래와 같습니다.
CREATE TABLE users (
id int not null primary key auto_increment,
name varchar(255) not null,
email varchar(255) not null
);
다음은 CREATE TABLE 문을 추가한 코드 입니다.
const 변수를 하나주고 SQL문을 삽입합니다. SQL문의 길이가 너무 길 때는 아래와 같이 싱글쿼테이션으로 끊어서 잇습니다.
MYSQL에서 확인하면 아래와 같이 확인 할 수 있습니다.
SELECT문 동작 확인
데이터 조회하기
MYSQL 테이블에 데이터를 먼저 삽입합니다. 저는 아래와 같이 했습니다.
등록 한 다음 모든 데이터를 검색하는 select * from users를 실행합니다.
아래와 같이 콘솔에서 확인 할 수 있습니다.
부분적으로 검색하시려면 아래와 같이 작성도 가능합니다.
브라우저에 데이터 띄우기
쿼리가 작성된 코드 부분을 app.get 코드 안에 집어넣고 localhost:3000을 브라우저에 입력해보자.
데이터 삽입하기
Insert문으로 데이터를 삽입해 보겠습니다.
INSERT문은 다음과 같습니다.
const sql = "INSERT INTO users(name, email) VALUES('rogos', 'rogos@gmail.com')"
con.query(sql, function(err, result, fields) {
if(err) throw err;
console.log(result)
})
result값으로 로그를 찍어보면 Table에 데이터가 추가되어 있음을 확인 할 수 있습니다.
브라우저에도 두 데이터가 삽입된 것을 조회할 수 있습니다.
데이터 입력방법은 아래와 같이 2가지 더 활용할 수 있습니다.
이렇게 해서 브라우저를 띄워보면 다음과 같이 데이터가 삽입된 것을 확인할 수 있습니다.
HTML 입력 폼 작성
브라우저에서 데이터를 입력해서 DB에 삽입하는 작업을 해보겠습니다.
<!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>Input Form</title>
</head>
<body>
<h1>
입력 폼
</h1>
<form action="/" method="post">
<input type="text" class="form-control" name="name"><br>
<input type="text" class="form-control" name="email"><br>
<button type="submit">보내기</button>
</form>
</body>
</html>
app.get('/', (req,res) => res.sendFile(path.join(__dirname, 'html/index.html')))
body-parser 설치
브라우저에서 입력된 name, email은 POST 요청 결과로 express.js에 전송 됩니다.
전송된 name과 email을 express.js에서 처리하려면 body-parser 모듈이 필요합니다.
bodyParser 모듈을 연결해주기 위해서 변수하나 추가 해주고
아래처럼 코드를 설정합니다.
const express = require('express');
const path = require('path');
const mysql = require('mysql');
const bodyParser = require('body-parser');
const app = express();
const port = 3001;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
const con = mysql.createConnection({
host : 'localhost',
user : 'root',
password : '1234',
database : 'bcstory'
})
app.get('/', (req,res) => res.sendFile(path.join(__dirname, 'html/index.html')))
app.post('/', (req, res) => res.send(req.body))
app.listen(port, () => console.log(`Example app listening on port ${port}!`))app.use(bodyParser.urlencoded({ extended: true }))
-> body-parser를 미들웨어로 설정
app.post('/', (req, res) => res.send(req.body))
-> 입력 폼에서 POST 요청으로 데이터를 얻을 수 있는지 확인하기 위해 라우팅을 설정. req.body에 받은 데이터가 저장됨.
입력된 폼에 정보를 입력하고 보내기 버튼을 눌러봅시다.
폼에서 보내온 데이터를 저장해보자
app.post('/', (req, res) => {
const sql = "INSERT INTO users SET ?"
con.query(sql, req.body, function(err, result, field) {
if (err) throw err;
console.log(result);
res.send('등록이 완료 되었습니다.');
})
})
DB에 정확하게 들어가 있는 것을 확인할 수 있습니다.
res.send('등록이 완료되었습니다') 대신 res.redirect('/')로 설정하면, "/(루트)"로 리다이렉션되어 추가된 행이 표시 됩니다.
템플릿 엔진 ejs 설정
delete 문이나 update 문을 수행하려면, html에서 변수를 사용해야 합니다. 여기선 HTML 및 JavaScript를 함께 작성할 수 있는 템플릿 엔진 ejs를 사용 합니다.
npm에 ejs를 설치해주고 아래와 같이 설정합니다.
아래와 같이 "/(루트)" 접근이 발생하면 select 문이 실행되고, 실행 결과는 ejs 파일에 전달합니다.
이를 위해 render 함수를 사용하고, index ejs 파일을 이용합니다.
아래에서는 index.를 지정하는데, 대상은 views 폴더의 index.jes 파일입니다. 그래서 views 디렉토리를 만들고 그 안에 index.ejs 파일을 저장합니다.
app.get('/', (req,res) => {
const sql = "SELECT * FROM users";
con.query(sql, function (err, result, fields) {
if(err) throw err;
res.render('index', {users : result});
})
});
브라우저에서 "/(루트)" 접속하면 지금까지 추가한 테이블의 목록이 나옵니다.
delete 문 동작 확인
사용자 목록에서 정보를 삭제 합니다.
DELETE 문은 아래와 같습니다.
const sql = "DELETE FROM users WHERE id = ?";
아이디 값을 검색해서 그 아이디에 해당하는 정보를 삭제 합니다.
app.get('/delete/:id', (req,res) => {
const sql = "SELECT * FROM users WHERE id=?";
con.query(sql,[req.params.id], function (err, result, fields) {
if(err) throw err;
console.log(result);
res.redirect("/");
})
});아 잘못했네요 ㅋㅋ SELECT가 아니라 DELETE 입니다 ㅋㅋㅋ
app.get('/delete/:id', (req,res) => {
const sql = "DELETE FROM users WHERE id=?";
con.query(sql,[req.params.id], function (err, result, fields) {
if(err) throw err;
console.log(result);
res.redirect("/");
})
});
사용자 정보 업데이트 하기
update를 사용해서 정보를 갱신해보겠습니다.
실행 코드는 아래와 같습니다.
app.get('/update/:id', (req,res) => {
const sql = "UPDATE users SET ? WHERE id = " + req.params.id;
con.query(sql, req.body, function (err, result, fields) {
if(err) throw err;
res.redirect("/")
});
});
다음은 업데이트를 진행하기 위해서 업데이트 폼을 가져오는 코드 입니다.
해당하는 아이디의 정보를 가져와서 폼으로 보여줍니다.
app.get('/edit/:id', (req,res) => {
const sql = "SELECT * FROM users WHERE id = ?";
con.query(sql, [req.params.id], function (err, result, fields) {
if(err) throw err;
res.render('edit', {user : result});
})
});views 디렉토리에 edit.ejs 파일을 추가합니다. edit.ejs에선 select 문에서 취득한 데이터를 갖는 변수 user를 이용합니다. input 요소의 value에 name, email의 현재 값을 확인하고, user[0].name, user[0].email을 각각 설정합니다.
<!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>User Edit</title>
</head>
<body>
<h1>Update Form</h1>
<form action="/update/<%= user[0].id %>" method="POST">
name <input type="text" name="name" value="<%= user[0].name %>"><br>
email <input type="text" name="email" value="<%= user[0].email %>"><br>
<button type="submit">Update</button>
</form>
</body>
</html>
두 번째의 rogos를 변경해보겠습니다.
'Study > Node.js' 카테고리의 다른 글
| Node.js로 웹 스크랩핑 해보기 (0) | 2021.11.11 |
|---|---|
| [NodeJS] NodeJs 모듈 업데이트 하는 방법 | Package.json의 종속성을 업데이트 해보자. (0) | 2021.07.25 |
| [노드 JS] 입력 받기 (0) | 2021.03.30 |
| [노드JS] 로그 모듈 설치하기 (0) | 2019.08.17 |
| [노드JS] 로그 파일 남기기 (0) | 2019.03.23 |
|
|
|
|
|