Node.js(9) - express를 활용한 게시판 구현

728x90

1) Node.js

1-1) express 기본 세팅

1-1-1) server 대기 상태

1-1-2) 템플릿 엔진 설정

1-1-3) 정적파일 미들웨어 생성

1-1-4) bodyParser

1-2) 코드 정리

1) Node.js

1-1) express 기본 세팅

DBMS, 즉 데이터베이스 없이 구현할 예정

사전 숙지 사항

express 기본 설명
게시판 형태 숙지

1-1-1) server 대기 상태

$ npm init -y  # package.json 파일 생성
$ npm install express  # 외장모듈인 express 설치 및 node_modules 디렉토리 생성

# server.js 파일 생성 및 실행
$ node server

const express = require("express");
const app = express();

// 서버를 대기 상태로 만듦!!
app.listen(3000, () => {
  console.log("server start");
});

1-1-2) 템플릿 엔진 설정

템플릿 엔진을 설정한다는 것은

"동적파일(페이지는 하나이지만 변수를 통해 페이지, 즉 html을 여러 개 만들 수 있는 것)을 만든다"는 의미이다!!

템플릿 엔진은 express가 기본적으로 제공하지 않음!!

--> 이에 우리가 사용할 "nunjucks"를 설치하여 사용할 예정!

$ npm install nunjucks

1-1-3) 정적파일 미들웨어 생성

"정적파일 미들웨어"의 경우, express가 기본적으로 제공하는 것이다!

// 문법 : app.use(express.static(디렉토리 명))
app.use(express.static('public'));

1-1-4) bodyParser

express는 기본적으로 req 객체의 body를 객체화해주지 않음!

(즉, express는 기본적으로 bodyParser가 구현되어 있지 않다.)
--> 따라서 "bodyParser"가 필요하다!!

(중요!!) request body를 객체화시키는 것이 "bodyParser"이다!!

app.use(express.urlencoded({ extended: false }));

1-2) 코드 정리

server.js

const express = require("express");
const nunjucks = require("nunjucks");
const app = express();

const list = [{ name: "테스트", content: "테스트", subject: "테스트" }]; // 로컬 스토리지 역할을 하는 코드(전역변수 "list") --> 단, 서버가 꺼지면 해당 데이터는 날아감!(즉, 서버가 돌아갈 때만 데이터가 업데이트됨!)

app.set("view engine", "html");
// views : 템플릿 엔진을 몰아넣을 디렉토리
nunjucks.configure("views", {
  express: app,
});

// public : 정적 파일들을 모아두는 디렉토리
app.use(express.static("public")); // /js/index.js
app.use(express.urlencoded({ extended: false })); // 해당 코드가 실행되면 body를 넣어줌!!(해당 코드는 express가 bodyParser를 사용하겠다는 의미!!)

// render : 템플릿 엔진을 읽어서 body 영역을 만들어주는 메서드("render"는 화면에 그려주는 개념이 아니라 응답 메시지를 주는 개념이다!!)
app.get("/", (req, res) => {
  // const name = req.query.name;
  // 바로 위의 코드를 구조분해할당을 써서 짧게 수정한 코드
  const { name } = req.query;
  // res.render("index.html", { name: name });
  // 바로 위의 코드를 구조분해할당을 써서 짧게 수정한 코드
  res.render("index.html", { name });
});

app.get("/list", (req, res) => {
  // res.render("list.html", { list: list });
  // 바로 위의 코드를 구조분해할당을 써서 짧게 수정한 코드
  res.render("list.html", { list });
});

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

app.post("/write", (req, res) => {
  // const subject = req.body.subject
  // const name = req.body.name
  // const content = req.body.content
  // 위의 코드들을 객체 구조분해할당을 사용하여 간략히 표현한 코드
  const { subject, content, name } = req.body; // 해당 코드는 객체 구조분해할당 구문이라 배열 구조분해할당(인덱스가 기준이 되기에 배열 안 요소의 순서가 굉장히 중요함!!)과 달리 순서가 상관없음!!
  // console.log(subject, content, name);
  list.push({ subject, content, name });

  res.redirect(`/view?index=${list.length - 1}`);
});

app.get("/view", (req, res) => {
  // const index = req.query.index
  // 바로 위의 코드를 구조분해할당을 써서 짧게 수정한 코드
  const { index } = req.query;
  console.log(list[index]); // 배열 안의 객체가 출력됨!! --> {name: 'sangbeom', content: '테스트 내용', subject: '게시글 1'}
  res.render("view.html", {
    name: list[index].name,
    content: list[index].content,
    subject: list[index].subject,
  });
  // res.render('view.html', {...list[index]}) --> 스프레드 문법(해당 배열 안의 요소를 모두 꺼내서 펼쳐줌!)을 사용하여 위의 코드를 간단히 표현한 코드
});

app.listen(3000, () => {
  console.log("server start");
});

index.html

alert("hello world!");

index.js

<!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>
    <script type="text/javascript" src="/js/index.js"></script>
  </head>
  <body>
    {{name}} Hello world~~!!!
    <a href="/list">리스트 바로가기</a>
  </body>
</html>

list.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>Document</title>
  </head>
  <body>
    <h1>게시판 리스트 입니다.</h1>
    <table>
      <tr>
        <td>번호</td>
        <td>제목</td>
        <td>작성자</td>
        <td>작성내용</td>
      </tr>
      {% for item in list %}
      <tr>
        <td>{{loop.index-1}}</td>
        <td><a href="/view?index={{loop.index-1}}">{{item.subject}}</a></td>
        <td>{{item.name}}</td>
        <td>{{item.content}}</td>
      </tr>
      {% endfor %}
    </table>
    {{list[0].name}} {{list[0].content}} {{list[0].subject}}
    <a href="/write">글작성</a>
  </body>
</html>

※ loop.index의 경우, "0"이 아니라 "1"부터 시작하기에 여기에 "-1"을 해줘야 배열 인덱스를 정확히 구할 수 있음!!

write.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>Document</title>
  </head>
  <body>
    <form method="post" action="/write">
      <ul>
        <li>제목 : <input type="text" name="subject" /></li>
        <li>이름 : <input type="text" name="name" /></li>
        <li>
          내용 <br />
          <textarea name="content"></textarea>
        </li>
      </ul>
      <button type="submit">전송</button>
    </form>
  </body>
</html>

view.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>Document</title>
  </head>
  <body>
    <h2>view 페이지 입니다.</h2>
    <ul>
      <li>제목 : {{subject}}</li>
      <li>작성자 : {{name}}</li>
      <li>
        내용 <br />
        {{content}}
      </li>
    </ul>
    <a href="/list">리스트 보기</a>
  </body>
</html>

저작자표시

'Node.js' 카테고리의 다른 글

Node.js(11) - AJAX 기본 포맷, server 분리(front/back) 구현 (0)	2023.01.03
Node.js(10) - express를 활용한 게시판 구현(CRUD) 및 Router 나누기 (0)	2022.12.20
Node.js(8) - express (0)	2022.12.14
Node.js(7) - HTTP, 동적 웹 페이지 구현 (0)	2022.12.13
Node.js(6) - HTTP, Node.js 내부 카테고리, file system, HTML 불러오기 (0)	2022.12.12

CodeTraveler

Node.js(9) - express를 활용한 게시판 구현

'Node.js' 카테고리의 다른 글

티스토리툴바

Node.js(9) - express를 활용한 게시판 구현

'Node.js' 카테고리의 다른 글

'Node.js' Related Articles

티스토리툴바