CloudCoke
블로그 이미지

Home

Write

Setting

About Me
Dark
Javascript

[Javascript] 게시판 구현하기 (CRUD) - Update

CloudCoke
|2022. 11. 21. 16:15

오늘은 게시물을 수정 기능을 구현해보자!

파일 목록

📦Board
┣ 📂board
┃┣ 📜list.html
┃ ┣ 📜modify.html
┃ ┣ 📜view.html
┃ ┗ 📜write.html
┣ 📂public
┃ ┗ 📂js
┃ ┃ ┣ 📜list.js
┃ ┃ ┣ 📜modify.js
┃ ┃ ┣ 📜view.js
┃ ┃ ┗ 📜write.js
┗ 📜index.html

구현

구현해야 할 사항은 크게 다음과 같다.

  • 게시물 작성하기 (Create)
  • 리스트로 게시물 보여주기 (Read)
  • 게시물 클릭 시 해당 게시물 보여주기 (Read)
  • 게시물 수정하기 (Update)
  • 게시물 삭제하기 (Delete)

게시판 구현하기

게시판 구조

게시판 구조

게시물 수정하기 (Update)

# public/js/view.js

먼저 view 페이지에서 수정 버튼을 누르면 modify 페이지로 이동하도록 만들어 보자!

클릭 이벤트를 걸 요소를 선택해보자!

const boardsStr = localStorage.getItem("boards");
const boardsObj = JSON.parse(boardsStr);

const idx = location.search;
const index = idx.split("=")[1];
const board = boardsObj[index];

const beforeUrl = document.referrer;

const viewCount = (beforeUrl) => {
  if (beforeUrl.split("/").pop() === "list.html") {
    board.views++;
    const viewCountStr = JSON.stringify(boardsObj);
    localStorage.setItem("boards", viewCountStr);
  }
};

viewCount(beforeUrl);

const viewFrm = document.querySelectorAll("#viewFrm > div");

for (let i = 0; i < viewFrm.length; i++) {
  const id = viewFrm[i].id;
  viewFrm[i].innerHTML += " " + board[id];
}

const modifyBtn = document.querySelector("#modify");
console.log(modifyBtn);

view 페이지에서 수정 버튼을 선택한 결과

수정 버튼에 클릭 이벤트를 걸어주고 확인을 해보자!

const boardsStr = localStorage.getItem("boards");
const boardsObj = JSON.parse(boardsStr);

const idx = location.search;
const index = idx.split("=")[1];
const board = boardsObj[index];

const beforeUrl = document.referrer;

const viewCount = (beforeUrl) => {
  if (beforeUrl.split("/").pop() === "list.html") {
    board.views++;
    const viewCountStr = JSON.stringify(boardsObj);
    localStorage.setItem("boards", viewCountStr);
  }
};

viewCount(beforeUrl);

const viewFrm = document.querySelectorAll("#viewFrm > div");

for (let i = 0; i < viewFrm.length; i++) {
  const id = viewFrm[i].id;
  viewFrm[i].innerHTML += " " + board[id];
}

const modifyBtn = document.querySelector("#modify");

const modifyBtnHandler = (e) => {
  console.log("수정");
};

modifyBtn.addEventListener("click", modifyBtnHandler);

수정 버튼에 이벤트가 잘 걸린지 확인

다음과 같이 modify 페이지로 이동시켜줄 때 매개변수로 index라는 키와 게시글의 index 번호를 넘겨준다.

const boardsStr = localStorage.getItem("boards");
const boardsObj = JSON.parse(boardsStr);

const idx = location.search;
const index = idx.split("=")[1];
const board = boardsObj[index];

const beforeUrl = document.referrer;

const viewCount = (beforeUrl) => {
  if (beforeUrl.split("/").pop() === "list.html") {
    board.views++;
    const viewCountStr = JSON.stringify(boardsObj);
    localStorage.setItem("boards", viewCountStr);
  }
};

