[Node.js] express 서버 구축

아는벌·2023년 2월 19일

web (2)

목록 보기

1/20

Node.js

자바스크립트를 이용해서 서버를 만들 수 있는 도구
노드의 주요 특징
(1) 모듈과 패키지
(2) 비동기 입출력
(3) 이벤트 기반 입출력

웹 서버

http 모듈

HTTP 프로토콜로 요청하는 내용과 응답을 모두 처리 가능
listen(port, [hostname], [backlog], [callback])
서버를 실행하여 대기시킴

var http = require('http');

// 웹 서버 객체를 만든다
var server = http.createServer();
// 3000 포트로 요청 대기 포트 지정
var port = 3000;
server.listen(port,function(){
	console.log("웹 서버 시작 ",port);
});

클라이언트가 웹 서버 요청 시 발생하는 이벤트

connection : 클라이언트가 접속할여 연결이 만들어질 때 발생하는 이벤트
request : 클라이언트가 요청할 때 발생하는 이벤트
close - 서버를 종료할 때 발생하는 이벤트

HTTP 요청

HTTP 메소드

리소스를 다루는 행위

GET : 리소스를 얻어오는 요청
POST : 리소스 전송 요청
PUT : 저장 요청(수정)
DELETE : 삭제

요청 헤더

{키: 값} 방식으로 작성
주요 요청 헤더
- Accept - 클라이언트가 받을 수 있는 컨텐프
- Cookie - 쿠키
- Content-Type - 메세지 바디(엔티티)의 종류
- content-Legth - 메세지 바디의 길이
- If-Modified-Since - 특정 날짜 이후에 변경되었을때만

HTTP 서버

서버의 주요 이벤트

request - 클라이언트 요청 도착
connection - 소켓 연결
close - 종료

HTTP 서버 메소드

server.listen()
server.close()
server.setTimeout()

HTTP 서버 동작 시키기

// 서버 객체 생성
var server = http.cresteServer();
// 클라이언트 접속 대기(listening)
server.listen(PORT);

서버와 이벤트 리스너

var http = require('http');

// 웹 서버 객체를 만듭니다.
var server = http.createServer();

// 웹 서버를 시작하여 3000번 포트에서 대기하도록 설정
var port = 3000;
server.listen(port, function() {
    console.log('웹 서버가 시작 되었습니다. %d', port);
});

// 클라이언트 연결 이벤트 처리
server.on('connection', function(socket) {
    var addr = socket.address();
    console.log('클라이언트가 접속했다. : %s, %d', addr.address, addr.prot);
});

// 클라이언트 요청 이벤트 처리
server.on('request', function(req, res) {
    console.log('클라이언트 요청이 들어왔습니다.');
    console.dir(req);
});

// 서버 종료 이벤트 처리
server.on('close', function() {
    console.log('서버가 종료 됩니다.');
});

클라이언트에서 요청 응답

응답으로 보낼 헤더 생성
writeHead(statusCode [,statusMessage][, headers])
응답 바디 데이터 생성
write(chunk[, encoding][,callback])
클라이언트로 응답 전송
end([data][, encoding][, callback])
- 파라미터가 있다면 이 데이터를 포함시켜 응답
- 한 번을 호출되어야 응답을 보냄
- end로 마무리 안하면 무한루프 발생

Express

Express 요청 객체와 응답 객체

기본적으로 사용되는 요청 객체와 응답 객체는 http 모듈에서 사용하는 객체와 동일

응답 객체 메소드

send([body]) - 클라이언트로 데이터를 보냄
status(code) - HTTP 상태 코드 반환
redirect([status,] path) - 웹 페이지를 새로운 경로로 갱신
render("뷰파일", data, 콜백함수(err,data){}) - 뷰엔진을 이용한 문서 생성 후 전송

요청 객체 추가 헤더 및 파라미터

query - GET 방식으로 전송한 요청 파라미터
body - POST 방식으로 전송한 요청 파라미터, body-parser와 같은 외장모듈과 함께 사용
header(name) - 헤더정보

express 서버 시작하기

express 모듈을 설치해준다.
npm install express

// express 기본 모듈
const http = require("http");
const express = require("express");
const app = express();

app.get('/', (req, res) => {
	res.send('Hello World')
});

서버 구동을 위한 기본 코드이다!
server.js 상단에 const express = require("express");로 express 모듈을 선언해준다.
const app = express(); app이라는 변수에 express 모듈을 호출한다.

app 객체의 주요 메소드

set(name, value) - 서버 설정을 위한 속성 지정
get(name) - 서버 설정을 위해 지정한 속성을 꺼냄
use([path,]function[,function]...) - 미들웨어 함수 사용
get([path, ]function) - 특정 경로로 요청된 정보를 처리

View Engine

사용자 화면에 보여지는 뷰 화면의 템플릿
서버에서 선언한 변수를 클라이언트에서 받아서 사용할 수 있도록 해주는 엔진
뷰 엔진을 ejs / pug 를 많이 사용

app.set("views",__dirname + '/views');
app.set('view engine', 'ejs');

ejs 모듈을 설치한 후 server.js 상단에 뷰 엔진을 사용하기 위한 선언을 해준다. 첫번째 줄 코드에서 경로를 지정해주고 다음 코드로 뷰 엔진으로 ejs를 사용하겠다는 선언을 했다.

경로를 지정한 곳인 view 폴더 안에 ejs 파일을 생성하였다.

서버에서 데이터 보내고 ejs에서 출력하기

req.app.render("뷰파일", data, 콜백함수(err,data){});

서버에서 클라이언트로 뷰엔진을 이용하여 문서를 생성하여 보낼때 render() 함수를 이용한다. 이것은 뷰 엔진을 이용하여 html을 빌드하여 응답으로 보내주는 기능을 한다.

//server.js
const carList = [
    {no:1, title:"SONATA", price:3000, company:"HYUNDAI", year:2022},
    {no:2, title:"GRANDEUR", price:4000, company:"HYUNDAI", year:2019},
    {no:3, title:"K9", price:7000, company:"KIA", year:2020}
];
// ejs 템플릿 뷰 엔진 사용
app.get("/car",(req,res)=>{
    // req.app.render(뷰파일, data, 콜백함수(err,data){});
    let userName = "홍길동";
    req.app.render("car",{userName, carList},(err,data)=>{
        if(err){console.log(err); return;}
        res.end(data);
    });

});

위는 server.js 코드이다. 서버에 '/car' url로 get요청이 들어오면 서버에 선언된 데이터 carList와 userName을 각각의 데이터 이름으로 /views/car.ejs 경로의 파일에 렌더링된다.

//car.ejs 
<!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>Document</title>
    <% console.log(userName); %>
</head>
<body>
    <h1>중고 자동차 쇼핑몰</h1>
    <% for(var car of carList){ %>
        <p>
            <%=car.no %>, <%=car.title %>, <%=car.price %>, <%=car.company %>, <%=car.year %>
        </p>
    <% }  //end
    %>
</body>
</html>

ejs 문법
<% js 코드 %> - 자바스크립트 사용 시
<%= 변수명 %> - 전달받은 데이터를 변수로 사용 시

ejs 파일에서는 서버에서 전달된 데이터를 ejs 문법을 사용하여 다음과 같이 활용할 수 있다.

아는벌

다음 포스트