1. npm init(package.json 설정)
- 먼저, npm init을 터미널에 입력을 해 package.json을 설정한다.
2. express 설치
- npm install express -save 을 이용해 express 설치
3. 실제 사용할 server.js 작성
// node_modules의 express 패키지를 가져온다.
var express = require("express");
// app이라는 변수에 express 함수의 값을 저장한다.
var app = express();
// 환경변수(process.env.PORT)에서 port를 가져온다. 그러나 환경변수 값이 없으면 5050 포트를 지정한다.
var port = app.listen(process.env.PORT || 5050);
// REST API의 한가지 종류인 GET request를 정의하는 부분이다.
// app.get이라고 작성했기 때문에 get 요청으로 정의가 되고
// app.post로 작성할 경우 post 요청으로 정의가 됩니다.
// REST API의 종류(get, post, put, delete 등등)을 사용하여 end point를 작성할 수 있다.
// 변수인 주소에 req에서 받은 요청으로 res로 응답을 해 화면에 보여준다.
app.get("/", (req, res) => {
// console.log(req);
console.log("/ 루트로 요청이 왔습니다.")
// 요청에 대한 응답
res.send("<h1>Express server Start!!!</h1>");
})
// 변수인 port로 서버를 실행, 실행 후에 함수 실행
// express 서버를 실행할 때 필요한 포트 정의 및 실행시 callback 함수를 받는다.
app.listen(port, () => {
console.log("start! express server!");
})
- require은 지금 버전의 import와 같은 의미를 가진다. express 패키지를 가져온 다음 app이라는 변수에 저장한다.
- app.listen을 이용해 사용할 port 번호를 가져오는데 환경변수(process.env.PORT)에서 가져오거나 직접 지정해주면 된다.
- app.get("주소", (req, res) => { })을 이용해 요청을 받고 응답을 해준다.
- 요청에는 다양하게 있는데 app.get을 하게되면 get 요청으로 정의가 되고 "/" 이 주소일 때 뒤에 오는 함수가 실행되는 것이다.
- req는 요청 정보이고 res는 응답이다. 그래서 res.send("<h1></h1>"); 을 이용해서 응답을 해 화면에 보여준다.
- 그리고 마지막에 app.listen(port, function() {})을 이용해 port로 서버를 실행하고 실행 후에 뒤에 있는 함수를 실행해준다.
// node_modules의 express 패키지를 가져온다.
const express = require("express");
const path = require("path");
const app = express();
// 메인 페이지 접속 시 html 응답하는 방법
// 미들웨어 : html, css, js, img 파일들이 담긴 곳
app.use(express.static(path.join(__dirname, 'public')));
app.get("/", (req, res) => {
console.log(__dirname)
res.sendFile(path.join(__dirname, 'public/index.html'));
})
// /hello 접속했을 때 hello.html을 보여주고 싶다.
app.get("/hello", (req, res) => {
console.log(__dirname)
res.sendFile(path.join(__dirname, "public/hello.html"))
})
app.get("/test", (req, res) => {
console.log(__dirname)
res.sendFile(path.join(__dirname, "public/test.html"))
})
const http = require("http").createServer(app);
// 변수인 port로 서버를 실행, 실행 후에 함수 실행
// express 서버를 실행할 때 필요한 포트 정의 및 실행시 callback 함수를 받는다.
app.listen(5050, () => {
console.log("start! express server!");
})
- 이 위는 클라이언트가 요청이 들어오면 서버에서 가지고 있는 html 파일을 응답으로 보내주어서 사용자 화면에 보여주게 하는 것이다.
- app.use()는 미들웨어 기능을 마운트하거나 지정된 경로에 마운트하는 데 사용, 기본 경로가 일치하면 미들웨어 기능이 실행
- express.static()은 변수로 오는 디렉토리 아래에 있는 데이터들을 미들웨어로서 로드를 해줌으로 웹 브라주저의 요청에 따라 서비스를 제공할 수 있게 해준다.
- path.join()은 변수로 오는 두 개의 경로를 합쳐주는 역할을 한다.
- __filename 은 현재 실행 중인 파일 경로를 뜻하고, __dirname 은 현재 실행 중인 폴더 경로를 뜻한다.
- 결국 app.use(express.static(path.join(__dirname, 'public'))); 이라는 것은 먼저 __dirname 현재 실행 중인 폴더와 public을 path.join을 이용해 합치고 그 디렉토리를 미들웨어로 로드하고 사용하겠다는 뜻이다.
- 이제 app.get("주소", (req, res) => { })을 이용해 각 주소에 맞는 요청에 따라 따로 응답을 해준다.
- 이번에는 미들웨어로 서버가 파일들을 응답으로 보내주는 것이므로 res.sendFile을 이용해 현재 실행중인 폴더 아래에 있는 보낼 html파일을 sendFile을 이용해 보내준다.
- res.sendFile(path.join(__dirname, 'public/index.html'));
4. 작성 후 서버 실행 및 nodemon
- 서버 시작은 npm 서버js파일 / npm server.js로 실행을 한다.
- 이것으로 실행하게 되면 내용을 변경했을 때 재빌드를 다시 해줘야 요청과 응답이 맞게 바뀌게 되는 단점이 있다.
- 이 때 편리하게 해주는 것이 nodemon이다.
- npm install -g nodemon로 nodemon을 설치
- nodemon --watch ./ 서버js파일 / nodemon --watch ./ server.js로 서버를 실행하면 재빌드 없이 바로바로 요청과 응답이 맞게 바뀌게 된다.
- nodemon --watch ./ server.js도 귀찮다면 package.json scripts에 "server": "nodemon --watch ./ server.js" 를 추가해서 npm run server 실행하면 된다. (React 때 npm run start와 같은 원리)
'FrontEnd > Node.js' 카테고리의 다른 글
[Node] Node 내장 객체, console, timer 객체 (0) | 2022.11.23 |
---|---|
[Node] 모듈(module) (0) | 2022.11.17 |
[Node] RestAPI, URI 고려사항, 응답 상태 코드 (0) | 2022.11.16 |
[Node] FrontEnd & BackEnd 연동 (0) | 2022.11.16 |
[Node] BackEnd 개요 및 Node.js (0) | 2022.11.10 |