[포스코x코딩온] 서버 만들기(http모듈, express, ejs, 템플릿 엔진)

[포스코x코딩온] 웹개발자 풀스택 부트캠프8기 2023. 7. 28. 23:30

728x90

서버 만들기

Node.js를 통해 서버를 구축하는 방법은 http와 express

http 모듈

웹 서버를 구동하기 위한 node.js 내장 웹 모듈
server 객체, request 객체, response 객체 사용
- server 객체: 웹 서버를 생성할 때 사용하는 객체
- response 객체: 응답 메시지를 작성할 때 두번째 매개변수로 전달되는 객체
- request 객체: 응답 메시지를 작성할 때 첫 번재 매개변수로 전달되는 객체

const http = require("http");

const server = http.createServer((request, response) => {
  response.writeHead(200); //응답 헤더 작성
  response.write("<h1>Hello.</h1>"); //응답 본문 작성
  response.end("<p>bye</p>"); //응답 본문 작성 후 응답 종료
});

server.listen(8000, function () {
  console.log("localhost: 8000포트 실행");
}); //listen(port, callback)

터미널 bash에서 node 파일명.js를 통해 실행 종료하려면 Ctrl+c

이후 웹 사이트에서 localhost:8000을 실행하면

Status Code에 200과 함께 write()와 end()에 작성한 코드가 나타나는 것을 확인할 수 있다.

localhost
- 컴퓨터 내부 주소(127.0.0.1(루프백))
- 자신의 컴퓨터를 가리키는 호스트이름(hostname)
Port
- 서버 내에서 데이터를 주고받는 프로세스를 구분하기 위한 번호
- 기본적으로 http 서버는 80번 포트 사용(생략 가능, https는 443)
Server 객체
- listen() : 서버를 실행하고 클라이언트를 기다린다.
- close() : 서버를 종료한다.
- on() : server 객체에 이벤트를 등록한다.
- request : 클라이언트가 요청할 때 발생하는 이벤트
- connection : 클라이언트가 접속할 때 발생하는 이벤트
- close : 서버가 종료될 때 발생하는 이벤트
- checkContinue : 클라이언트가 지속적인 연결을 하고 있을 때 발생하는 이벤트
- upgrade : 클라이언트가 http 업그레이드를 요청할 때 발생하는 이벤트
- clientError : 클라이언트에서 오류가 발생할 때 발생하는 이벤트
파일 전송
- practice_index.html 파일의 내용을 서버로 전송하여 띄우기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Hi</h1>
    <h2>Hello</h2>
    <h3>Bye</h3>
    <h4>Good</h4>
  </body>
</html>

practice_index.js으르 통해 서버를 설정하고 띄운다.

const http = require("http");
const fs = require("fs"); //파일 시스템 가져오기

const server = http.createServer((request, response) => {
  //파일 전송
  try {
    const data = fs.readFileSync("./practice_index.html");
    response.writeHead(200);
    response.end(data);
  } catch (error) {
    console.log(error);
    response.writeHead(404);
    response.end(error.message);
  }
});

server.listen(8000, function () {
  console.log("localhost: 8000포트 실행");
}); //listen(port, callback)

http 응답
- 1XX : 처리중
  - 100: Continue, 102: Processing
- 2XX : 성공
  - 200: OK, 201: Created, 202: Accepted
- 3XX : 리다이렉트(다른 페이지로 이동)
- 4XX : 요청 오류
  - 400: 잘못된 요청, 401:권한 없음, 403: 금지됨, 404: 찾을 수 없음(Page not found)
- 5XX : 서버 오류
http 모듈 이용 시 코드의 가독성과 확장성이 떨어져서 이를 해결하기 위해 만들어진 것이 Express 프레임워크

Express 모듈

웹 서버를 생성하는 것과 관련된 기능을 담당하는 프레임워크
웹 애플리케이션을 만들기 위한 각종 메소드와 미들웨어 등이 내장되어 있다.

설치

터미널에 npm install express 입력