viewCount(beforeUrl);

const viewFrm = document.querySelectorAll("#viewFrm > div");

for (let i = 0; i < viewFrm.length; i++) {
  const id = viewFrm[i].id;
  viewFrm[i].innerHTML += " " + board[id];
}

const modifyBtn = document.querySelector("#modify");

const modifyBtnHandler = (e) => {
  location = "/board/modify.html" + idx;
};

modifyBtn.addEventListener("click", modifyBtnHandler);

view 페이지에서 modify 페이지로 넘어가는 모습

이제 modify 페이지로 이동해서 작업을 진행한다.

 

# public/js/modify.js

modify 페이지는 write 페이지와 view 페이지가 합쳐진 페이지라 볼 수 있다.

submit 이벤트를 걸기 위한 요소를 선택한다.

그리고 데이터가 들어갈 위치인 modifyFrm > div 요소들 선택해 준다.

const modifyFrm = document.querySelector("#modifyFrm");
const modifyFrmList = document.querySelectorAll("#modifyFrm > div");
console.log(modifyFrm);
console.log(modifyFrmList);

boards의 데이터가 들어갈 위치 확인

modify 페이지에 수정 완료 버튼에 submit 이벤트를 걸어준다.

submit의 기본 이벤트를 막아주고 이벤트가 잘 작동하는지 출력해본다.

const modifyFrm = document.querySelector("#modifyFrm");
const modifyFrmList = document.querySelectorAll("#modifyFrm > div");

const modifyHandler = (e) => {
  e.preventDefault();
  console.log("Hello");
};

modifyFrm.addEventListener("submit", modifyHandler);

submit 이벤트 작동확인

boards 데이터를 가져온다.

const modifyFrm = document.querySelector("#modifyFrm");
const modifyFrmList = document.querySelectorAll("#modifyFrm > div");
const boardsObj = JSON.parse(localStorage.getItem("boards"));

console.log(boardsObj);

const modifyHandler = (e) => {
  e.preventDefault();
};

modifyFrm.addEventListener("submit", modifyHandler);

boards에 저장된 데이터 확인

location.search를 이용해 이전 페이지에서 넘겨준 인덱스를 받아온다.

인덱스를 이용해 수정하려는 데이터를 확인해보자!

const modifyFrm = document.querySelector("#modifyFrm");
const modifyFrmList = document.querySelectorAll("#modifyFrm > div");
const idx = location.search;
console.log(idx);
const index = location.search.split("=")[1];
console.log(index);
const boardsObj = JSON.parse(localStorage.getItem("boards"));
const board = boardsObj[index];
console.log(board);

const modifyHandler = (e) => {
  e.preventDefault();
};

modifyFrm.addEventListener("submit", modifyHandler);

넘겨받은 인덱스 확인 및 수정할 데이터 확인

수정하기 전 데이터가 미리 들어가야 할 위치를 찾아보자!

const modifyFrm = document.querySelector("#modifyFrm");
const modifyFrmList = document.querySelectorAll("#modifyFrm > div");
const idx = location.search;
const index = location.search.split("=")[1];
const boardsObj = JSON.parse(localStorage.getItem("boards"));
const board = boardsObj[index];

for (let i = 0; i < modifyFrmList.length; i++) {
  const element = modifyFrmList[i].childNodes;
  console.log(element);
}

const modifyHandler = (e) => {
  e.preventDefault();
};

modifyFrm.addEventListener("submit", modifyHandler);

저장되어 있던 boards의 데이터가 들어갈 공간

찾은 위치에 수정하기 전 데이터를 넣어보자!

const modifyFrm = document.querySelector("#modifyFrm");
const modifyFrmList = document.querySelectorAll("#modifyFrm > div");
const idx = location.search;
const index = location.search.split("=")[1];
const boardsObj = JSON.parse(localStorage.getItem("boards"));
const board = boardsObj[index];

