본문 바로가기
시작/TIL(Today I Learned)

221118 실전예제 - CRUD 게시판 만들기 (2)

by 백씨네 2022. 11. 19.

오늘 내가 배운 것

1. 게시판 만들기 기본 흐름

2. 수정기능 구현

3. 삭제기능 구현

4. 조회수 증가 기능 구현

 

1. 게시판 만들기 기본 흐름

 

리스트를 구현하려면 기본적으로 로컬스토리지에 있는 데이터를 가져오는 작업이 필요하다.
가져오는 코드(localStorage.getItem())
기본 셋팅
로컬 스토리지에 데이터가 있냐 없냐에 따라 코드가 다르게 시작된다.
- 처음 접속한 사람 (데이터가 없으니 빈 배열로 시작한다.)
- 처음 접속하지 않은 사람 (있는 데이터를 보여주겠다.)

데이터를 가져오기만 하지않고 상황에 따라서 로컬스토리지에 저장도 한다. (setItem())

 

리스트 페이지


새로운 글쓰기를 위한 버튼과 제목을 눌렀을 때 나오는 뷰 페이지로 이루어져있다.
crud에서 c부터 만들어야한다.. 그래서 글쓰기 부터 구현한다.

글쓰기 페이지의 가장 큰 목적은 데이터를 로컬 스토리지에 넣어주는 것이 가장 큰 목적이다.
로컬스토리지는 기본적으로 데이터를 string으로 밖에 저장을 못한다

글쓰기는 내용을 바꾸는 것이 아니라 추가하는 것이기 때문에 기존에 있는 데이터를 받아서 그 데이터에 내가 원하는 데이터를 추가하고 그 데이터를 다시 로컬 스토리지에 올린다.


글쓰기 코드 (write)


로컬스토리지에서 데이터를 처음 불러온다(처음이면 빈 배열)
배열안에 작성한 글에 대한 데이터를 넣고 다시 타입을 스트링으로 바꾼다음 로컬스토리지에 넣는다.

에러가 발생하면 그 앞에 있는 데이터가 오류일 확률이 있다    
메서드를 사용하면 어떤 데이터 타입인지, 결과가 어떻게 나오는지 확인을 늘 하자.


글 보기페이지 (view)


가장 큰 특징 : 쿼리스트링이 있다. ( ?index=1 )
로컬스토리지에는 배열이 들어가있다. 근데 뷰페이지는 하나의 글을 보겠다는 것이다.(= 이 배열안에서 특정 요소만 필요)
html특성상 파일간에 데이터를 공유할 수 없기 때문에 데이터를 넘길 때 url에 고유 인덱스를 남겨서 뷰페이지에서 url을 확인하고 인덱스를 가져감.
location.search 에서 쿼리스트링을 출력하고, 거기서 인덱스를 뽑아서 사용함.

주요 기능

- 코드 1: 글보기에서 로컬스토리의 데이터를 가져와서 확인하는데 그 데이터가 배열형태의 스트링이다 그래서 그 데이터를 객체로 변환하여 글을 보여주는 코드
- 코드 2 : 인덱스 번호를 가져오기 위해 특정객체만 뽑아오는 코드(숫자)
- 코드 3 : 작성한 글을 삭제하기 위한 코드
- 코드 4 : 뷰 페이지에 들어오면 조회수를 올려주는 기능을 위한 코드
- 코드 5 : 수정을 위한 페이지 이동 버튼 이벤트를 주는 코드

글보기는 데이터를 받아와서 보기만 하기때문에 다시 데이터를 저장시킬 필요없다.(C,R만 구현했을 때)
삭제를 하거나 조회수 증가를 구현하려면 데이터를 다시 보내줘야한다


수정페이지

 

글보기 페이지에서 수정버튼이 있음.(수정 버튼을 누르면 수정페이지로 이동하는 코드를 view 페이지에서 작성해주어야 한다.)
내가 가지고 있는 데이터를 로컬 스토리지에서 데이터를 가져와서 수정한다.
index를 글보기에서 그대로 받아서 어떤 글을 수정하는지 알게 함,내가 수정한 데이터를 변환해서 다시 올려야함.

 

 

2. 수정기능 구현

 

1. view.html에 수정하는 버튼을 만든다. 그 버튼이 수정하는 페이지로 이동할 수 있게 한다.

<button id="btn">글수정</button>
const btn = document.querySelector("#btn")

