Node.js의 Express.js 프레임워크를 사용해서 웹 서버를 만들어보자.
Express 설치
우선 express를 사용하기 위해서는 express를 설치해야 한다.
- terminal 실행
- express를 사용할 파일 경로까지 이동
npm init --y명령어로 프로젝트 초기화
(프로젝트 초기화를 하면 프로젝트 디렉토리에 'package.json' 파일이 생성되고 프로젝트를 체계적으로 관리할 수 있다.)npm install express명령어로 express를 설치
(npm i express명령어도 가능하다.)
express 설치 후 'package.json' 파일에 express가 버전과 함께 생기는걸 확인 할 수 있다.
Express 사용해서 서버 생성
express를 사용해서 아래의 코드와 같이 서버를 생성해보았다.
// express 모듈 불러오기
const express = require('express');
// express 객체 생성
const app = express();
// 포트번호 8000 -> 변수 PORT에 담기
const PORT = 8000;
// 라우터
// get 요청
app.get('/', (req, res)=>{
res.send('Hello Express');
})
// express로 서버 실행
app.listen(PORT, ()=>{
console.log(`http://localhost:${PORT}`);
})
node 명령어로 실행하고 주소창에 http://localhost:8000/ 으로 접속하면 아래와 같은 페이지가 나오는걸 볼 수 있다.
이제 코드를 살펴보도록 하자.
1. 모듈 불러오기
const express = require('express');
const app = express();
const PORT = 8000;require()메서드를 사용해서express모듈을 불러온다.express(): express() 함수를 통해 express 객체를 생성해서 app이라는 변수에 담는다.PORT: 포트번호 8000을 변수로 지정한다.
2. 라우터 지정
app.get('/', (req, res)=>{
res.send('Hello Express');
})get(): HTTP GET 요청에 따른 라우터를 등록한다.app.get('/', (req, res)=>{}):
-- 첫번째 인자 : 경로
http://localhost:8000/으로 들어오는 요청을 처리한다.
-- 두번째 인자 : 콜백함수
두개의 매개변수request(요청),response(응답)를 받는다.
클라이언트가/경로로 GET 요청을 보내면 서버가 'Hello Express' 메세지를 응답으로 보낸다.
/경로 :(http://localhost:8000/)
3. Express로 서버 실행
app.listen(PORT, ()=>{
console.log(`http://localhost:${PORT}`);
})app.listen()메서드로 지정한 포트에서 서버를 실행시킨다.app.listen(port, [callback]):
-- 첫번째 인자 : HTTP 서버 시작 포트번호
-- 두번째 인자 : 콜백함수
서버가 성공적으로 시작되었을 시에 호출되는 콜백함수
위의 코드에서는 서버가 성공적으로 시작되었을때 콘솔에http://localhost:8000을 출력한다.
4. 템플릿 엔진
템플릿 엔진을 사용하면 요청(request)에 대한 결과를 미리 만들어둔 파일로 응답(response) 할 수 있다.
템플릿 : 응답 웹 문서를 미리 만들어 둔 것
엔진 : 템플릿을 문법과 설정에 따라 html 형식으로 변환시키는 모듈 (ejs,pug등)
우선 ejs를 사용하기 위해서 터미널에서 npm install ejs 명령어로 ejs를 설치해준다.
ejs 설치 후
'package.json' 파일에 ejs가 버전과 함께 생기는걸 확인 할 수 있다.
이제 views 폴더를 만들고
그 폴더 안에 확장자가 .ejs인 파일을 만들어준다.
(화면에 보여지는 views들은 다 이 폴더에서 가져오게 된다.)
이제 템플릿 엔진을 사용해서 웹 문서를 렌더링 해보자.
코드는 아래와 같다.
// express 모듈 불러오기
const express = require('express');
const app = express();
const PORT = 8000;
// 템플릿 엔진을 ejs로 지정
app.set('view engine', 'ejs');
// 템플릿이 있는 디렉토리 지정
app.set('views', './views');
// index.ejs 파일 가져와서 렌더링
app.get('/', (req, res)=>{
res.render('index');
})
// express로 서버 시작
app.listen(PORT, ()=>{
console.log(`http://localhost:${PORT}`);
})위의 express로 서버 만들기 코드에서 템플릿 엔진 설정을 추가해서 웹 문서를 렌더링 하는 코드이다.
위에서 다룬 내용은 생략하고 템플릿 엔진 부분만 다뤄보겠다.
템플릿 엔진을 ejs로 설정
app.set('view engine', 'ejs');
app.set('views', './views');app.set('view engine', 'ejs'): 템플릿 엔진을 ejs로 지정한다.app.set('views', './views');: 템플릿이 있는 디렉토리를 지정한다.
파일 렌더링
app.get('/', (req, res)=>{
res.render('index');
})render()메서드로 index.ejs 파일을 불러와서 html 형식으로 변환시켜 렌더링한다.
node 명령어로 실행하고 주소창에 http://localhost:8000/ 으로 접속하면 아래와 같은 페이지가 나오는걸 볼 수 있다.
index.ejs의 코드이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>템플릿 엔진</h1>
<p>ejs</p>
</body>
</html>express를 사용해서 웹 서버를 만드는법과 템플릿 엔진을 사용해서 웹 문서를 렌더링 하는 법을 알아보았다. 이전에 다뤘던 http모듈로 서버 구축하는 법보다 express를 사용해서 서버를 구축하는 방법이 더 효율적이고 편리해서 실제 개발할 때는 express를 사용하는 방법이 훨씬 유용할 것 같다. 😊
