첫번째 게시글부터 차례대로 이어지는 프로젝트입니다
2021.06.25 - [개발/Node.js] - (1) Node.js, MongoDB 로 TODO 만들기 - 디렉토리 설정, app.js 작성
(1) Node.js, MongoDB 로 TODO 만들기 - 디렉토리 설정, app.js 작성
작년 12월에 node.js 프로그래밍 책을 보면서.. 한달만에 끝내기 프로젝트를 했었는데 ..ㅋㅋㅋㅋ 그건...많이 미뤄두고.. 회사에서 새롭게 node js를 실습할 기회가 생겼다 그래서 미니 프로젝트로
earth-ing.tistory.com
2021.06.25 - [개발/Node.js] - (2) Node.js, MongoDB 로 TODO 만들기 - 라우터 설정, 리팩토링
(2) Node.js, MongoDB 로 TODO 만들기 - 라우터 설정, 리팩토링
첫번째 게시글부터 차례대로 이어지는 프로젝트입니다 2021.06.25 - [개발/Node.js] - (1) Node.js, MongoDB 로 TODO 만들기 - 디렉토리 설정, app.js 작성 오늘은 라우터 설정을 해줄건데 todo의 라우터만 설..
earth-ing.tistory.com
2021.06.25 - [개발/Node.js] - (3), (4) Node.js, MongoDB 로 TODO 만들기 - Model 스키마, Controller 함수 작성
(3), (4) Node.js, MongoDB 로 TODO 만들기 - Model 스키마, Controller 함수 작성
첫번째 게시글부터 차례대로 이어지는 프로젝트입니다 2021.06.25 - [개발/Node.js] - (1) Node.js, MongoDB 로 TODO 만들기 - 디렉토리 설정, app.js 작성 (1) Node.js, MongoDB 로 TODO 만들기 - 디렉토리 설정,..
earth-ing.tistory.com
드디어 프론트! 페이지부분만 작성하면 실행해볼수있다
페이지에서 기본적으로 필요한건 todo를 작성하는 칸, 작성버튼
todo들이 보여지는 리스트, todo마다 수정, 삭제 버튼 이다
이거를 ejs파일에 작성할 건데 css도 같이 입혀보자
1. 정적 파일 셋팅하기
Todo
└ node_modules
└ [모듈들]
└ public
└ fonts
└ NanumSquare_acR.ttf
└ NanumSquareEB.ttf
└ images
└ edit.png
└ home.png
└ remove.png
└ submit.png
└ stylesheet
└ todo.css
└ models
└ todoTask.js
└ controllers
└ todo.js
└ routes
└ index.js
└ todo.js
└ views
└ todo.ejs
└ todo-edit.ejs
└ app.js
└ package.json
이렇게 정적 파일들을 넣어줄건데
폰트는 원하는 폰트를 넣으면 되고 굳이 안넣어도 상관없다
나는 네이버 나눔 글꼴을 씀!
이미지 파일은 이걸 다운로드해서 넣어준다
그리고 css 파일도 다운받아서 넣어준다
그럼 준비끝!!
todo.css 안에 1,2번줄에 font-face 경로는 개인이 알아서 잡아주고
폰트 변경을 하게되면 css에 font-family를 모두 수정해주어야한다.. 참고하길!
지금 폰트, 버튼들 이미지, 스타일 세팅을 이렇게 되도록 끝냈고
이제 본격적으로 ejs 파일 작성!
2. todo.ejs 파일 작성
<!DOCTYPE html>
<html>
<head>
<title>TODO</title>
<link rel="stylesheet" type="text/css" href="/public/stylesheets/todo.css">
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel='stylesheet' href='//cdn.jsdelivr.net/npm/font-kopub@1.0/kopubdotum.min.css'>
</head>
<body>
<div class="home">
<button type="button" id="img" onclick="location.href='/'">
<img src="../public/images/home.png" width="70">
</button>
</div>
<h1 class="main-text">TODO LIST</h1>
<hr><br>
<form action="/todo/write" method="post" class="form-box">
<input type="text" class="text-box" placeholder="Enter todo" name="content" autocomplete="off">
<button type="submit" class="btn">Write</button>
</form>
<br>
<ul class="list-box">
<%
var date = "";
var next_date = "";
todoTasks.forEach(tasks => {
date = (tasks.date).substring(0, 10);
if(date != next_date){
next_date = date;
%>
<li>
<div class="date"><%= date %></div>
</li>
<% } %>
<li class="todo-item">
<div class="todo-item-content" id="content"> <%= tasks.content %>   </div>
<div class="edit-btn">
<button type="button" id="img" onclick="location.href='/todo/edit/<%= tasks._id %>'"><img src="../public/images/edit.png" width="20px"></button>
<button type="button" id="img" onclick="location.href='/todo/remove/<%= tasks._id %>'"><img src="../public/images/remove.png" width="20px"></button>
</div>
</li>
<% }); %>
</ul>
</body>
</html>이렇게 작성해주고 한줄한줄 꼼꼼히 읽어보면서 무슨 액션을 취하는지 생각해보자
이 부분은 흔한 jsp와 유사해서 이해하기 쉬울테니 설명은 생략!
여기서 edit button을 클릭하면 todo-edit 페이지가 열리는데
ajax로 구현해도 된다.. 나는 그냥 ajax없이 todo-edit.ejs 파일을 추가로 만들어줌
3. todo-edit.ejs 파일 작성
<!DOCTYPE html>
<html>
<head>
<title>TODO EDIT</title>
<link rel="stylesheet" type="text/css" href="/public/stylesheets/todo.css">
</head>
<body>
<div class="home">
<button type="button" id="img" onclick="location.href='/'">
<img src="../../public/images/home.png" width="70">
</button>
</div>
<h1 class="main-text">TODO LIST</h1>
<hr><br>
<form action="/todo/write" method="post" class="form-box">
<input type="text" class="text-box" placeholder="Enter todo" name="content">
<button type="submit" class="btn">Write</button>
</form>
<br>
<ul class="list-box">
<%
var date = "";
var next_date = "";
todoTasks.forEach(tasks => {
date = (tasks.date).substring(0, 10);
if(date != next_date){
next_date = date;
%>
<li>
<div class="date"><%= date %></div>
</li>
<% } if(tasks._id == idTask) { %>
<li class="todo-item">
<form action="/todo/update/<%= tasks._id %>" method="post">
<input type="text" value="<%= tasks.content %>" name="content" id="edit-box" autocomplete="off">
<button type="submit" id="img">
<img src="/public/images/submit.png" width="25px">
</button>
<button type="button" id="img" onclick="location.href='/todo'">
<img src="/public/images/remove.png" width="20px">
</button>
</form>
</li>
<% } else { %>
<li class="todo-item">
<div class="todo-item-content"> <%= tasks.content %>   </div>
<div class="edit-btn">
<button type="button" id="img" onclick="location.href='/edit/<%= tasks._id %>'">
<img src="/public/images/edit.png" width="20px">
</button>
<button type="button" id="img" onclick="location.href='/remove/<%= tasks._id %>'">
<img src="/public/images/remove.png" width="20px">
</button>
</div>
</li>
<% }}); %>
</ul>
</body>
</html>
이렇게 작성 끝!!!
이제 app.js 를 구동시켜주고 localhost:3000/todo 에 들어가면
(서버 구동시키는건 cmd에서 app.js 경로로 들어간 후 node app.js 하면 됨)
비어있는 리스트가 보이고 todo list 작성 박스가 보인다
작성해보자
리스트에 잘 들어간걸 확인할 수 있다!
그리고 서버측 콘솔에 내용이 출력된다
수정도 해보자
수정도 잘된다
이것도 역시나 콘솔에 찍히게 해놨다
삭제도 해봤는데 콘솔에 잘찍히고 없어지기도 잘된다
이로써 노드 미니 프로젝트 끝!!!
혹시 에러가 나거나 문제가 생겨서 어려움을 겪는다면 댓글로 문의바란다..
full code가 있는 github 링크도 공유!!
https://github.com/earth-space/NodeApp/tree/todo
earth-space/NodeApp
Nodejs Mini Project. Contribute to earth-space/NodeApp development by creating an account on GitHub.
github.com