btn.addEventListener("click", function(){
    location.href = `/board/modify.html?index=${index}`
})

 

2-1. modify.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>
        <a href="/index.html">로고</a>
    </h1>
    <h2>글 수정하기</h2>
    <form id="modifyFrm">
        <div>
            제목 :<input type="text" name="subject" >
        </div>
        <div>
            작성자 : <input type="text" name="writer">
        </div>
        <div>
            내용 :
            <textarea name="content"></textarea>
        </div>
        <input  type="submit" value="글수정">
    </form>
    <script src="../public/js/modify.js" type="text/javascript"></script>
</body>
</html>

 

2-2. modify.js 

 

const frm = document.querySelector("#modifyFrm")
const subject =  document.querySelector("input[name=subject]") // css선택자 쓰듯이
const writer = document.querySelector("input[name=writer]")
const content = document.querySelector("textarea[name=content]")

const idx = location.search.split('=')
const index = idx[1]
const item = localStorage.getItem("boards")
const boards = JSON.parse(item)

console.log(boards)
console.log(boards[index])

subject.value = boards[index].subject
writer.value = boards[index].writer
content.innerHTML = boards[index].content // textarea 는 태그 사이에 글이 써지기 때문에 innerHTML

frm.addEventListener("submit", function(e){
    e.preventDefault()
    console.log(subject.value)
    console.log(writer.value)
    console.log(content.value)
    
    boards[index].subject = subject.value
    boards[index].writer = writer.value
    boards[index].content = content.value

    const data = JSON.stringify(boards)
    localStorage.setItem('boards', data)

    location.href = `/board/view.html?index=${index}`
})

 

 

3. 삭제기능 구현

 

1. view.html에 삭제 버튼을 추가하여 준다.

<button id="delete">글삭제</button>

2. 삭제 버튼은 페이지 이동이 필요 없고, 뷰 페이지에서 확인 창을 출력해서 확인/취소 버튼을 선택할 수 있도록 한다.

 

//이벤트 구현 코드
function deleteHandler(){
    const deletCheck = confirm("삭제하시겠습니까?")
    if(deletCheck){
        // console.log(board)
        // console.log(boards)
        const boardz = boards.splice(index, 1)
        // console.log(boards)
        const item = JSON.stringify(boards)
        console.log(item)
        localStorage.setItem("boards", item )
        location.href= `/board/list.html`
    }

}
//버튼 클릭시 이벤트 발동
delete_btn.addEventListener("click" , deleteHandler)

 

 

4. 조회수 증가 기능 구현

 

처음엔 조회수를 증가 시키기 위해서 리스트 페이지에서 제목을 누르면 조회수가 증가하게 하도록 구현하였다.

지금 페이지 구성이 ' list '에서 글쓰기 버튼을 누르면 글을 등록할 수 있는 페이지가 나오고 글작성 버튼을 누르면 view 페이지로 넘어와서 방금 쓴 글을 확인할 수 있었다.  구현을 하다보니 뷰 페이지만 들어간다고 조회수가 오른다고 하면 내가 작성하고 나서 기본 1로 될 가능성이 생긴다고 판단했고, 이런 이슈를 생각하면서 코드를 작성하는데 그 제목을 선택하는 과정에서 너무 복잡하고 비효율적인 코드로 인해 실패하고 다른 방법을 찾았다.

 

이전 페이지를 알 수 있으면 내가 진입한 페이지가 list라는 것을 안다면 위에 이슈를 해결 할 수 있었다

 내 이전 페이지를 아는 메서드로 'document.referrer' 을 사용했다.

const a = document.referrer
console.log(a)
let result = a.indexOf("list.html")
if(result !== -1){
    board.hit += 1
    console.log(board)
    const item = JSON.stringify(boards)
    localStorage.setItem("boards", item)
}

 

 

 

영상으로 결과물 확인하기

 

'시작 > TIL(Today I Learned)' 카테고리의 다른 글

2211222 Linux - 사용자 계정과 그룹, 패키지 매니저  (0) 2022.11.22
221121 Linux - 리눅스 기초  (1) 2022.11.21
221117 실전예제 - CRUD 게시판 만들기  (0) 2022.11.18
221116 실전예제 - try_catch(), 데이터셋(dataset, data- ), CRUD 댓글창 만들기  (0) 2022.11.17
221115 실전예제 - Counter 만들기, CRUD-댓글창 만들기  (0) 2022.11.16

관련글

댓글

티스토리툴바