[220204] 서버로 이루어진 게시판 만들기(CRUD 구현 : 생성,작성,수정,삭제)

목록

1.   홈 만들기

2.   리스트 게시판 만들기

3.   글쓰기 게시판 만들기

4.   글보기 게시판 만들기

5.   글삭제 기능 만들기

6.   글수정 기능 만들기

 

---

여태까지 배웠던 내용을 총 정리하면서 게시판을 만들어보자.

웹템플릿 express, 템플릿엔진 nunjucks를 사용하기 위한 전제코드는 밑에 적어놓고, 앞으로 설명할때는 생략하겠다.

//express를 쓰기 위한 세팅
const express=require('express')
const app=express()

//nunjucks를 쓰기 위한 세팅
const nunjucks=require('nunjucks')
app.set('view engine','html')
nunjucks.configure('views',{
    express:app
})

//header body로 오는 텍스트를 읽기 위한 세팅
app.use(express.urlencoded({extended:true}))

 

 

---

 

1.   홈 만들기

 

코드와 해석은 더보기에

//server.js
app.get('/',(req,res)=>{
    res.render('index')
})

app.listen(3000,()=>{
    console.log('sever start')
})

 

브라우저의 요청을 항시 듣기위한 listen

홈 url의 요청에 index.html을 넘겨주는 app.get

 

혹시 실행하는 법을 잊어버렸다면, vscode에서 다음을 입력하고,

http://localhost:3000/를 입력한다.

node 실행할파일명.js

 

 

---

 

 

2.   리스트 게시판 만들기

 

 

코드와 해석은 더보기에

//index.html
<h1>
	<a href="/">Logo</a>
</h1>

<ul>
    <li>
        <a href="/board/list">게시판 가기</a>
    </li>
</ul>

//list.html
<h1>
	<a href="/">Logo</a>
</h1>

<table>
    <tr>
        <td>번호</td>
        <td>제목</td>
        <td>작성자</td>
        <td>작성일</td>
    </tr>

    <tr>
        <td>1</td>
        <td>이 곳은 제목</td>
        <td>나는야 작성자</td>
        <td>오늘은 작성일</td>
    </tr>
</table>

//server.js
app.get('/board/list',(req,res)=>{
    res.render('list')
}

 

 

 

Logo를 클릭하면 홈(/)으로 이동 : index.html 넘겨주기

게시판을 클릭하면 리스트 게시판(/board/list)으로 이동 : list.html 넘겨주기

 

 

---

 

 

3.   글쓰기 게시판 만들기 + 리스트 게시판 업그레이드

 

코드와 해석은 더보기에

//write
//logo 생략
<form method="post" action="/board/write">
    <ul>
        <li>
        	제목 : <input type="text" name="subject"> 
        </li>
        <li>
        	작성자 : <input type="text" name="username">
        </li>
        <li>
        	작성일 : <input type="text" name="date">
        </li>
    </ul>
    <input type="submit" value="write">
</form>

//list.html
<table>
    <tr>
        <td>번호</td>
        <td>제목</td>
        <td>작성자</td>
        <td>작성일</td>
    </tr>

    {% for item in list %}
    <tr>
        <td>{{loop.index}}</td>
        <td>{item.subject}}</td>
        <td>{{item.username}}</td>
        <td>{{item.date}}</td>
    </tr>
    {% endfor %}
</table>

//boardData.js
const list=[
    {
        subject:"클래식 피아노",
        username:"로우파이",
        date:"22-02-01"
    },
    {
        subject:"오후의 교실",
        username:"asmr",
        date:"22-01-13"
    },
    {
        subject:"사클 힙합플레이",
        username:"에센셜",
        date:"21-08-21"
    },
]

module.exports={
    list:list,
}

//server.js
app.get('/board/list',(req,res)=>{
    res.render('list',{
        list:list,
    })
})

app.get('/board/write',(req,res)=>{
    res.render('write')
})

app.post('/board/write',(req,res)=>{
    let board={...req.body}
    list.push(board)
    res.redirect('/board/list')
})

 

글쓰기 버튼을 누르면 글쓰기 게시판(/board/write)으로 이동 : write.html 넘겨주기

내용을 채울 boardData.js를 만들어서 리스트 게시판으로 넘겨주기 : module.exports로 넘겨줌.

글쓰기 게시판에서 form과 input으로 입력을 받아 리스트 게시판 table에 데이터를 추가하기 : push 사용.

ulr의 queryString 속성을 이용해 리스트 게시판에 있는 li에 각각 넘버링하기 : loop.index 기능 사용.

리스트 게시판의 li를 클릭하면 넘버링(index)한 페이지로 넘어가게 하기 : localhost:3000/board/list?index=loop.index

