익스프레스는 웹 서버 프레임워크이며, Node.js를 기반으로 구동되는 웹 서버 프레임워크이다. 익스프레스는 http 모듈의 요청과 응답 객체에 추가 기능들을 부여한다. 또한, 코드를 분리하기 쉽게 만들어 관리하기도 용이하다. 그리고 더 이상 if 문으로 요청 메서드와 주소를 구별하지 않아도 된다.
이제 익스프레스 프로젝트를 시작해보자. 먼저 learn-express 라는 폴더를 만들고, package.json 파일을 생성하여 정보들을 입력해준다. npm init으로 해도 좋다. 그 후, express와 nodemon을 설치해주자. nodemon은 개발용 패키지로 설치해주는게 좋다. 그 후, package.json의 항목 중 scripts의 start 항목에 nodemon app이라는 명령어를 입력해주자. nodemon은 서버 코드를 수정할 시 서버가 자동으로 재시작하는 패키지이다. 이를 모두 완료하면 package.json은 아래와 같은 형식이 될 것이다.
{
"name": "learn-express",
"version": "0.0.1",
"description": "Learning Express",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon app"
},
"author": "Beom Seok",
"license": "MIT",
"dependencies": {
"express": "^4.17.1"
},
"devDependencies": {
"nodemon": "^2.0.4"
}
}
이제 서버의 역할을 할 app.js 파일을 만들어 아래와 같이 입력해준다.
const express = require('express');
const app = express();
app.set('port', process.env.PORT || 3000);
app.get('/', (req, res) => {
res.send('Hello Express');
});
app.listen(app.get('port'), () => {
console.log(app.get('port'), '번 포트에서 대기 중.');
});
위 코드를 하나하나 살펴보자.
- const app = express(); 로 앱을 express 앱으로 실행시켜주었다.
- app.set('port', 포트) 로 서버가 실행될 포트를 설정한다. process.env 객체에 PORT 속성이 있다면 그 값을 사용하고 ,없다면 기본 값으로 3000번을 포트로 이용한다. 이 외에도 app.set(키, 값) 을 통해 데이터를 저장할 수 있으며, 이 데이터를 나중에 app.get(키) 로 가져올 수 있다.
- app.get(주소, 라우터) 는 주소에 대한 GET요청이 올 때 어떤 동작을 할지 적는 부분이다. 매개변수 req는 요청에 관한 정보가 들어 있는 객체이고, res는 응답에 관한 정보가 들어있는 객체이다. 현재는 GET / 요청 시 응답으로 Hello Express를 전송한다. 익스프레스에선 res.write 또는 res.end 대신 res.send를 사용하면 된다.
또한, GET 요청 이외에도 POST, PUT, PATCH, DELETE, OPTIONS 에 대한 라우터를 위한 app.post, app.put, app.patch, app.delete, app.options 메서드가 있다. - listen을 하는 부분은 http 웹 서버와 동일하다.
3000번 포트를 열면,
위와 같은 페이지가 뜬다. 단순한 문자열 대신 HTML로 응답하고 싶다면 res.sendFile 메서드를 사용하면 된다. 단, 파일의 경로를 path 모듈을 사용하여 지정해야 한다.
const path = require('path');
...
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '/index.html'));
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>익스프레스 서버</title>
</head>
<body>
<h1>익스프레스를 배워봅시다.</h1>
<p>재밌는 익스프레스.</p>
</body>
</html>
실행하고 3000번 포트로 가보면,
HTML이 잘 표시되는 것을 볼 수 있다.
'Node.js > Express' 카테고리의 다른 글
| Express - 템플릿 엔진 (Template Engine) (0) | 2020.08.11 |
|---|---|
| Express - req, res 객체 (0) | 2020.08.11 |
| Express - 라우터 (Router) (0) | 2020.08.11 |
| Express - 미들웨어 (Middleware) (0) | 2020.08.08 |
