728x90
express
- 가장 인기있는 nodejs의 웹 프레임 워크이다.
- http 요청과 응답을 좀 더 편하게 사용할 수 있도록 도와주는 모델이다.
- 최소한의 기능만을 탑재하고 있지만, 거의 모든 웹 개발의 문제를 다룰 수 있는 호환성 있는 미들웨어 패키지를 만들었기 때문에 자유도가 높다.
- 개발자가 원하는 방식으로 구성할 수 있다.
- 개발자 자신만의 보일러 블레이팅이 가능하다.
- 보일러 플레이트 코드(Boilerplate code)
- 최소한의 변경으로 여러 곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드이다.
- 반복적인 작업을 피할 수 있어 개발의 생산성을 향상시킬 수 있다.
- 보일러 플레이트 코드(Boilerplate code)
express 메소드
- set(name, value)
- 서버 설정을 위한 속성을 지정한다.
- express의 view엔진 등의 설정을 할 수 있다.
- 그려줄 파일이 있는 폴더의 경로 같은 설정을 할 수가 있다.
- set()메소드로 지정한 속성은 get()메소드를 통해 확인할 수 있다.
- 서버 설정을 위한 속성을 지정한다.
- get
- get(name)
- 서버 설정을 위해 지정된 속성을 꺼내온다.
- get([path],function)
- 특정 경로로 요청된 정보를 처리한다.
- get(name)
- use
- 요청 또는 응답 시 실행되는 미들웨어를 추가할 수가 있다.
- use(미들웨어)
- 모든 요청에서 미들웨어 실행한다.
- 미들웨어 매개변수 앞에 경로를 지정하지 않았을 경우에는 기본적으로 ' /(루트경로) '로 지정한다.
- use(미들웨어 사용경로, 미들웨어)
- 미들웨어 사용경로로 시작하는 모든 요청에서 미들웨어를 사용한다.
express 설치
- 프로젝트를 시작하면 먼저 ' npm init -y ' 으로 npm 부터 설치받고 진행
- 설치 명령어
- npm i express
- npm install express
express_웹 서버 생성
1. express 모듈 선언 및 서버 객체 생성
// express 모듈 선언
const express = require("express");
//서버 객체 생성
const app = express();2. 루트 경로 처리
// http 모듈을 사용해서 선언했던 방법
// http.createServer((req,res)=>{
// URL
// switch (key) {
// case "/":
// break;
// case "/list":
// break;
// case "/add":
// break;
// default:
// break;
// }
// })
// get 방식으로 요청과 응답을 진행
app.get('/',(req,res)=>{
// send 메소드로 응답하고 종료
res.send("hello nodejs");
})3. 서버 대기
app.listen(5000,()=>{
console.log("서버 잘 열림")
})4. package.json에 script 명령어 작성
// package.json 에 스크립트 명령어 작성
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js",
"dev" : "node index.js"
// start 명령어는 === npm start
// 별도의 네이밍으로 우리가 작성한 스크립트 명령어 실행
// 예) dev 가정하면 npm sun dev 이렇게 실행하면 된다.
get / post_ 요청과 응답
get 방식의 요청과 응답
- URL에 queryString 형태로 데이터를 담아 웹서버에 요청을 보내는 방식이다.
- queryString ?
- 사용자가 입력 데이터를 전달하는 방법 중 하나로, url 주소에 협의된 데이터를 파라미터를 통해 넘기는 것을 말한다.
- URL의 ? 다음에 오는 내용을 말한다.
- 예) https://oo0ojw.tistory.com/test?querystring
- 구조
- https://oo0ojw.~~~/test?key1=value1&key2=value2&key3=value3
- key=value 형태로 구성되어 있으며, 여러개 사용하기 위해서 &를 사용한다.
- https://oo0ojw.~~~/test?key1=value1&key2=value2&key3=value3
- queryString ?
- get( ) 메소드의 콜백함수에 전달된 req 객체를 이용하면 querystring에 있는 데이터를 가져와서 html에 사용할 수 있다.
html
<body>
<h2>메인 페이지</h2>
<p>this is {{ tmep }}</p>
</body>js
app.get('/',(req,res)=>{
let a = req.query.test;
res.render("index.html", {
temp : a
})
})- req객체를 이용하여 querystring의 test값을 변수 a에 담는다.
- render( ) 메소드의 두 번째 매개변수로 html의 temp에 쿼리스트링 test의 값이 담긴 a를 전달한다.
- 따라서 html에서도 querystring의 test값이 담기고 해당 내용이 노출되는 것이다.
post 방식의 요청과 응답
- HTTP 패킷의 body영역에 querystring 형태로 데이터를 담아서 요청을 보내는 방식이다.
html
- form 태그
- 웹 페이지에서의 입력방식을 의미한다.
- 텍스트 필드에 글자를 입력하거나, 체크박스, 라디오버튼 등에 값을 입력하고 제출버튼을 클릭하면 백엔드 서버에 양식이 전달되어 정보를 처리할 수 있도록 한다.
- 속성
- name: 폼의 이름
- action: 폼 데이터가 전송되는 백엔드 url, 없다면 현재 url을 넣는다.
- method: 폼 전송 방식 (get, post)
<form action="/insert" method="post">
<label for="">이름</label>
<input type="text" name="name">
<label for="">전화번호</label>
<input type="text" name="number">
<button type="submit">추가</button>
</form>js
- redirect 메소드: 매개변수로 전달된 url로 페이지를 전환 시킬 수 있다.
app.post("/insert", (req,res)=>{
const data = req.body;
// body 객체 안에 form에서 요청으로 보낸
// 데이터가 객체로 들어있다. 객체 안에 있는 키 값들은
// input 들의 name으로 정해준 키로 값이 들어있다.
//우리가 요청한 데이터의 내용을 데이터 베이스에 추가하자
const sql = "INSERT INTO products(name,number,series)VALUES(?,?,?)"
console.log(data);
// query 메소드의 두 번째 매개변수로 배열의 형태로 value를 전달 해줄 수 있다.
// value의 순서대로
_mysql.query(sql, [data.name, data.number, data.series], ()=>{
// / 경로로 이동시킨다.
res.redirect('/');
});
// res.send();
});
express & path_웹서버 생성
path 모듈
- 파일이나 디렉토리의 경로를 다룰 때 사용하는 모듈이다.
- 파일 시스템의 경로들을 상대경로나 절대경로를 쉽게 설정할 수 있도록 도와주는 모듈이다.
1. express, path 모듈을 선언
const express = require("express");
const path = require("path");2. 서버 인스턴스 생성
const app = express();3. get을 이용하여 서버와 요청, 응답
// get 방식으로 url요청.
//메인 페이지
app.get('/',(req,res)=>{ // 루트 경로의 처리
// join 메서드가 전달받은 경로를 합쳐주는 동작을 해준다.
const body = path.join(__dirname, "views", "index.html");
// 파일까지의 경로를 만들어주고
console.log(body);
//결과: D:\경일_블록체인\강의\230502\views\index.html
console.log(__dirname);
//결과: D:\경일_블록체인\강의\230502
// sendFile: html 파일을 브라우저로 보내줌 브라우저에서 읽을 수 있도록
res.sendFile(body);
})
// 리스트 페이지
app.get('/list',(req,res)=>{ // /list 경로의 처리
//파일을 가져오는데 path.join 메서드를 사용해서 경로를 만들어주고 가져올 파일의 경로
const body = path.join(__dirname, "views", "list.html");
// C\:dsfgrgewr\views\list.html
// 브라우저로 파일 보내준다.
res.sendFile(body);
})
// 마이 페이지
app.get('/my',(req,res)=>{
const body = path.join(__dirname, "views", "my.html");
res.sendFile(body);
})4. listen 메소드를 이용하여 서버 대기
app.listen(3000,()=>{
console.log("서버 열림")
})
express & ejs 템플릿 엔진_웹서버 생성
ejs 템플릿 엔진
- 템플릿 엔진: 문법과 설정에 따라 파일을 html 형식으로 변환시키는 모듈
- 서버 사이드 렌더링
- 서버에서 페이지를 그려 클라이언트로 보낸 후 화면에 표시하는 기법을 의미한다.
- 검색기능 및 페이지 로딩이 빠르다는 장점이 있다.
- ejs : Embedded Javascript 의 약자로, 자바스크립트가 내장되어 있는 html 파일이며, .ejs 라는 확장자를 가진다.
- 동적인 웹페이지를 만들 수 있다.
- express에서 ejs를 기본적으로 지원한다.
body-parser
- express의 미들웨어이다.
- 미들웨어란, 요청(request)과 응답(response) 사이에서 공통적인 기능을 수행하는 소프트웨어를 말한다.
- 요청으로 받은 html의 body 내용을 지정된 형태로 파싱하여 req(요청) 객체 안에 있는 body객체로 담아준다.
- body-parser를 사용하면 req.body로 호출이 가능해진다.
view 엔진
- 서버에서 js로 만든 변수를 보내줘서 클라이언트에서 활용할 수 있도록 해주는 엔진.
- 정적인 html을 동적으로 만들어줄 수 있다.
- 보통 view엔진을 사용할 때 pug나 ejs를 사용한다.
urlencoded
- form 데이터 파싱을 도와주는 미들웨어이다.
- extended의 옵션
- true: 쿼리 스트링 모듈의 기능이 좀 더 확장된 qs 모듈을 사용한다.
- 깊은 객체를 지원한다.
- http://localhost:3000/main?userID=filsejl
- false: express 기본 내장된 쿼리 스트링 모듈을 사용한다.
- 깊은 객체를 지원하지 않는다.
- 권장되는 옵션이다.
- true: 쿼리 스트링 모듈의 기능이 좀 더 확장된 qs 모듈을 사용한다.
- extended의 옵션
render 메소드
- view 엔진이 문자열을 html로 브라우저에 반환해서 렌더링을 해준다.
- 첫 번째 매개변수: view로 설정한 폴더 경로에 파일의 이름을 문자열로 전달
- 두 번째 매개변수: 템플릿 엔진에서 사용할 데이터
설치 명령어
- ejs 설치 명령어
npm i ejs- mysql 설치 명령어
npm i mysql2- 두 가지를 한 번에 설치 명령하는 방법
npm i ejs mysql2
※ main.ejs
<!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>Document</title>
</head>
<body>
<table style="width: 100%;">
<a href="/views/insert">추가 페이지</a>
<tr>
<th>아이디</th>
<th>이름</th>
<th>전화번호</th>
<th>시리즈</th>
<th>삭제</th>
<th>수정</th>
</tr>
<% data.forEach(function (el, index){ %>
<tr>
<!-- %= : 변수 표기법 -->
<td><%= el.id %></td>
<td><%= el.name %></td>
<td><%= el.number %></td>
<td><%= el.series %></td>
<td>삭제</td>
<td>수정</td>
</tr>
<% }); %>
</table>
</body>
</html>
※ insert.ejs
<!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>Document</title>
</head>
<body>
<!-- post 방식의 매소드로 데이터를 보냄 -->
<!-- { name : 인풋 벨류, number : 인풋 벨류, series: 인풋 벨류} -->
<form action="/insert" method="post">
<label for="">이름</label>
<input type="text" name="name">
<label for="">전화번호</label>
<input type="text" name="number">
<label for="">시리즈</label>
<input type="text" name="series">
<button type="submit">추가</button>
</form>
</body>
</html>
1. 모듈 선언
const express = require("express");
const mysql2 = require("mysql2");
const path = require("path");
const bodyParser = require("body-parser")
const ejs = require("ejs");2. 서버 인스턴스 생성
const app = express();3. set, use를 이용해 서버와 요청, 응답
app.set("views", path.join(__dirname, "views"));
// view엔진을 ejs로 사용하겠다고 설정
// ejs 설치가 되어 있어야 한다.
// view 엔진으로 ejs를 사용하겠다고 설정을 했기 때문에
// 파일의 확장자를 ejs로 변경해준다.
app.set("view engine", "ejs")
// express 버전이 올라가면서 bodyParser를 지원해준다.
app.use(express.urlencoded({extended : false}));4. mysql 연결
//Mysql 연결부터 하자
const _mysql = mysql2.createConnection({
user : "root",
password : "000000",
database : "test3"
})
_mysql.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))"
_mysql.query(sql);
}
else{
console.log(res)
}
})5. get, post를 이용해 서버와 요청, 응답
app.get("/",(req,res)=>{
// 루트 경로로 요청시 처리
// 메인 페이지
_mysql.query("SELECT * FROM products", (err,result)=>{
// render 메소드 - main.ejs에서 데이터를 문자열로 전달
res.render("main",{data : result})
})
})
// 추가하는 페이지로 가자
// 리스트를 추가하는 페이지
//get 방식의 요청인지 post의 요청인지에 따라 나뉘어진다.
app.get("/views/insert", (req,res)=>{
res.render("insert")
})
app.post("/insert", (req,res)=>{
const data = req.body;
// body 객체 안에 form에서 요청으로 보낸
// 데이터가 객체로 들어있다. 객체 안에 있는 키 값들은
// input 들의 name으로 정해준 키로 값이 들어있다.
//우리가 요청한 데이터의 내용을 데이터 베이스에 추가하자
const sql = "INSERT INTO products(name,number,series)VALUES(?,?,?)"
console.log(data);
// query 메소드의 두 번째 매개변수로 배열의 형태로 value를 전달 해줄 수 있다.
// value의 순서대로
_mysql.query(sql, [data.name, data.number, data.series], ()=>{
// redirect 메소드: 매개변수로 전달한 URL로 페이지를 전환 시킨다.
res.redirect('/');
});
});
//삭제를 해봅시다.
app.get("/delete/:id", (req,res)=>{
// :id -> url 요청에서 파라메터 값이라고 합니다.
// 1이라는 값을 가져올 수 있다.
// 예) http:// adasffas ... /1 또는 http:// adasffas ... /2
// {id : 1} 이렇게 요청(req)의 객체에 들어있다.
// req.params.id === 1
const sql = "DELETE FROM products WHERE id=?";
_mysql.query(sql,[req.params.id],()=>{
res.redirect("/");
})
})6. listen을 이용해 서버 대기
app.listen(8080,()=>{
console.log("서버열림")
})
메인 페이지
추가 페이지
삭제 페이지
💡 Window에서 Linux 환경 사용할 수 있도록하는 WSL 설정은 이 날짜 git에 PDF로 정리되어 있으니 git으로 가서 확인하자!
더보기
- express
- express 메소드
- get / post
- form
- path
- ejs 템플릿
- body-parser
728x90
'블록체인_9기 > 💚 Node.js' 카테고리의 다른 글
| 29강(과제X)_230508_Node.js(MVC 패턴으로 게시판 페이지 제작) (1) | 2023.05.09 |
|---|---|
| 28강_Node.js (express, ejs, mysql2, path로 게시판 만들기) (0) | 2023.05.08 |
| 26강(과제X)_230501_Nodejs(HTTP프로토콜, fs모듈, npm, mysql 연결) (0) | 2023.05.02 |
| 25강(과제X)_230428_Node.js(OSI 전송계층, TCP, UDP, TCP Server, client, Mysql) (0) | 2023.05.01 |
| 24강(과제X)_230427_nodejs(Nodejs란?, REPL, 런타임 환경, 파일 실행 모드, 모듈, 내장모듈, 내장객체, 웹서버) (0) | 2023.04.28 |
