NodeJs-Express CRUD 파일저장부터 테스트

write.html

<!-- //상속 받을 것 -->
{% extends 'base.html' %}

<!-- 안에 내용 -->
{% block content %}
<h1>글 작성 페이지입니다.</h1>
<form action="/write" method="post">
    <label for="title">제목</label>
    <input type="text" name="title" id="title">
    <br>
    <label for="contents">내용</label>
    <textarea name="contents" id="contents" cols="20" rows="5"></textarea>
    <br>
    <label for="date">날짜</label>
    <input type="date" name="date" id="date">
    <br>
    <!-- input submit -->
    <input type="submit" value="글 작성 완료">
</form>
{% endblock %}

index.js

import express from "express";
import nunjucks from "nunjucks";
import bodyParser from "body-parser";

const app = express();

// body parser set
//서버에서 쉽게 접근하고 처리할 수 있도록 함
app.use(bodyParser.urlencoded({ extended: false })); // express 기본 모듈 사용
app.use(bodyParser.json());

// view engine set
app.set("view engine", "html"); // main.html -> main(.html)

// nunjucks
nunjucks.configure("views", {
  watch: true, // html 파일이 수정될 경우, 다시 반영 후 렌더링
  express: app,
});

// middleware
// main page GET
app.get("/", async (req, res) => {
  res.render("main");
});

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

app.post("/write", async (req, res) => {
  //request 안에 있는 내용들을 처리
  //request.body
  const title = req.body.title;
  const contents = req.body.contents;
  const date = req.body.date;

  //데이터 저장

  //렌더링
  res.render("detail", {
    detail: { title: title, contents: contents, date: date },
  });
});

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

app.listen(3000, () => {
  console.log("Server is running");
});

/write 부분 안을 보면
데이터 저장을 위한 부분을 주석으로만 우선 적어둠

---

data 폴더 만들고 writing.json 생성
안에 [] 넣고 저장

---

index.js

하단꺼 추가
import path from "path"; // 추가된 부분
import fs from 'fs';

---

//resolve() : 현재 작업 디렉토리의 절대 경로를 반환
const __dirname = path.resolve();

//file path
// join을 통해서 경로들을 합쳐줌 __dirname :실행 경로 + /data/writing.json
const filePath = path.join(__dirname, "data", "writing.json");
console.log('경로는?'+filePath);

경로 선언

---

app.post("/write", async (req, res) => {
  //request 안에 있는 내용들을 처리
  //request.body
  const title = req.body.title;
  const contents = req.body.contents;
  const date = req.body.date;

  // 데이터 저장
  // data/writing.json 안에 글 내용 저장
  // NodeJs는 비동기인데 안읽힌 채로 렌더링을 할 수 없으니까
  // readFileSync는 동기적으로 파일을 읽고⭐️
  // 파일을 모두 읽은 후에 다음 코드가 실행됩니다.
  const fileData = fs.readFileSync(filePath);
  //렌더링
  res.render("detail", {
    detail: { title: title, contents: contents, date: date },
  });
});

NodeJs는 비동기인데 안읽힌 채로 렌더링을 할 수 없으니까
readFileSync는 동기적으로 파일을 읽고⭐️
파일을 모두 읽은 후에 다음 코드가 실행됩니다.
const fileData = fs.readFileSync(filePath);

/write 접근

글 작성을 누르면 버퍼 데이터를 갖게 됨
로그

<Buffer 5b 5d>

버퍼단위는 바이트 단위의 원시적인 데이터 타입

파일데이터를 JSON으로 파싱 필요

  //JSON으로 파싱
  const writings = JSON.parse(fileData);
  console.log(writings);

app.post("/write", async (req, res) => {
  //request 안에 있는 내용들을 처리
  //request.body
  const title = req.body.title;
  const contents = req.body.contents;
  const date = req.body.date;

  // 데이터 저장
  // data/writing.json 안에 글 내용 저장
  // NodeJs는 비동기인데 안읽힌 채로 렌더링을 할 수 없으니까
  // readFileSync는 동기적으로 파일을 읽고⭐️
  // 파일을 모두 읽은 후에 다음 코드가 실행됩니다.
  const fileData = fs.readFileSync(filePath); //파일 읽기
  console.log(fileData);

  //JSON으로 파싱
  const writings = JSON.parse(fileData); // 파일 변환
  // console.log(writings);
  
  //request 데이터를 저장
  writings.push({
    'title': title,
    'contents': contents,
    'date': date
  });
  //data/writing.json에 저장하기
  //저장할때는 파일을 다시 버퍼 형태로 변환
  fs.writeFileSync(filePath, JSON.stringify(writings));

  //렌더링
  res.render("detail", {
    detail: { title: title, contents: contents, date: date },
  });
});

request 데이터를 저장
writings.push({
'title': title,
'contents': contents,
'date': date
});
data/writing.json에 저장하기
//저장할때는 파일을 다시 버퍼 형태로 변환
fs.writeFileSync(filePath, JSON.stringify(writings));

원하는 값 들어간 것 확인 가능

여러번 넣으면 여러번 저장됨

app.get("/", async (req, res) => {
  //파일 가져옴
  const fileData = fs.readFileSync(filePath); //읽기
  const writings = JSON.parse(fileData); //변환
  res.render("main", { list: writings }); //메인에서 list 찍게 해둠
});

object로 찍히는 상태

{% extends 'base.html' %}

{% block content %}
<h1>메인 페이지</h1>
{% if list %}
{% for writing in list %}
<p>{{ writing }}</p>
{% endfor %}
{% else %}
<p> 작성된 글이 없습니다.</p>
{% endif %}
{% endblock %}

{% for writing in list %}
...
{% endfor %}

for문도 end로 닫아야함

writing 으로 가져와도

이런식으로 찍히게 됨
writing.date 이런식으로 해야지 안에 값으로 잘 보이게 됨

{% extends 'base.html' %}

{% block content %}
<h1>메인 페이지</h1>
{% if list %}
<!-- 부트스트랩 적용: table -->
<table class="table">
    <tr>
        <th>글제목</th>
        <th>글내용</th>
        <th>글날짜</th>
    </tr>

    {% for writing in list %}
    <tr>
        <td>{{ writing.title }}</td>
        <td>{{ writing.contents }}</td>
        <td>{{ writing.date }}</td>
    </tr>
    {% endfor %}
</table>
{% else %}
<p> 작성된 글이 없습니다.</p>
{% endif %}
{% endblock %}

테이블에 담았고
선이 보이는 부트스트랩을 적용했음

---

보실 분이 없겠지만 혹시나...!

디자인이 불편하실 분이 있을 것 같은데,
학습 목적으로 한거라 디자인은 안한 상태라 양해 부탁드립니다 (이미지만 몇개 얹은 상태)🙏

---

---

디자인 좀 곁들여봄 (footer)