console.log(boardsObj[index]);
for (let i = 0; i < modifyFrmList.length; i++) {
  const element = modifyFrmList[i].childNodes[1];
  const id = element.name;
  element.value = board[id];
}

const modifyHandler = (e) => {
  e.preventDefault();
};

modifyFrm.addEventListener("submit", modifyHandler);

boards의 데이터가 위치에 맞게 들어간 모습

글을 작성하고 수정완료를 눌렀을 때 input 박스와 textarea의 값들을 가져와보자!

const modifyFrm = document.querySelector("#modifyFrm");
const modifyFrmList = document.querySelectorAll("#modifyFrm > div");
const idx = location.search;
const index = location.search.split("=")[1];
const boardsObj = JSON.parse(localStorage.getItem("boards"));
const board = boardsObj[index];

for (let i = 0; i < modifyFrmList.length; i++) {
  const element = modifyFrmList[i].childNodes[1];
  const id = element.name;
  element.value = board[id];
}

const modifyHandler = (e) => {
  e.preventDefault();
  const subject = e.target.subject.value;
  const writer = e.target.writer.value;
  const content = e.target.content.value;

  console.log(subject, writer, content);
};

modifyFrm.addEventListener("submit", modifyHandler);

수정된 데이터를 저장하기전 값을 확인하는 모습

값들을 저장하기 이전에 빈 값이 있는지 체크하는 함수를 만들어 보자!

const modifyFrm = document.querySelector("#modifyFrm");
const modifyFrmList = document.querySelectorAll("#modifyFrm > div");
const idx = location.search;
const index = location.search.split("=")[1];
const boardsObj = JSON.parse(localStorage.getItem("boards"));
const board = boardsObj[index];

for (let i = 0; i < modifyFrmList.length; i++) {
  const element = modifyFrmList[i].childNodes[1];
  const id = element.name;
  element.value = board[id];
}

const isEmpty = (subject, writer, content) => {
  if (subject.length === 0) throw new Error("제목을 입력해주세요");
  if (writer.length === 0) throw new Error("작성자를 입력해주세요");
  if (content.length === 0) throw new Error("내용을 입력해주세요");
};

const modifyHandler = (e) => {
  e.preventDefault();
  const subject = e.target.subject.value;
  const writer = e.target.writer.value;
  const content = e.target.content.value;

  try {
    isEmpty(subject, writer, content);
  } catch (e) {
    alert(e.message);
    console.error(e);
  }
};

modifyFrm.addEventListener("submit", modifyHandler);

빈 값을 체크하는 함수 실행 결과

이제 수정한 값을 boards 데이터에 저장하고 view 페이지로 이동할 수 있도록 만들어 보자!

const modifyFrm = document.querySelector("#modifyFrm");
const modifyFrmList = document.querySelectorAll("#modifyFrm > div");
const idx = location.search;
const index = location.search.split("=")[1];
const boardsObj = JSON.parse(localStorage.getItem("boards"));
const board = boardsObj[index];

for (let i = 0; i < modifyFrmList.length; i++) {
  const element = modifyFrmList[i].childNodes[1];
  const id = element.name;
  element.value = board[id];
}

const isEmpty = (subject, writer, content) => {
  if (subject.length === 0) throw new Error("제목을 입력해주세요");
  if (writer.length === 0) throw new Error("작성자를 입력해주세요");
  if (content.length === 0) throw new Error("내용을 입력해주세요");
};

const modifyHandler = (e) => {
  e.preventDefault();
  const subject = e.target.subject.value;
  const writer = e.target.writer.value;
  const content = e.target.content.value;

  try {
    isEmpty(subject, writer, content);
    board.subject = subject;
    board.writer = writer;
    board.content = content;

    const boardsStr = JSON.stringify(boardsObj);
    localStorage.setItem("boards", boardsStr);
    location.href = "/board/view.html" + idx;
  } catch (e) {
    alert(e.message);
    console.error(e);
  }
};

