제이쿼리를 알아보자!
01_html.html
<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
<!-- Jquery 로드 -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>
<p></p>
</body>
</html>이 상황에서 live server를 열면
아무런 화면도 뜨지 않는다! p태그 영역은 있으나 아무런 내용이 없음
제이쿼리 -> 자바스크립트에서 html을 제어해주는 것
제이쿼리 안에서 뭔가를 사용하겠다는 의미
02_css.html
백/프론트 비동기 통신을 해보자
-
npm init -y , npm install express mysql2
-
index.js (ONLY 백 서버)
// express 로드
const express = require('express');
const app = express();
app.use(express.urlencoded({extended: false}));
// mysql 연동
const mysql = require('mysql2');
const connection = mysql.createConnection(
{
host: "localhost",
port: 3306,
user: "root",
password: "1234",
database: "newdeal2",
}
)
// localhost:3000/data [get]
app.get('/data', function(req, res) {
const input1 = req.query.input1;
const input2 = req.query.input2;
console.log('input1 = ', input1);
console.log('input2 = ', input2);
res.send('ok')
});
app.post('/data', function(req, res) {
const input1 = req.body.input1;
const input2 = req.body.input2;
console.log(input1, input2);
const sql = `
insert
into
table1
values
(?, ?)
`;
const values = [input1, input2];
connection.query(
sql,
values,
function(err, result) {
if(err) {
console.log(err);
} else {
res.json({
'data' : result
})
}
}
)
});
app.listen(3000, function() {
console.log('Server Start');
}); app.use(express.urlencoded({extended: false})); 이것의 의미는?
테이블 생성
-
nodemon index.js
-
아까 만든 04_key.html에 버튼 태그 추가, 스크립트 추가 (비동기통신)
-
CORS 에러 떠서 그냥 서버 합칩니다
-
그냥 뷰 폴더 만들고 key.ejs 생성(복붙)
영차영차 😎