2. .gitignore을 사용하여 node_modules는 깃에 올리지 않기(디렉토리 용량이 커서 올리면 안된다.)

※ .gitignore 간략 설명

Git 버전 관리에서 제외할 파일 목록을 지정하는 파일
Git 관리에서 특정 파일을 제외하기 위해서는 git에 올리기 전에 .gitignore에 파일 목록을 미리 추가해야 한다.
*.txt : 확장자가 txt로 끝나는 파일 모두 무시
!test.txt : test.txt는 무시되지 않음
test/ : test폴더 내부의 모든 파일을 무시
/test : (현재 폴더) 내에 존재하는 폴더 내부의 모든 파일 무시

Express 사용

express()
- Express 모듈이 export 하는 함수로, express application을 만듦
app 객체
- Express() 함수를 호출함으로써 만들어진 express application

//import express from "express";
const express = require("express");

const app = express();

package.json에 "type"="module"을 사용하면 import express from "express" 사용

포트까지 사용한 코드

const express = require("express"); //express 모듈 가져오기

const app = express();
const PORT = 8000; //관례상 상수가 들어가는 변수는 대문자로

app.get("/", (request, response) => {
  // "/"은 도메인으로 사이트주소로 뒤에 붙는다. localhost:8000/
  //콜백함수 순서 (요청, 응답)
  //send() 클라이언트에 응답 데이터를 보낼때
  response.send("Hello Express");
});

//서버를 열어주는 역할
app.listen(PORT, () => {
  console.log("http://localhost:${PORT}"); //브라우저에서 뜨지 않고 터미널에 뜬다.
});

" / " 은 도메인 사이트 주소로 localhost:포트번호/ 뒤에 붙는다.

ex) "/home"으로 설정하면 "localhost:포트번호/home"이 도메인 주소가 된다.

reponse.send()에 send()는 객체형식으로도 사용할 수 있다.

ex) send({result: true, code: 1000, message: "안녕하세요", data:{name: "kang"}});

위의 코드 작성 후 터미널에서 실행시킨 후 사이트를 확인해보면 아래와 같은 결과가 뜬다.

템플릿 엔진

문법과 설정에 따라 파일을 html형식으로 변환시키는 모듈

EJS

Embedded Javascript의 약자로, 자바스크립트가 내장되어 있는 html 파일
확장자는 .ejs

ejs 템플릿
- <% %>로 사용하며 한 줄만 사용할 수 있다. 여러 줄을 쓰려면 <% %>을 여러 개 써야 한다.

ejs 설정
- set : 속성 지정
- use : 미들웨어
  - ※ 미들웨어란,
    - 요청이 들어옴에 따라 응답까지의 중간 과정을 함수로 분리한 것
    - 서버와 클라이언트를 이어주는 중간 작업
    - use()를 이용해 등록 가능
    - 미들웨어-static
      - 이미지, css 파일 및 JS파일(front)과 같은 정적 파일 제공
      - Express에 있는 static 메소드를 이용해 미들웨어로 로드
      - 사용방법
        
        app.use('/static', express.static(__dirname + '/static'));
ejs 템플릿 렌더링
- render(' 파일명 ') : 파일명을 찾아서 그 파일을 렌더링한다.
ejs 문법
- <% %> : 무조건 자바스크립트 코드가 들어가야 하고, 줄 바꿈을 할 경우에는 새로운 <% %>를 이용해야 한다.
- <%= %> : 값을 템플릿에 출력할 때 사용
- <%- include('view의 상대주소') %> : 다른 view파일을 불러올 때 사용

예전에 만들어둔 html 파일을 ejs로 만들어보기.

실습1

애벌레 만들기

larva 폴더를 views 디렉토리 밑에 만들어 줍니다.
html 코드에서 css부분을 따로 빼서 css 파일을 만듭니다.
larva.js / larva.ejs / larva.css 가 필요합니다.

larva.js 코드

