Node.js는 크롬의 v8엔진 기반 javascript 런타임이다.
Node.js에서 제공하는 라이브러리인 express.js를 사용하면 웹 서버를 쉽게 구축할 수 있다.
node.js 프레임워크를 배우며 공부한 내용을 정리하고, 관련 지식을 찾는 사람에게도 내용을 공유하기 위해 해당 주제에 대해 작성해보기로 했다.
1. 폴더 및 package.json 설정
Node.js 프로젝트를 시작하려면 먼저 폴더를 만들고, 거기에 사용할 라이브러리(모듈)을 설치해야 한다.
-> BackEnd Study 폴더를 만들어 주고, 거기에 npm init 명령어를 입력해준다.
npm init 명령어를 입력하면 cmd창에 이것저것 이름을 설정해주라는 항목이 뜨는데,
일단 특별한 설정을 해주지 않을 거면 전부 enter 키를 눌러주면 된다.
그럼 다음과 같이 폴더 아래 파일이 생성된다.
필자는 이미 express 라이브러리를 설치해서 package-lock.json 등의 파일이 있다.
2. localhost로 서버 열어보기
폴더에 app.js 파일을 만들어 다음과 같은 코드를 입력해준다.
// 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'), "번 포트에서 대기 중");
});
그리고 cmd 창에서 경로를 BackEnd Study로 맞춰준 다음, node app.js를 입력해 준다.
그럼 다음과 같은 로그가 뜨면서 localhost에서 서버가 열린다.
localhost의 3000번 포트로 접속하면 (http://localhost:3000) 다음과 같이 사이트가 열린다.
이제 html 파일을 응답으로 전달해 보겠다.
폴더 안에 html 파일을 추가해주고 경로를 설정해 줄 것이다.
그리고 아까의 코드에서 res.send() 부분을 res.sendFile()로 바꿔 주기만 하면 된다.
먼저 코드는 다음과 같다.
// 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.sendFile(path.join(__dirname, '/index.html'));
});
app.listen(app.get('port'), () => {
console.log(app.get('port'), "번 포트에서 대기 중");
});
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Express Server</title>
</head>
<body>
<h1>Welcome To Express</h1>
<p>2. html 응답으로 보내기</p>
</body>
</html>
폴더 안에 index.html을 추가해 주고, path 라이브러리를 이용해 경로를 지정해 준다.
그리고 app.js 파일 내용을 다음과 같이 설정해준다. (sendFile(), path.join() 메소드 이용)
그리고 서버를 다시 시작해주면 (node app.js) 다음과 같이 결과가 나온다.
일단 이것으로 우리는 사용자의 요청에 html 파일 및 적절한 응답을 보내줄 수 있는 법을 배웠다.
다음 시간에는 다양한 uri에 적절한 응답을 보내는 방법, 미들웨어를 추가하는 방법 등을 배워 보겠다.
+) 배우면서 개인적으로 궁금했던 점들
- http 모듈로도 서버를 구축할 수 있다는데, express 모듈과의 차이점은 무엇일까? - (https://quark21.tistory.com/331) 참고
- port를 설정해 줄때, app.set 메소드를 이용하는 대신, const port = 3000;으로 변수에 값을 넣어주고, app.listen() 메소드의 app.get('port') 부분에 변수를 넣어 줘도 되는데 둘의 차이는 무엇일까?