저번 시간에 처음 node를 공부하였을때 이해가 어려웠는데 복습 후 express 수업을 들으니 다행히 처음보다 이해하며 수업을 들을 수 있었다. (그래도 어려운 백엔드...) 이번에는 express와 ejs를 알아보자!
express란?
웹 서버를 생성하는 것과 관련된 기능을 담당하는 프레임워크이다. 웹 애플리케이션을 만들기 위한 각종 메소드와 미들웨어 등이 내장 되어있다.
즉, http 모듈 이용시 코드의 가독성과 확장성이 낮아지는 단점을 해결하기 위해 만들어진것!!
- express 설치하기
터미널을 통해 express를 사용하고 싶은 폴더에 들어간다.
npm install express
위의 명령어를 사용하여 설치하면 npm_modules 폴더가 만들어진다. 그리고 package.json의 dendencies에 express가 기록된다.
ejs란?
ejs는 템플릿 엔진의 종류 중 하나이다. 여기서 템플릿 엔진은 문법과 설정에 따라 파일을 html형식으로 변환시키는 모듈이다.
그럼 ejs는 뭘까? Embedded JavaScript의 약자로, 자바스크립트가 내장되어있는 html파일이다. 확장자는 .ejs 이다!
- ejs 설치하기
npm install ejs
express와 마찬가지로 ejs를 쓰고싶은 폴더에 들어가 터미널에서 위의 명령어를 사용하여 설치하면 된다.
express와 ejs 모두 글로만 보니 이해가 안간다. 둘이 함께 쓰인 코드를 보며 이해해보자!
그 전에 express 모듈의 내장메소드 몇 가지 알아야한다.
- app.set(name, value):
Express 애플리케이션의 설정 값을 지정. 일반적으로, view engine과 views 설정을 지정하는 데 사용 - app.get(path, callback):
HTTP GET 요청에 대한 라우터를 등록 - app.listen(port, [host], [backlog], [callback]):
HTTP 서버를 시작. 이 메서드는 포트 번호, 호스트 이름, 백로그 크기, 콜백 함수를 전달 (포트 번호는 필수이며 주로 콜백함수로 개발자가 확인용으로 쓰임.) - res.render(view [, locals][, callback]):
뷰 템플릿을 렌더링. 이 메서드는 뷰 이름과 뷰에 전달될 데이터를 전달
- 라우팅: 요청에 따른 처리를 해주는 것. 길 찾기!
실습
- app.js 파일
const express = require('express');
const app = express();
const PORT = 8000;
app.set('view engine', 'ejs');
app.set('views', './views');
// 브라우저에 처음 접속했을때
app.get('/', (req, res) => {
res.render('index', {title:'HOME'})
})
app.get('/about', (req, res) => {
res.render('about', {title:'ABOUT'})
})
app.get('/create', (req, res) => {
res.render('create', {title:'CREATE'})
})
app.listen(PORT, () => {
console.log('8000 서버 실행');
})const express = require('express');
const app = express();Express 모듈을 require함수를 이용해 불러와서 express 변수에 할당한다. express() 호출로 생성된 객체를 app 변수에 할당한다.
app.set('view engine', 'ejs'); // 'view engine' 중에 'ejs'를 쓸거야.
app.set('views', './views');
// ejs가 보여주는 views(뷰이름)를 views 폴더 안에 ejs 문법으로 만들어진! 파일을 쓸거야.
여기에서 ejs가 보여주는 views가 있는 views 폴더를 만들어줘야한다. 이런식으로 존재하면 됨!!
app.get('/', (req, res) => {
res.render('index', {title:'HOME'})
})get 메소드를 이용. path를 루트 경로('/')로 설정하고 콜백함수에 render 메소드를 사용한다. 'index'라는 이름의 ejs 템플릿 파일을 렌더링하고 템플릿에 'title'이라는 변수에 'HOME'값을 전달한다.
app.listen(PORT, () => {
console.log('8000 서버 실행');
})8000포트를 PORT 변수에 저장해놨으므로 PORT를 사용하였고 개발자가 서버가 제대로 실행되었는지 확인하기위해 콜백함수로 로그를 찍어주었다.
- index.ejs 파일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>project <%= title %></title>
</head>
<body>
<h1>Home</h1>
</body>
</html><title>project <%= title %></title>ejs를 사용한 부분만 보자면 index, about, creat html 파일에 각각 title값을 변경해주기 번거로우니(파일이 3개뿐이라 느껴지지 않겠지만 10개 이상이라고만 생각해봐도 번거로울것..) ejs를 이용하여 작성해준다. ejs 문법에 맞춰 작성해준다! title은 변수로 위에 app.js 파일에서 {title:'HOME'} 이렇게 활용해주는데 title변수에 HOME이라는 값을 줄거야!라는 뜻.
➕ ejs 문법
- <% %> : 이 기호안에 자바스크립트 코드가 들어가야함.
- <%= %> : 값을 템플릿에 출력할때 사용
ex) <%= title %> - <%- include('view'의 상대주소) %>
ex) <%- include('./partials/head.ejs')%>
마무리하며...
유지보수에 좋은 모듈을 학습하였다. 코딩은 코드를 재사용하고 유지보수하기 편한 코드를 작성하는것이 참 중요하다는걸 깨닫게 되었다. 그만큼 정말 어려운 일인거같다. 훌륭한 개발자가 될때까지 화이팅..!
출처
https://m.blog.naver.com/hj_kim97/222913693753
[새싹 X 코딩온] 영등포 캠퍼스 6기 입문자도 가능한 웹 개발자 부트캠프 강의 교안
