메모장 만들기[경고창 발생, 페이지 나누기 ,ssr에 따른 템플릿사용결정]

🗃️javascript/프로젝트

메모장 만들기[경고창 발생, 페이지 나누기 ,ssr에 따른 템플릿사용결정]

하얀성 2023. 11. 8. 16:44

db 형식

memo 입력화면

1. 화면 생성 및 입력에러 경고창 발생시키기.

프론트 단에서 일어나는 일은 프론트에서 해결하는게 맞다.

그래서 html에 js 코드를 추가시켜서 코드를 검사하고 경고창을 띄워줘야 한다.

onsubmit이라는 form 태그의 특성을 통해서 submit 할때 내가 원하는 함수를 실행하도록 했다.

그리고 index는 문자열화 하는 것도 잊지말자.

server.js

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

memo.html

const bodyParser = require('body-parser')
const express = require('express')
const app = express()
const nunjucks = require('nunjucks')
const mysql = require('mysql')

const connection = mysql.createConnection({// db연결코드
  host: 'localhost',
    user: 'root',
    password: '1234',
    database: 'comma'
})

connection.connect(err => {
  if (err) {
    console.error('An error occurred while connecting to the DB');
    throw err;
  }
  console.log('Connected to MySQL Database!');
})


app.set("view engine", "html")
nunjucks.configure(__dirname + "/views", {
  express: app
})
app.use(bodyParser.urlencoded({ extended: true}))


app.get('/memo', (req, res) => { 
  //첫 화면 렌더링, 요소기입 검사
  res.render("memo")
  })

app.post('/memo', (req,res) => {
  let iname = req.body.wname;
  let imemo = req.body.wmemo; 
  const now = new Date();
  let idate = now.toLocaleString('ko-KR'); //그리니치 -> 한국시간

  let query = 'insert into memojang(name, wdate, message) values(?, ?, ?)';
  connection.query(query,[iname, idate, imemo], (err, results) => {
    if(err){
      console.error('데이터 넣을 때 에러')
      res.status(500).send('DB문제야')
    }else{
      res.render('memo')
    }
  })
})

app.get('/memoshow', (req, res) => {
  let total = "select * from memojang order by num desc";
  connection.query(total,(error,results)=> {
    if (error) throw error;
    else{
      res.render("memoshow",{
        memos: results
      })
    }
  })
  
})

app.listen(52273, () => {
  console.log('Server ruuning at http://127.0.0.1:52273');
})

document.forms는 웹 브라우저가 제공하는 JavaScript API의 일부로, document 객체의 속성입니다. document 객체는 웹 페이지의 HTML 문서에 대한 진입점 역할을 하며, 브라우저에서 로드된 문서와 상호 작용할 수 있는 방법을 제공

document.forms는 문서 내에 존재하는 모든 <form> 요소의 HTMLCollection을 반환합니다. HTMLCollection은 문서에 포함된 HTML 요소들의 집합으로, 배열과 유사하지만 배열은 아닙니다.

html에서 선언후, 아래와 같이 document의 객체속성인 forms의 인덱스를 통해 데려올 수 있다.

<form name="form1">...</form>
<form name="form2">...</form>

var form1 = document.forms['form1'];
var form2 = document.forms['form2'];

2. 다른 화면에 db내용 출력하기.(없을 땐 없다고, 있을 땐 있다고 출력)

만들다가 나온...

두가지 방식. server -side -rendering 이냐? client - side -rendering 이냐?

client-side-rendering이 더 보기 편하고 아는 것도 많이 나오는데...

요즘 대세는 ssr이다. 템플렛 기호를 쓰는.. 이 코드가 대세다.

그러니 여기에 좀 더 익숙해지기 위해서 ssr을 기준으로 앞으로 코드를 짜려한다.

memoshow.html

(ssr 버전으로 nunjucks 템플릿으로 html코드에 추가한 모습)

//for 문을 돌면서 memos 라는 result에서 memo라는 index 변수를 통해 하나씩 뺐다.

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>메모내용</title>
</head>

<body>

  <table border="1" width="700">
    <thead>
      <tr>
        <td width="100">이름</td>
        <td width="150">날짜</td>
        <td width="450">메모</td>
      </tr>
    </thead>
    <tbody>
      {% for memo in memos %}
      <tr>
        <td>{{ memo.name }}</td>
        <td>{{ memo.wdate }}</td>
        <td>{{ memo.message }}</td>
      </tr>
      {% else %}
      <tr>
        <td colspan="4">아무것도 없습니다.</td>
      </tr>
      {% endfor %}
    </tbody>

  </table>
</body>

memo.js

app.set("view engine", "html")
nunjucks.configure(__dirname + "/views", {
  express: app
})
app.use(bodyParser.urlencoded({ extended: true}))


app.get('/memo', (req, res) => { 
  //첫 화면 렌더링, 요소기입 검사
  res.render("memo")
  })

app.post('/memo', (req,res) => {
  let iname = req.body.wname;
  let imemo = req.body.wmemo; 
  const now = new Date();
  let idate = now.toLocaleString('ko-KR'); //그리니치 -> 한국시간

  let query = 'insert into memojang(name, wdate, message) values(?, ?, ?)';
  connection.query(query,[iname, idate, imemo], (err, results) => {
    if(err){
      console.error('데이터 넣을 때 에러')
      res.status(500).send('DB문제야')
    }else{
      res.render('memo')
    }
  })
})

app.get('/memoshow', (req, res) => {
  let total = "select * from memojang order by num desc";
  connection.query(total,(error,results)=> {
    if (error) throw error;
    else{
      res.render("memoshow",{
        memos: results
      })
    }
  })
  
})

참고: 오류가 생긴 부분들

현재시간 문자열이 너무 길어서 wdate의 데이터타입을 20-> 50으로 수정

3. 페이지 나누기

ajax, jQuery를 통한 csr 코드를 짜느냐..

EJS 템플릿을 통한 ssr 코드를 짜느냐..

둘다 아는게 베스트지만. next.js로 어서 넘어가서 거기에 힘을 더 실어주고 싶다.

node.js보단 리액트에 집중하고 싶다.

시장 수요: 현재 산업계에서는 어떤 기술이 더 많이 요구되고 있는지 조사합니다. 예를 들어, React나 Angular와 같은 프론트엔드 프레임워크를 사용하는 회사가 많다면 CSR을, Node.js와 같은 서버 사이드 플랫폼을 사용하는 회사가 많다면 SSR을 공부하는 것이 유리할 수 있습니다.

결론은!!!!!!!!!!!!!!!!!!!! CSR로 코드를 다시 이어나가 보도록 하겠다.

그냥 ajax, jQuery가 코드를 이해하는데 도움이 될듯하기 때문.