2021.11.30 - [Programming/Node.js] - [Node.js] 첫 서버와 Hello world!
[Node.js] 첫 서버와 Hello world!
모든 프로그래밍 언어를 배우다보면 항상 처음에 등장하는 동시에 그 언어의 성격을 맛 볼 수 있는 문구가 존재합니다. 'Hello world!'라고요. 우리는 이 포스트를 통해 노드로 처음 서버를 열어보
bamtory29.tistory.com
http 모듈을 이용해서 서버를 열었었습니다. 하지만 이 방식에는 다양한 불편함이 따라옵니다. 그래서 이런 불편함을 해소하고자 npm에는 수 많은 서버 프레임워크들이 나타나게 되었습니다. express, koa 등이 노드 웹 서버 프레임워크들입니다. 저는 이 중에서 npm 다운로드 수가 압도적으로 높은 express를 배워보려고 합니다.
1. express 소개
서론에서도 간단하게 소개했지만 express는 웹 서버 프레임워크입니다. http 모듈의 request와 response 객체에 기능들을 추가하고 각종 편리한 메소드들을 추가했으며 코드 분리가 쉬워서 프로젝트 관리가 쉽다는 장점까지 가지고 있는 프레임워크입니다.그 인기는 npm의 다운로드 수를 보면 알 수 있는데 https://www.npmtrends.com/express-vs-fastify-vs-hapi-vs-koa-vs-restify에서 확인 할 수 있습니다. 이미 5년 전 부터 express가 압도적인 인기를 구가하고 있으며 갈수록 그 격차도 크게 벌어지고 있습니다. 다운로드 수가 많다고 해서 무조건 좋은 것은 아니지만, 사용유저가 많다면 커뮤니티 피드백이나 버그 빈도 등이 낮아서 안정적이라고 충분히 생각할 수 있습니다.
2. 익스프레스 설치와 시작
익스프레스는 npm에 등록된 패키지이므로 npm을 통해 설치합니다.
npm install express
그리고 한 가지 더 nodemon이라는 것을 설치할 것 인데요. nodemon은 서버 코드의 수정이 생길때마다 일일히 서버를 재시작 할 필요 없이 자동으로 재시작해주는 편리한 패키지입니다. 설치를 하고 package.json파일의 "script"에 "start"를 추가하고 다음과 같이 적어주세요.
npm install -D nodemon
익스프레스로 서버를 실행하는 코드입니다.
우선 express모듈을 받아왔고, app이라는 변수에 express를 할당했습니다. express 모듈 내부에 http 모듈이 들어있기 때문에 http 모듈을 만들지 않아도 우리가 서버를 열 수 있는 것 입니다. 마지막에 listen 메소드를 통해 콘솔에 나온 포트 번호를 보고 http://localhost:포트 번호 주소로 접속하면 결과를 확인할 수 있습니다.
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'));
});
app.set('port', process.env.PORT || 3000);.set(키, 값)메소드로 데이터를 저장할 수 있습니다. 여기서는 set('port', 포트)로 서버의 포트를 지정했습니다. process.env 객체에 PORT가 설정되어 있다면 그 포트를 쓰고, 존재하지 않으면 3000번 포트를 이용하겠다는 의미입니다.
app.get('/', (req, res)=>{
res.send('Hello express');
});.get(주소, 라우터) 메소드는 주소에 대해서 GET요청이 들어오면 수행할 동작을 지정하는 메소드입니다.
res.send()는 res.write/end의 역할을 하는 메소드입니다.
3. HTML 파일로 응답 보내기
마찬가지로 HTML 파일로 응답을 보내는 방법도 알아보겠습니다. 전송에 사용될 html 파일입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello express</title>
</head>
<body>
<h2>Hello express</h2>
<p>response HTML</p>
</body>
</html>
이때 파일 전송을 위해 path라는 모듈을 이용합니다. 그리고 문자열은 send()메소드를 이용했다면, 파일은 sendFile()을 이용합니다.
const express = require('express');
const path = require('path');
const app = express();
app.set('port', process.env.PORT || 3000);
app.get('/', (req, res) => {
//res.send('Hello express');
res.sendFile(path.join(__dirname, './src/express/expressIndex.html'));
});
app.listen(app.get('port'), () => {
console.log('포트 번호: ', app.get('port'));
});
__dirname은 현재 파일의 경로를 의미하는 노드의 기능입니다. 자매품으로 __filename이라는 것도 있는데 이것은 현재 파일 이름을 의미합니다. 이들을 쓰면, 코드가 실행될 때 자동으로 그 경로로 변경됩니다.
그래서 path.join이라는 것은 __dirname과 제가 명시한 경로를 합쳐서 sendFile()에 경로를 알리겠다 라는 의미로 해석할 수 있습니다.
참조
익스프레스 공식 페이지에 제가 소개한 정보 외에도 많은 정보가 담겨있습니다. 저도 블로그 쓰는데 참조했습니다.
Express - Node.js web application framework
Fast, unopinionated, minimalist web framework for Node.js $ npm install express --save
expressjs.com
'Programming > Node.js' 카테고리의 다른 글
| [Node.js/Pug] 템플릿 엔진, 퍼그 (0) | 2021.12.06 |
|---|---|
| [Node.js/express] 익스프레스 미들웨어 (0) | 2021.12.05 |
| [Node.js] 이벤트를 만들고 사용하기 (0) | 2021.12.04 |
| [Node.js] 파일 시스템 모듈 (0) | 2021.12.04 |
| [npm] npm 명령어 몇 가지 (0) | 2021.12.03 |
댓글