02. CRUD - 게시물 리스트 만들기

홈과 연결되는 게시물 리스트 페이지를 만들자.

저번엔 홈을 만들어 봤다면 이번엔 게시물 리스트를 만들어보자.

views 안에 board폴더를 만들고 그 안에 list.html파일을 만들었다.

 

index.html에서 이미 게시글로 갈 수 있는 링크를 걸어놓았다.

<h1>
	<a href="/">Logo</a>
</h1>

<ul>
    <li>
      <!-- /list로 이동한다 -->
        <a href="/list">게시판 가기</a>
    </li>
</ul>

 

게시판 가기를 누르면 다음과 같은 주소로 이동하면서 오류가 뜬다.

우리는 이 주소에다가 list가 뜨도록 만들것이다.

 

우선 list.html을 작성하고

<!-- 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에서 list.html파일을 불러올 수 있도록 연결코드를 작성해준다.

//views안에 있는 board폴더 안에 있는 list.html을 실행시켜주는 명령어
app.get('/list', (req, res) => {
  res.render('board/list')
})

정상적으로 뜬다.

 

 

만일 안될경우, vscode에서 맥북에어 기준으로 control+c를 누르면 vscode 실행이 꺼진다.

다시 node 파일명.js를 실행해주면 수정된 파일이 다시 실행된다.

 

 

 

 

---

이제 가상의 데이터를 넣어서 게시물에 뜰 수 있도록 만들것이다.

우선 가상의 데이터를 만들자.

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

//list라는 배열을 list라는 이름으로 내보낸다.
module.exports={
  list:list,
}

 

//list로 내보냈던 데이터를 다시 list로 받아와서
//(이름은 아무거나 상관없음. apple로 받아도 된다.)
const list = require('./views/board/dataBase');

//제대로 잘 가져왔는지 확인하기 위해서 서버가 실행될때 데이터를 출력되게 해보았다.
app.listen(3000, () => {
  console.log('sever start')
  console.log(list)
})

 

export와 require에 대한 설명은 다음 글을 참고하자.

https://hancoco.tistory.com/71

[220127] require, export 명령문

 

잘 실행되는걸 알 수 있다.

 

 

이제 가져온 데이터를 페이지에 보이도록 사용해보자.

위 그림을 보면 { 오브젝트 : [배열] } 로 되어있는 것을 볼 수 있다.

내가 필요한건 배열이라서, server.js에 다음과 같이 배열만 빼서 보내주겠다.

//dataBase.js에서 export해줬던 데이터를 받아오는 require문
const list = require('./views/board/dataBase');

app.get('/list', (req, res) => {
  res.render('board/list',{
    //list란 이름으로 오브젝트 안에 있는 배열list를 보낸다.
    list:list.list,
  })
  
  //내가 뭘 보낸지 확인용 출력문
  console.log(list.list)
})

배열만 빠져서 보내진걸 알 수 있다.

 

 

board폴더 안에 있는 list.html을 다음처럼 수정해준다.

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

	<!-- 배열을 하나씩 돌려가면서 넣어주는 Djang문법 -->
    <!-- list를 가져와서 item이란 이름으로 받아오며, for반복문으로 해결한다 -->
    {% for item in list %}
    <tr>
        <td>{{loop.index}}</td>
        <td>{{item.subject}}</td>
        <td>{{item.username}}</td>
        <td>{{item.date}}</td>
    </tr>
    {% endfor %}
</table>

 

{% for item in list %}이런 식으로 달려있는건 Django라는 문법인데 다음 링크를 통하면 자세히 설명을 볼 수 있다.

https://www.w3schools.com/django/django_tags_for.php

Django for Tag

https://charles098.tistory.com/171

[ Express ] nunjucks 사용법 정리

 

실행해보면 다음과 같이 게시판 리스트를 완성해놓았다.