node.js에서 서버를 구축하는 방법은 기본적으로 http와 express가 있다.
저번 포스팅에서는 node.js에 기본적으로 내장되어 있는 http 모듈을 이용한 서버 생성에 대해 공부해 보았다.
이번 포스팅에서는 express를 다운받아 서버를 생성해 보자.
Express
- node.js 기반의 웹 프레임워크
- 웹 서버를 생성하는 것과 관련된 기능을 담당
- 웹 애플리케이션을 만들기 위한 각종 메소드와 미들웨어 등이 내장되어 있음
- (미들웨어: 양 쪽을 연결하여 데이터를 주고 받을 수 있도록 중간에서 매개체 역할을 하는 SW)
- http 모듈의 낮은 코드 가독성 & 확장성을 해결하기 위해 만들어짐
- 설치: npm install express
- npm_modules가 생성되며, package.json의 dependencies에 express가 기록됨
express 사용
- express(): Express모듈이 export하는 최상위 함수로, express application을 만듦
- app 객체: Express() 함수를 호출함으로써 만들어진 express application
실습 코드를 살펴보자
const express = require("express"); // express 불러오기
const app = express(); // express application
const PORT = 8089; // 임의의 포트번호 할당
// 아래에서 다룰 예정
app.set("view engine", "ejs"); // 뷰를 ejs로 보여줄 것임을 미리 알려주기
app.set("views", "./views"); // ("views", "뷰가 들어있는 파일 경로명")
app.use("/static", express.static(__dirname + "/public")); // public을 static 경로로 쓸 것임(이미지와 같은 정적파일 인식을 위해 작성하는 코드)
// app.get() : http 요청 메소드의 종류 - get (그 외에는 post, put, delete, all 등)
// 라우팅
// 루트 경로로 진입했을 때
app.get('/', function(req, res){
// res.send(): response를 보내는 역할
// 기본적으로 response 처리를 할 때, content-type을 지정해줘야 하는데, 자동적으로 데이터 타입을 파악해서 알맞은 content-type을 지정해줌
res.send("hello express! 안녕하세요 익스프레스");
});
// 정보를 전달할 수도 있음
app.get("/", (request, response) => {
/*
res.render(정보를 보낼 ejs파일, {보낼 정보})
index.ejs에서 사용할 정보 전달
*/
response.render("index.ejs", {
btns: ["apple", "banana"],
isLogin: false,
userInfo: {
name: "khy",
msg: "식사는 맛있게 하셨나요?",
},
}); // index.ejs를 보여주기
});
// 렌더링
// register 경로로 들어왔을 때
app.get("/register", (req, res) => {
// res.render(view): 뷰 화면을 렌더링 -> 렌더링된 html 반환하여 클라이언트에게 보내줌
res.render("register"); // register.ejs 렌더링 -> html 반환
});
// login 경로로 들어왔을 때
app.get("/login", (req, res) => {
res.render("login"); // login.ejs 렌더링 -> html 반환
});
// page not found, 404 페이지는 맨 마지막에 설정
app.get("*", (req, res) => {
res.render("404");
});
이제, express에서 자주 사용되는 EJS 템플릿 엔진에 대해 공부해 보려고 한다.
템플릿 엔진이란, 템플릿을 읽어 문법과 설정에 따라 파일을 html 형식으로 변환시키는 모듈이다.
그 중에서 EJS는 Embeded JavaScript의 약자로, 자바스크립트가 내장되어 있는 html 파일이며, 확장자는 .ejs이다.
즉, EJS를 사용하면 HTML 내에서 Javascript를 사용할 수 있게 만들어준다.
사용하기 위해서는 npm install ejs 명령어로 설치후, app.js파일에서 ejs 템플릿을 설정해주면 된다.
app.set("view engine", "ejs"); // 뷰를 ejs로 보여줄 것임을 미리 알려주기
app.set("views", "./views"); // ("views", "뷰가 들어있는 파일 경로명")
기본 문법은 다음과 같다.
- <% %>: 자바스크립트 코드 실행 / 줄 바꿈을 하면 새로운 <% %>을 작성할 것
- <%= %>: 자바스크립트 코드의 실행 결과룰 문자열로 변환하여 출력
- <%- include('뷰의 상대주소')%>: HTML코드를 날 것으로 보여줌(HTML 소스를 include해서 사용 가능)(다른 뷰 파일을 불러올 때 사용)
- <%# %>:주석
- <%% %>: 리터럴 구문 출력
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<%- include('./includes/head', {title:'HOME'}) %>
</head>
<body>
<%- include('./includes/header') %>
<h1>안녕하세요 ejs입니다.</h1>
<img src="/static/pooh.png" alt="pooh" width="100" />
<%# 위의 예제 코드를 보면 index.ejs로 정보들을 넘겼었는데, 그 정보들을 사용%>
<%if(isLogin){%>
<div>안녕하세요, <%= userInfo.name%>님</div>
<p><%= userInfo.msg %></p>
<%} else{%>
<div>로그인을 해주세요.</div>
<%}%>
<h3>for문 사용해보기</h3>
<h3>EJS language support</h3>
<%for(let i=0; i<5; i++){%>
<p>안녕하세요</p>
<img src="/static/pooh.png" alt="pooh<%=i%>" width="100" />
<%}%>
</body>
</html>
미들웨어
- 요청이 들어옴에 따라 응답까지의 중간 과정을 함수로 분리한 것
- 양 쪽을 연결하여 데이터를 주고 받을 수 있도록 중간에서 매개체 역할을 함
- 서버와 클라이언트를 이어주는 중간 작업
- use()를 이용해 등록
- static
- 이미지, CSS, JS 파일과 같은 정적 파일 제공
- express에 있는 static 메소드를 이용해 미들웨어로 로드
app.use("/views", express.static(__dirname + "/views"));
app.use("/static", express.static(__dirname + "/public")); // public을 static 경로로 쓸 것임(이미지와 같은 정적파일 인식을 위해 작성하는 코드)참고
'웹 백엔드' 카테고리의 다른 글
| Node.js - form (0) | 2024.01.28 |
|---|---|
| Node.js - 비동기 처리 (1) | 2024.01.27 |
| Node.js - API와 HTTP 모듈 (0) | 2024.01.25 |
| Node.js (1) | 2024.01.22 |
| 서버(Server)와 프로토콜 (0) | 2024.01.22 |