이 게시물에는 코드작성이 포함되어 있습니다. 소스코드를 받으신 후 진행해 주세요. MEAN Stack/개발 환경 구축에서 설명된 프로그램들(git, npm, atom editor)이 있어야 아래의 명령어들을 실행할 수 있습니다.
이 게시물의 소스코드는 게시판 만들기(2016) / 게시판 - Back End 개발에서 이어집니다.
board.git 을 clone 한 적이 있는 경우: 터미널에서 해당 폴더로 이동 후 아래 명령어들을 붙여넣기합니다. 폴더 내 모든 코드가 이 게시물의 코드로 교체됩니다. 이를 원치 않으시면 이 방법을 선택하지 마세요.
board.git 을 clone 한 적이 없는 경우: 터미널에서 코드를 다운 받을 폴더로 이동한 후 아래 명령어들을 붙여넣기하여 board.git 을 clone 합니다.
- Github에서 소스코드 보기: https://github.com/a-mean-blogger/board/tree/6e060a38fe84963efecdaaa0fa694e3bdf09eeac
/* * 이 강의는 2020년 버전으로 update되었습니다. -> 2020년 버전 보기 */
지난번 포스팅에 이어서 front end 개발을 해봅시다.
주황색은 변경된 파일, 녹색은 새로 생성된 파일, 회색은 변화가 없는 파일입니다.
<!-- views/partials/nav.ejs --> <nav class="navbar navbar-default"> <div class="container"> <!-- <div class="navbar-header">... --> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> <li><a href="/posts">게시판</a></li> </ul> </div> </div> </nav>
...은 이전과 비교해서 변화가 없는 부분입니다.
세번째 메뉴 "게시판"이 추가되었습니다.
<!-- views/posts/partials/header.ejs --> <h2>Board</h2>
페이지들 중에 게시판에서만 사용되는 header 코드입니다.
<!-- views/posts/index.ejs --> <!DOCTYPE html> <html> <head> <% include ../partials/head %> </head> <body> <% include ../partials/nav %> <div class="container post post-index"> <% include ./partials/header %> <div class="buttons"> <a class="btn btn-default" href="/posts/new">New</a> </div> <table class="table table-striped posts"> <thead> <tr> <th class="title">Title</th> <th class="date">Date</th> </tr> </thead> <tbody> <% if(posts == null || posts.length == 0){ %> <tr> <td class="noData" colspan=100> There is no data to show :( </td> </tr> <% } %> <% posts.forEach(function(post) { %> <tr> <td class="title"> <a href="/posts/<%= post._id %>"><div><%= post.title %></div></a> </td> <td class="date"> <%= post.createdDate %> </td> </tr> <% }) %> </tbody> </table> </div> <!-- container end --> </body> </html>
Index를 table로 표시합니다.
<!-- views/posts/new.ejs --> <!DOCTYPE html> <html> <head> <% include ../partials/head %> </head> <body> <% include ../partials/nav %> <div class="container post post-new"> <% include ./partials/header %> <div class="buttons"> <a class="btn btn-default" href="/posts">Back</a> </div> <form class="post-form form-horizontal" action="/posts" method="post"> <div class="contentBox"> <h3 class="contentBoxTop">New Post</h3> <fieldset> <div class="form-group"> <label for="title" class="col-sm-2 control-label">Title</label> <div class="col-sm-10"> <input class="form-control" type="text" id="title" name="title" value=""> </div> </div> <div class="form-group"> <label for="body" class="col-sm-2 control-label">Body</label> <div class="col-sm-10"> <textarea class="form-control" id="body" name="body" rows="5"></textarea> </div> </div> </fieldset> </div> <div class="buttons"> <button type="submit" class="btn btn-default">Submit</button> </div> </form> </div> <!-- container end --> </body> </html>
form 구성을 bootstrap의 form-horizontal class로 했습니다. label과 input이 한줄에 표시되는 구성입니다.
<!-- views/posts/show.ejs --> <!DOCTYPE html> <html> <head> <% include ../partials/head %> </head> <body> <% include ../partials/nav %> <div class="container post post-show"> <% include ./partials/header %> <div class="buttons"> <a class="btn btn-default" href="/posts">Back</a> <a class="btn btn-default" href="/posts/<%= post._id %>/edit">Edit</a> <form action="/posts/<%= post._id %>?_method=delete" method="post"> <a class="btn btn-default" href="#" onclick="confirm('Do you want to delete this?')?this.parentElement.submit():null;">Delete</a> </form> </div> <div class="contentBox"> <h3 class="contentBoxTop"><%= post.title %></h3> <div class="row"> <div class="col-sm-4 col-sm-push-8"> <div class="post-info"> <div><span>Created</span> : <%= post.createdDate %> <%= post.createdTime %></div> <% if(post.updatedAt) { %> <div><span>Updated</span> : <%= post.updatedDate %> <%= post.updatedTime %></div> <% } %> </div> <!-- post-info end --> </div> <!-- col end--> <div class="col-sm-8 col-sm-pull-4"> <div class="post-body"><%= post.body %></div> </div> <!-- col end--> </div> <!-- row end --> </div> <!-- post-container end --> </div> <!-- container end --> </body> </html>
bootstrp의 row와 col- class를 이용해 grid를 구성하고 있습니다.
화면이 클 경우에는 post-body와 post-info가 같은 줄(row)에 표시되지만, 화면이 작을 경우에는 post-body가 밑으로 내려가게 됩니다.
col-화면크기-push-숫자
, col-화면크기-pull-숫자
class는 순서를 순서를 바꿔주는 기능을 합니다.
post-info 코드가 위에 있지만 큰화면에서 post-body 다음에 표시되게 됩니다.
<!-- views/posts/edit.ejs --> <!DOCTYPE html> <html> <head> <% include ../partials/head %> </head> <body> <% include ../partials/nav %> <div class="container post post-edit"> <% include ./partials/header %> <div class="buttons"> <a class="btn btn-default" href="/posts">Back</a> </div> <form class="post-form form-horizontal" action="/posts/<%= post._id %>?_method=put" method="post"> <div class="contentBox"> <h3 class="contentBoxTop">Edit Post</h3> <fieldset> <div class="form-group"> <label for="title" class="col-sm-2 control-label">Title</label> <div class="col-sm-10"> <input class="form-control" type="text" id="title" name="title" value="<%= post.title %>"> </div> </div> <div class="form-group"> <label for="body" class="col-sm-2 control-label">Body</label> <div class="col-sm-10"> <textarea class="form-control" id="body" name="body" rows="5"><%= post.body %></textarea> </div> </div> </fieldset> </div> <div class="buttons"> <button type="submit" class="btn btn-default">Submit</button> </div> </form> </div> <!-- container end --> </body> </html>
edit은 역시 new와 구성이 비슷합니다. form action에 ?_method=put 넣는 것을 잊지 마세요.
/* public/css/master.css */ /* global style */ .buttons form{ display: inline-block; } /* home style */ .home h1{ color: darkseagreen; } /* post style */ .post h2 { color: tomato; text-align: center; } .post .post-body{ white-space: pre-line; /* 1 */ } .post .posts .date{ width: 100px; }
1. 이 css가 없으면 post-body에 줄바꿈이 있어도 줄바꿈을 표시하지 않습니다. 이는 data 상의 줄바꿈(\n
)과 html의 줄바꿈(<br>
)이 다르기 때문입니다.
form-horizontal
class를 사용했기 때문에 label이 왼쪽에, input이 오른쪽에 표시됩니다.
화면이 큰 경우 post-body는 왼쪽에, post-info는 오른쪽에 표시됩니다.
화면이 작을 경우 post-info가 윗줄에 표시되고, 본문은 다음줄에 표시됩니다.
지금까지 CRUD가능한 게시판을 만들어봤습니다. 복습이였는데 잘 이해가 되셨는지..
bootstrap은 하나하나 다 설명드릴 순 없고, http://getbootstrap.com에 예제들이 있으니 필요할때 가져다가 쓰면 됩니다.
저도 모든 class를 정확하게 이해하고 쓰는 것은 아니고 예제를 보면서 써보고 싶은게 있으면 가져다가 쓰고 있습니다.
댓글
이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기