글을 쓰고 난 후엔 리스트 게시판으로 자동으로 넘어가게 하기 : redirect 사용.

 

 

 

---

 

 

4.   글보기 게시판 + 리스트 게시판 업그레이드

 

코드와 해석은 더보기에

//list.html
{% for item in list %}
<tr>
    <td>{{loop.index}}</td>
    <td>
	    <a href="/board/view?index={{loop.index}}">{{item.subject}}</a>
    </td>
    <td>{{item.username}}</td>
    <td>{{item.date}}</td>
</tr>
{% endfor %}

//view.html
<ul>
    <li>
	    제목 : {{data.subject}}
    </li>
    <li>
    	작성자 : {{data.username}}
    </li>
    <li>
    	작성일 : {{data.date}}
    </li>
</ul>

//server.js
app.get('/board/view',(req,res)=>{
    const index = req.query.index
    const view = list[index-1]
    res.render('view',{
        data:view,
        index:index,
    })
})

 

리스트 게시판의 li를 누르면 글보기 게시판(/board/view)로 넘어가기 : view.html 전달

리스트 게시판에 달아놓은 index기능 재활용, 클릭시 해당 내용을 view로 보기

 

 

---

 

 

5.   글삭제 게시판

코드와 해석은 더보기에

post로 사용하려면 이렇게 길지만,

<form method=”post” action=”/board/list?index={{index}}">
    <input type=”hidden” name=”index” value={{index}}>
    <input type=”submt” value=”삭제하기”>
</form>

 

get은 이렇게 간단히 한줄로 끝나서 재출력하는 것임에도 get을 사용하는 경우가 많다.

<a href="/board/delete?index={{index}}">

 

//server.js
app.post('/board/delete',(req,res)=>{
    const index=req.body.index-1 //시작 인덱스 찾아야하니까
    list.splice(index,1) //인덱스부터 시작해서 1개 제거
    console.log(list)
    res.redirect('/board/list')
})

 배열에서 기준점을 잡고, 그 기준점부터 시작해서 배열 내 요소를 삭제하는 splice를 사용했다.

 

 

---

 

 

6.   글수정 게시판

 

코드와 해석은 더보기에

view 기능과 delete 기능을 합쳐 만든게 update 기능이다.

그래서 좀 헷갈리는데, 코드가 어떤 기능으로 어떻게 작성되었는지 흐름을 꼭 이해하면서 생각하자.

 

 

//server.js
app.get('/board/update',(req,res)=>{
    const index = req.query.index
    const view = list[index-1] //현재 보고있는 글정보
    console.log('view 출력 : ',view)
    res.render('update',{
        index:index,
        data:view,
    })
    console.log('list 출력:',list)
})

 

수정하기 버튼을 누르면 get 라우터를 가진 코드블럭이 실행된다.

현재 view에서 보고있던 정보를 출력해주는걸 볼 수 있다.

이렇게 get라우터에서 현재의 index값을 받아서 post로 클라이언트가 서버로 넘겨준다.

 

 

 

//server.js
app.post('/board/update',(req,res)=>{ 
    console.log('새로 입력 : ',req.body)
    const index = req.body.index //입력받은 내용
    const item = { //입력받은 내용으로 객체생성
        subject:req.body.subject,
        username:req.body.username,
        date:req.body.date,
    }

    list[index-1]=item //새 객체를 list에 추가
    console.log('새 list 출력 : ',list)
    res.redirect(`/board/view?index=${index}`)
    
})

 

클라이언트에서 post야 이거 받아라!!하고 입력값을 넘겨준다.

post에서 새롭게 입력받은 정보를 처리해 새 객체로 만든다는걸 잊으면 안된다!

흐름을 이해한다고 각 코드들이 하는 기능을 두루뭉술하게 넘어가면 남은건 스스로 불러온 재앙밖에 남지 않기때문에 신경쓰자.

 

<!-- update.html -->
<form method="post" action="/board/update">
    <input type="hidden" name="index" value="{{index}}">
    <ul>
        <li>
	        제목 : <input type="text" name="subject" value="{{data.subject}}">
        </li>
        <li>
    	    작성자 : <input type="text" name="username" value="{{data.username}}">
        </li>
        <li>
        	작성일 : <input type="text" name="date" value="{{data.date}}">
        </li>
    </ul>
    <input type="submit" value="수정하기">
</form>

 

index 값을 입력받는 form은 필요하지만 보이고 싶지 않을때, type="hidden"기능을 사용한다.

파일을 연결해주는 nunjucks 특징을 살려서 데이터 값을 알뜰살뜰하게 사용해보자 : {{data.속성명}}