modifyFrm.addEventListener("submit", modifyHandler);

수정된 값이 반영이 되어 view 페이지에 반영이 된 모습

뒤로가기뒤로 가기 버튼을 구현하기 전에 뒤로 가기 부분부터 선택해보자!

const modifyFrm = document.querySelector("#modifyFrm");
const modifyFrmList = document.querySelectorAll("#modifyFrm > div");
const idx = location.search;
const index = location.search.split("=")[1];
const boardsObj = JSON.parse(localStorage.getItem("boards"));
const board = boardsObj[index];

for (let i = 0; i < modifyFrmList.length; i++) {
  const element = modifyFrmList[i].childNodes[1];
  const id = element.name;
  element.value = board[id];
}

const isEmpty = (subject, writer, content) => {
  if (subject.length === 0) throw new Error("제목을 입력해주세요");
  if (writer.length === 0) throw new Error("작성자를 입력해주세요");
  if (content.length === 0) throw new Error("내용을 입력해주세요");
};

const modifyHandler = (e) => {
  e.preventDefault();
  const subject = e.target.subject.value;
  const writer = e.target.writer.value;
  const content = e.target.content.value;

  try {
    isEmpty(subject, writer, content);
    board.subject = subject;
    board.writer = writer;
    board.content = content;

    const boardsStr = JSON.stringify(boardsObj);
    localStorage.setItem("boards", boardsStr);
    location.href = "/board/view.html" + idx;
  } catch (e) {
    alert(e.message);
    console.error(e);
  }
};

const backBtn = document.querySelector("#back");
console.log(backBtn);

modifyFrm.addEventListener("submit", modifyHandler);

뒤로가기 버튼을 선택한 결과

선택한 뒤로가기 버튼에 이벤트를 걸어서 이전 페이지로 이동할 수 있도록 해보자!

const modifyFrm = document.querySelector("#modifyFrm");
const modifyFrmList = document.querySelectorAll("#modifyFrm > div");
const idx = location.search;
const index = location.search.split("=")[1];
const boardsObj = JSON.parse(localStorage.getItem("boards"));
const board = boardsObj[index];

for (let i = 0; i < modifyFrmList.length; i++) {
  const element = modifyFrmList[i].childNodes[1];
  const id = element.name;
  element.value = board[id];
}

const isEmpty = (subject, writer, content) => {
  if (subject.length === 0) throw new Error("제목을 입력해주세요");
  if (writer.length === 0) throw new Error("작성자를 입력해주세요");
  if (content.length === 0) throw new Error("내용을 입력해주세요");
};

const modifyHandler = (e) => {
  e.preventDefault();
  const subject = e.target.subject.value;
  const writer = e.target.writer.value;
  const content = e.target.content.value;

  try {
    isEmpty(subject, writer, content);
    board.subject = subject;
    board.writer = writer;
    board.content = content;

    const boardsStr = JSON.stringify(boardsObj);
    localStorage.setItem("boards", boardsStr);
    location.href = "/board/view.html" + idx;
  } catch (e) {
    alert(e.message);
    console.error(e);
  }
};

const backBtn = document.querySelector("#back");

const backBtnHandler = (e) => {
  location.href = document.referrer;
};

modifyFrm.addEventListener("submit", modifyHandler);
backBtn.addEventListener("click", backBtnHandler);

뒤로가기 버튼이 잘 작동하는 모습

'Javascript' 카테고리의 다른 글

[Javascript] 게시판 구현하기 (CRUD) - 코드 수정  (1) 2022.11.22
[Javascript] 게시판 구현하기 (CRUD) - Delete  (0) 2022.11.21
[Javascript] 게시판 구현하기 (CRUD) - Read  (0) 2022.11.20
[Javascript] 게시판 구현하기 (CRUD) - Create  (0) 2022.11.19
[Javascript] 댓글 구현하기 (Create, Read)  (2) 2022.11.16

티스토리툴바