express 모듈을 가져오고 포트번호를 8001로 지정
set()을 통해 이름 및 경로를 지정합니다. (개발자들끼리의 암묵적 약속으로 views로 이름 지정(한번에 이해할 수 있다.))
use()을 통해 정적 파일 처리
render을 통해 ./views/larva폴더에 있는 larva 파일을 렌더링
listen()을 통해 할당한 포트의 서버를 열어준다.

const express = require("express"); //express 모듈 가져오기

const app = express();
const PORT = 8001;

app.set("view engine", "ejs");
app.set("views", "./views/larva"); //첫번재 views는 이름 지정, 두번째 ./views는 불러올 경로 지정

app.use(express.static("views/larva")); //정적 파일을 처리하기 위해 views 디렉터리를 express에 등록 이미지와 css는 정적 파일임으로.

app.get("/", (req, res) => {
  res.render("larva");
});

app.listen(PORT, () => {
  console.log("http://localhost:${PORT}");
});

larva.ejs 코드

그냥 html 코드로 화면 구성을 한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="larva.css" />
  </head>
  <body>
    <div>
      <div class="circle circle1"></div>
      <div class="circle circle2"></div>
      <div class="circle circle3"></div>
      <div class="circle circle4"></div>
      <div class="circle circle5"></div>
      <div class="circle eye1"></div>
      <div class="circle eye2"></div>
      <img src="/pngwing.com.png" alt="grass" class="grass" />
    </div>
  </body>
</html>

larva.css 코드

그냥 css 코드이다.

.circle {
  width: 50px;
  height: 50px;
  background-color: rgb(84, 204, 255);
  border-radius: 50%;
  position: absolute;
}
.circle2 {
  top: 20px;
  left: 40px;
  background-color: rgb(97, 97, 255);
}
.circle3 {
  top: 40px;
  left: 70px;
  background-color: rgb(79, 25, 255);
}
.circle4 {
  top: 35px;
  left: 90px;
  background-color: rgb(152, 209, 255);
}
.circle5 {
  top: 31px;
  left: 110px;
  z-index: 11;
}
.eye1 {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: white;
  top: 15px;
  left: 15px;
}
.eye2 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: black;
  top: 20px;
  left: 15px;
}
.grass {
  position: relative;
  width: 150px;
  height: 50px;
  top: 42px;
  left: 5px;
  z-index: 10;
}

이렇게 구성하고 node larva.js 명령어를 통해 실행시키면

localhost:8001에 애벌레가 생기는 것을 확인 할 수 있다.

실습 2

버튼 클릭 시 이미지 변경

실습 1번이랑 방식이 동일해서 결과랑 코드만 올리겠습니다.

changeImage.js 코드

const express = require("express");

const app = express();
const PORT = 8002;

app.set("view engine", "ejs");
app.set("views", "./views/changeImage");

app.use(express.static("views/changeImage"));

app.get("/", (req, res) => {
  res.render("changeImage");
});

app.listen(PORT, () => {
  console.log("http://localhost:${PORT}");
});

changeImage.ejs 코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      src="https://code.jquery.com/jquery-3.7.0.js"
      integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM="
      crossorigin="anonymous"
    ></script>
    <script>
      function changeImg(name) {
        $("img").attr("src", `${name}.jpg`);
      }
    </script>
  </head>
  <body>
    <img width="100" height="100" />
    <button onclick="changeImg('apple')">사과</button>
    <button onclick="changeImg('banana')">바나나</button>
    <button onclick="changeImg('grape')">포도</button>
    <button onclick="changeImg('peach')">복숭아</button>
  </body>
</html>

localhost:8002를 확인해보면

동작이 잘 되는 걸 확인할 수 있다.

실습3

구구단 만들기(데이터 보내서 원하는 구구단만 나오게 하기)

js에서 render()와 ejs에 Javascript가 들어가는 것을 제외하고는 이전 실습과 동일하다.

multiplicationTable.js 코드

render()에서 변수 number와 number2를 할당하여 데이터를 보내기 위해 {}객체로 묶었습니다.

