앞선 아티클에서 express 모듈의 기본적인 사용 방법에 대해서 살펴보고 있었습니다. 이어서 살펴보도록 하겠습니다.
7. 익스프레스 (1) - express 기본 [1]
앞서서 살펴보았던 http 모듈의 사용과 관련해서, 요청 메서드와 주소에 따라서 응답을 보내는 예제를 작성했던 것을 기억하실 겁니다. 5. http 모듈로 서버 만들기 (2) - REST와 라우팅 [5]앞선 아
nozeroslope.tistory.com
[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'), '번 포트에서 대기');
});
app.get(주소, 라우터)는 가장 중요한 메서드입니다. 이는 특정 주소에 대해서 GET 요청이 들어올 때 어떤 동작을 할지 선언하는 부분입니다. 당연하지만, req는 요청에 관한 정보가 들어 있고, res는 응답에 관한 정보가 들어있습니다.
현재 예제 코드에서는 GET / 요청 시 응답으로 Hello, Express를 전달하도록 선언되었습니다. 익스프레스가 아닌 기본 http 모듈에서는 res.write, res.end 대신에 res.send를 사용하고 있습니다. HTML 파일로 응답하고 싶을 때는 res.sendFile을 사용합니다.
만일 요청 메서드가 GET이 아니라면 어떻게 할까요? POST, PUT, PATCH, DELETE, OPTIONS에 대한 라우터를 위해서 app.post, app.put, app.patch, app.delete, app.options 메서드도 존재합니다.
listen은 http 웹 서버의 방식과도 동일합니다. 포트의 경우 app.get('port')로 가져왔다는 것을 알 수 있습니다.
아래는 앞선 아티클에서 http 모듈로 작성한 서버입니다. 위의 예제와 한번 비교해 보세요.
5. http 모듈로 서버 만들기 (1) - 요청과 응답 [1]
기본적인 클라이언트와 서버 개념을 설명함에 있어서, 서버는 req를 받아서 res해 클라이언트에 보내게 됩니다. 결국 서버는 '요청 받는' 부분과 '응답을 보내는' 부분이 존재해야 합니다. 이 구
nozeroslope.tistory.com
const http = require('http');
http.createServer((req, res) => {
res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8'});
res.write('<h1>Hello World</h1>');
res.end('<p>Hello Server</p>');
})
.listen(8080, () => {
console.log('8080번 포트 서버 대기 중');
});
/* 출력
8080번 포트 서버 대기 중
*/
5. http 모듈로 서버 만들기 (2) - REST와 라우팅 [5]
앞선 아티클에서 작성하던 RESTful 서버 구현 예제를 이어서 계속 진행해 보겠습니다. [restFront.css]a { color: blue; text-decoration: none;} [restFront.html] home about 등록하기 [restFront.js] // 로딩 시 사용
nozeroslope.tistory.com
const http = require('http');
const fs = require('fs').promises;
const path = require('path');
http.createServer(async (req, res) => {
try {
console.log(req.method, req.url);
if (req.method === 'GET') {
if (req.url === '/') {
const data = await fs.readFile(path.join(__dirname, 'restFront.html'));
res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8'})
return res.end(data);
}
// 주소가 /도, /about도 아닐 경우
try {
const data = await fs.readFile(path.join(__dirname, req.url));
return res.end(data);
} catch (err) {
// 주소에 해당하는 라우트 찾기 불가로 404 not found error 발생
}
}
res.writeHead(404);
return res.end('NOT FOUND');
} catch (err) {
console.error(err);
res.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8'});
res.end(err.message);
}
})
.listen(8082, () => {
console.log('8082번 포트 대기 중');
});
이제 한번 app.js를 실제로 실행해 보겠습니다.
$ npm start
> learn-express@0.0.1 start
> nodemon app
[nodemon] 3.1.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,cjs,json
[nodemon] starting `node app.js`
3000 번 포트에서 대기
위에서는 단순히 응답을 텍스트만 보냈습니다. http 모듈에서의 경우와 마찬가지로 HTML 파일을 보내보도록 하겠습니다. res.sendFile을 사용하고, path 모듈을 사용해서 경로를 지정해야 합니다.
[index.html]
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EXPRESS Sample</title>
</head>
<body>
<h1>EXPRESS</h1>
<p>S A M P L E</p>
</body>
</html>
[app.js]
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, '/index.html'));
});
app.listen(app.get('port'), () => {
console.log(app.get('port'), '번 포트에서 대기');
});
동일하게 app.js를 실행한 후, localhost:3000을 실행하면 HTML 파일이 로드되는 것을 확인할 수 있습니다.
'Programming > Node.js' 카테고리의 다른 글
| 7. 익스프레스 (1) - 미들웨어 [2] : 다양한 미들웨어 적용하기 (0) | 2024.08.25 |
|---|---|
| 7. 익스프레스 (1) - 미들웨어 [1] (0) | 2024.08.24 |
| 7. 익스프레스 (1) - express 기본 [1] (0) | 2024.08.22 |
| 6. 패키지 매니저 (1) - npm [7] (0) | 2024.08.21 |
| 6. 패키지 매니저 (1) - npm [6] (0) | 2024.08.20 |
