Express는 Node.js의 Web 어플리케이션을 위한 프레임워크이다.
Express는 노드 서버에 모듈을 설치하여 간단하게 사용할 수 있다.
Express 설치
설치는 따로 다운받을 필요가 없이 입력만 해주면 된다. cmd창에서
- npm init
쳐서 엔터를 계속 눌러주면 package.json 파일이 생성된다.
- npm install express --save
치고 나서 이클립스 폴더에 F5누르면 생성된다.
Express의 서버 시작과
post 방식으로 데이터를 넘기는 법 및
에러 발생 페이지 만드는 법을 예제로 알아보겠다.
Express 기본 모듈 + 추가 등록
require("dotenv").config();
var express = require("express");
var http = require("http");
var path = require("path");
var serveStatic = require("serve-static");
var expressErrorHandler = require("express-error-handler");
express와 http는 express를 위한 기본 모듈이다.
path와 serveStatic은 파일 경로를 위함이고 특히 serveStatic는 특정 폴더를 패스로 접근하도록 써주었다.
expressErrorHandler는 에러 핸들러 모듈이다. 404 페이지 출력을 위함이다.
Express 객체
var app = express();
app.set("port",process.env.PORT);
app.use(express.urlencoded({extended:false}));
app.use("/public",serveStatic(path.join(__dirname,"public")));
먼저 express()로 익스프레스 객체 생성을 해준다.
express 서버객체의 메서드는 set, get, use가 있다.
set으로 기본 포트를 app 객체의 속성으로 설정한다.
프로젝트 폴더에 env 텍스트 파일을 만들어 포트번호를 입력해주었다.
이를 인식하기 위해 dotenv모듈이 필요한 것이다.
또한 중첩된 객체 표현을 비허용하도록 false를 주었으며
serveStatic을 통해 public파일을 연결시켰으며, 맨 앞의 /public은 웹페이지 경로에 써줄 가상 주소를 지정했다.
Router(라우터)
라우터는 클라이언트가 요청한 경로를 처리하는 곳으로 전달해준다.
var router = express.Router();
router.post("/process/login",function(req,res){
console.log("/process/login 처리..");
var paramId = req.body.id;
var paramPwd = req.body.pwd;
res.writeHead("200",{"Content-type":"text/html;charset=utf-8"});
res.write("<h1>Express 서버에서 응답한 결과입니다</h1>");
res.write("<div><p>ID: " + paramId + "</p></div>");
res.write("<div><p>PWD: " + paramPwd + "</p></div>");
res.write("<br/><br/><a href='/public/login2.html'>로그인페이지</a>");
res.end();
});
app.use("/",router);
var errorHandler = expressErrorHandler({
static: {
"404":"./public/404.html"
}
});
app.use(expressErrorHandler.httpError(404));
app.use(errorHandler);
- 라우터 객체 추가
먼저 express.Router()로 라우터 객체를 추가해준다.
- 라우팅 함수 등록
괄호 속 경로가 왔을 때 함수를 실행한다.
router.route("/process/login").post(function(req,res){ 로 입력해도 같은 내용이다.
post 방식이므로 post를 입력해주었다.
req.body.id와 같이 post 방식으로 데이터를 받기 위해선 body를 입력해준다.
get방식은 가운데에 body 대신 query를 입력해주면 된다.
writeHead는 상태 코드가 200일 때, 즉 잘 실행되었을 때이며
html을 통해 write로 웹페이지에 출력하게 한다.
end는 마지막에 꼭 써줘야 한다.
- app 객체에 라우터 객체 추가
app.use에서 앞처럼 특정 주소가 왔을 때에만 라우터를 실행하도록 한다.
- 에러 페이지(404) 출력
에러핸들러의 경우 static블록을 통해 바로 메모리상에 올라가게 했으며
404일 때 public 파일의 404.html 파일이 실행되도록 하였다.
html 파일은 현재 js파일 밑에서 확인해보겠다.
또한 미들웨어를 등록해준다.
404 에러가 났을 때 실행하도록 해주며, 마지막에는 errorHandler 변수명을 담아준다.
Express 서버 시작
http.createServer(app).listen(app.get("port"),function(){
console.log("익스프레스 서버를 시작했습니다: " + app.get("port"));
});
set으로 지정한 포트를 get으로 가져온다.
console창은 확인을 위해 입력해주었다. 잘 실행되었다면 해당 내용이 출력된다.
login.html
<body>
<h1>로그인</h1>
<br/>
<form action="/process/login" method="post">
<table>
<tr>
<td>아이디</td>
<td><input type="text" name="id"/></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="text" name="pwd"/></td>
</tr>
</table>
<input type="submit" value="전송"/>
</form>
</body>
클라이언트에게 보여질 로그인 페이지의 html파일이다.
body 부분만 있으면 되기에 그 부분만 가지고 왔다.
action에는 '전송' 버튼을 눌렀을 때 실행될 경로를 입력해주고 방식은 post로 설정한다.
404.html
<body>
<h3>ERROR - 페이지를 찾을 수 없습니다.</h3>
<hr/>
<p>/public/404.html 파일의 에러메세지를 표시한 것.</p>
</body>
404 에러가 났을 때 보여질 페이지의 html이다.
단순히 보여지기만 하지 입력이나 실행할 내용은 없으므로 문구만 출력해준다.
4월 4일 월요일 수업🌜
'개발 교육 TIL > back-end' 카테고리의 다른 글
| [Node.js] 비밀번호 암호화 - crypto, virtual함수, salt (2) | 2022.04.06 |
|---|---|
| [Node.js] mongoose 모듈 - 설치 및 예제 (회원가입, 로그인) (0) | 2022.04.05 |
| [node] 내장모듈 - path, fs (0) | 2022.04.01 |
| [Spring Boot] 스프링부트에서 JSP 사용하기 (0) | 2022.03.31 |
| [Spring Boot] 스프링 부트 - 세팅, DB 연결(SqlSessionFactory, mapper) (0) | 2022.03.30 |