const express = require("express");

const app = express();
const PORT = 8000;

app.set("view engine", "ejs");
app.set("views", "./views/multiplicationTables");

app.get("/", (req, res) => {
  res.render("multiplicationTables", { number: "4", number2: "6" });
});

app.listen(PORT, () => {
  console.log("http://localhost: PORT");
});

multiplicationTable.ejs 코드

Javascript를 사용하기 위해 한 줄 당 <% %>을 해줬고, 데이터를 .js에 받아오고 결과를 할당하기 위해 <%= %>을 사용하였습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h4><%=number%>단부터 <%=number2%>까지</h4>
    <% for(a = number; a <= number2; a++){ for(b= 1; b <= 9; b++){ %>
    <li><%= a + 'x' + b + '=' + (a * b) %></li>
    <% } } %>
  </body>
</html>

js에서 데이터를 4와 6을 보냈으니 구구단은 4~6단이 출력된다.

실습4

도메인 3개를 만들어서 get요청을 통해 화면 이동하기

실습 1,2,3의 도메인을 활용
a 태그를 활용하여 화면 이동
또한, 실습 1,2,3의 ejs에 <a href="/">뒤로가기</a> 을 넣어서 뒤로가기를 만들었다.

app.js 코드

get()에 "/changeImage"는 localhost:8001/changeImage를 의미한다. 따라서 localhost:8001/changeImage의 도메인을 열면 ./changeImage/changeImage의 파일을 랜더링을 하게 된다.

const express = require("express");

const app = express();
const PORT = 8001;

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


app.use(express.static("views/changeImage"));
app.use(express.static("views/larva"));

app.get("/", (req, res) => {
  res.render("app");
});

app.get("/changeImage", (req, res) => {
  res.render("./changeImage/changeImage");
});

app.get("/larva", (req, res) => {
  res.render("./larva/larva");
});

app.get("/multiplicationTables", (req, res) => {
  res.render("./multiplicationTables/multiplicationTables", {
    number: "4",
    number2: "6",
  });
});

app.listen(PORT, () => {
  console.log("http://localhost: ${PORT}");
});

app.ejs 코드

a태그를 사용하여 각각을 클리면 /changeImage, /larva, /multiplicationTables로 이동하게 하였다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a href="/changeImage">이미지 변경하기</a>
    <a href="/larva">애벌레 구경하기</a>
    <a href="/multiplicationTables">구구단</a>
  </body>
</html>

결과

https://github.com/DongHo-Kang/KDT-8-web/tree/6e054905d23d097a3f1f75138a31e8e10041f269/230728_Express

Express를 통해 간단하게 서버를 만들어 보았습니다. 아직 소소하게 작은 부분이지만 백엔드의 시작이라 생각하며 기초부터 차근차근하려고 합니다.

728x90

'[포스코x코딩온] 웹개발자 풀스택 부트캠프8기' 카테고리의 다른 글

[포스코x코딩온] Javascript 고급(구조분해할당, ...연산자, 클래스) (0)	2023.07.31
[포스코x코딩온] 비동기 처리, 콜백, Promise, await (0)	2023.07.29
[포스코x코딩온] 모듈(Module) (0)	2023.07.27
[포스코x코딩온] Node.js의 기본 개념 및 시작 (1)	2023.07.27
Marvel 성격 유형 테스트 (팀 프로젝트) (1)	2023.07.27

ABOUT ME

개발로 가치를 찾는 개발자 개발로 가치를 찾는 개발자

서버 만들기

http 모듈

Express 모듈

Express 사용

템플릿 엔진

실습1

실습 2

실습3

실습4

'[포스코x코딩온] 웹개발자 풀스택 부트캠프8기' 카테고리의 다른 글

티스토리툴바

ABOUT ME

서버 만들기

http 모듈

Express 모듈

Express 사용

템플릿 엔진

실습1

실습 2

실습3

실습4

'[포스코x코딩온] 웹개발자 풀스택 부트캠프8기' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바