To Do List 8 ] work 페이지에서도 To Do List 되기

지금까지는 localhost:3000/

홈페이지에서 To do list가 나오게 해보았다. 

 

이제는 work에 관련된 내용만을 보기 위해 

localhost:3000/work 주소를 따로 써 보자.

 

work에 관련된 새로운 to do list가 나오게 해보자. 

url 주소 

 

결과물 미리보기 

title이 Work List로 바뀌고 새 아이템을 넣을 수 있게 해 놓았다. 

 

---

 

 

 

1. To do list의 타이틀이 Work List로 뜨게 하기 

index.ejs에서

위 제목에 오늘 날짜가 아니라

Work List가 와야하므로 

 

<%= kindOfDay%> 이름을

<%= listTitle %>로 바꿔준다. 

 

index.ejs

 

 

 

2. app.get() 만들기

localhost:3000/work로 페이지 달라는 get request가 들어왔을 때

줄 수 있게 app.get() 을 만든다. 

 

새로운 get에는 render를 할 수 있다. 

홈에서는 그냥 items array를 newListItems로 보냈지만 

여기는 work에 관련된 아이템만 나와야하므로

새로운 workItems array를 만들어 주어야 한다. 

 

 

3. workItems 빈 array 만들기 

빈 array를 만들어서 work에 관련된 아이템이 담기게 한다. 

app.js

 

4.  post request 만들기 

ejs에서 보내는 "work" 관련  input 내용을 받을 수 있는 post를 만든다. 

 

post 안에 있는 workItems는 밖에서 읽을 수 없기 때문에

res.redirect("/work")를 실행해서

그 내용이 app.get("/work") route에서 읽을 수 있게 한다. 

 

 

 

결과 보기 

localhost:3000/work 를 입력하면 아래와 같은 화면이 나온다.

 

 

 

---

 

 

 

하지만 아이템을 입력하고 나면 다시 홈으로 가는 에러가 발생한다. 

아이템 입력

홈에서 추가가됨

 

 

이유는 index.ejs의 form에서 <action="/">로 되어있는데 

입력된 내용이 post request 중에서 홈("/") Post로 가도록 설정되어 있기 때문이다.

index.ejs

 

 

그러면 app.post("/")안에 있는 items.push로 입력이 되어

메인 todo list에 아이템이 올라간다. 

app.js

 

 

 

이를 고치기 위해

form에서 보낸 아이템이 일단 app.post("/") 로 가는데

그 post 안에서 선별 작업을 한다. 

 

items에 push를 할 지

workItem에 push를 할 지 선택한다. 

 

내 생각은 form 안의 action에서 

<form action = "/ " + <%= titleList %> method="post"> 

뭐 이런 식으로 변경이 가능할 줄 알았지만 아니었다.

 

 

 

 

그럼 들어온 아이템이

items로 가야할지

workItems로 가야할 지

어떻게 구분할까?

 

그 건 ejs의 form이 button을 눌러서 입력한 내용이 서버로 갈 때

서로 다른 카테고리에 따라 다른 길로 가게 하는 방법이 있다.

 

---

 

button value attribute 알아보기 

 

button 태그 안에 name을 지정하고서 

그 name 안에 또 다른 갈래를 나눠 서버에 보낼 수 있다. 

그 역할을 button attribute인  value가 한다. 

 

 

<w3school에서 가져온 예시>

Form 안의 2개의 버튼 안에서 name이 subject로 같고,

그 subject 안에서 또 나눌 때 value를 써서 버튼 둘을 나눴다. .

 

 

 

 

value는 form이 submit될 때 button name과 같이 서버로 보내진다.

 

"Finish EJS"로 인풋에 내용을 입력을 해보았다. 

 

 

index.ejs

 

 

app.js의 app.post("/")에

어떤 내용이 입력되었나 확인해 보자. 

console.log(req.body);를 입력해서 콘솔에서 보면 

app.js

 

 

 

보낸 form 

index.ejs

입력 받은 내용은 다음과 같다.

콘솔

form 안에는  key:value 형태로 콘솔에 나온다. 

 

< input 태그 >

name: '입력된 내용'  

 

< button 태그 > 

name: value

 

 

 

---

다시 프로젝트로 돌아와서 

 

여기 To Do List에서는 버튼이 하나밖에 없다.

하나의 버튼에 value 내용을 바꿔서 입력한 내용이

다른 카테고리로 서버에 가게한다. 

 

button의 name은 "list"로 그대로 두고 

value는 다이나믹으로  <%= listTitle %>로 바꾼다. 

index.ejs

 

콘솔

 

---

 

?? 여기서 이해 안되는 건 왜 "Work List"가 아니라

Work가 나오는지 모르겠다... 대문자 Work.. 

 

answer  

이유는 ejs에서 value=<%=listTitle%> 로 되어 있어 

value는 string이 아니다.

그래서 맨 앞 글자만 통과하게 되었다(being logged) 

 

만약 value="<%=listTitle%>"처럼

ejs 태그가 string으로 되어 있다면 

콘솔에서는 'Work List' 로 나온다.

 

 

---

 

 

콘솔에서  키:벨류 패턴으로 볼 수 있는데 

list: 'Work' 인 것을 확인했다. 

그럼 if문 만들 때 list가 'Work'인지 아닌지로 나눠서 만들면 된다. 

 

 

app.post("/")안에 if조건문을 만든다. 

if(req.body.list === "Work") 인 조건문을 만든다. 

여기서 list는 form button의 name에서 왔다. 

 

app.post("/work")는 필요없으니 지운다.

 

 

 

 

결과보기 

work 페이지에 아이템이 쌓인다. 

 

 

 

 

const express = require("express");

const bodyParser = require("body-parser");

const app = express();

app.set('view engine', 'ejs');

app.use(bodyParser.urlencoded({ extended: true }));

app.use(express.static("public"));

var items = ["Buy food", "Cook food", "Eat food"];

var workItems = [];

app.listen(3000, function() {

console.log("Server started on port 3000")

});

app.get("/", function(req, res) {

var today = new Date();

var options = { weekday: 'long', month: 'long', day: 'numeric' };

var day = today.toLocaleDateString("en-US", options)

res.render("list", { listTitle: day, newListItems: items });

});

app.post("/", function(req, res) {

var item = req.body.newItem;

var listTitle = req.body.listTitle;

console.log(req.body)

if (listTitle === "Work") {

workItems.push(item);

res.redirect("/work")

} else {

items.push(item);

res.redirect("/");

}

});

app.get("/work", function(req, res) {

res.render("list", { listTitle: "Work List", newListItems: workItems });

});