To Do List 5] 할일 입력하기 | res.redirect() | 아이템 입력시 ul에 자동 추가되게하기

 

이 전에는 To Do List 맨 위에 들어갈

오늘 날짜가 나오게 하는 법을 알아보았다. 

 

 

오늘 포스트는 아래 처럼

리스트에 내용 입력하면

리스트에 보이게 하는 법에 대해 알아보자. 

브라우저

 

 

브라우저에서 유저가 할일을 입력하면

서버에서는 그 내용을 받아 

다시 브라우저 화면에 띄우는 작업을 해야한다.

 

 

 

유저가 입력한 내용 콘솔에서 받아보기 

 

 ejs에서 form 으로 입력란 만들기 

먼저 유저가 입력한 내용을 서버에서 받을려면 

post request가 필요하다. 

 

서버에서 post request를 작성하기 전에 

먼저 index.ejs에서 입력 받을 form과

unorder list로 할 일을 미리 적어본다. 

 

 unorder list 만들고 내용 입력하기

index.ejs

 

post request에 쓸 form 만들기 

index.ejs에서 add item 이라는 입력란 만들기 

method = "post" (type 아니고 method...계속 헷갈림)

name="newItem"

index.ejs

<form action="/" method= "post">

<input type="text" name="newItem" placeholder="Add item">

<button type="submit">Add</button>

</form>

 

 

 

 

유저 브라우저에 입력란이 생겼다. 

 

 

 

 Post request 연결 하기 

브라우저에서 입력 받은 내용을 콘솔에서 볼 수 있게 하려면

post request 를 해서 받아야 한다. 

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

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

 

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

var item = req.body.newItem;

console.log(newItem);

})

 

 

 

 

유저가 입력한 item이 콘솔에 나오나 확인하기 

브라우저

 

콘솔

 

 

 

add item 에 입력한 내용이 ul 안에 들어가게 하기 

브라우저에서 입력한 아이템이 -> 서버까지 가는 것을 했다.

이제는 브라우저 -> 서버 -> 다시 브라우저에 추가 되는 것을 해보자 

다시 브라우저로 갈 때 ejs 탬플릿을 거쳐 나가게 한다. 

 

 

ejs 탬플릿에서 new list 컨텐트 만들기

index.ejs

 

 

 res.render( ) 

app.js의 app.post() 안에 

 res.render('index', { newListItem: item })

코드가 입력해야한다고 생각할지 모른다.

 

똑같은 "index.ejs" 파일에서 아래처럼 

get에서 한 번, post에서 한 번

두 줄로 나눠 res.render하면

서로 다른 컨텐트를 읽고 있긴 하지만 

이런 경우 먼저 나온 코드만 읽히고

뒤에 나오는 코드는 읽히지 않는다. 

그래서 newListItem is not defined로 나온다. 

 

서버 -> 다시 브라우저로 가야할 때

home route인  localhost:3000으로 가려고 하면

app.get( )안에를 들러야 한다.

 

이 때 app.get()안에 있는 res.render를 render한다. 

app.post()안에 있는 res.render는 읽히지 않는다. 

 

 

 

이를 고치기 위해 

25번 줄에 있는 res.render를 지우고 

app.get()의 res.render 코드 안에

{ newListItem: item } 를 추가해서 한 줄로 정리했다. 

 

 

 

 

 res. redirect() 

하지만 그래도 에러가 난다. 

 

유저가 할일을 입력하면 

home route에서

post request가 trigger 된다. 이때 

 

Line 24: 텍스트 박스 안에 입력된 newItem의 value가

item이라는 변수에 저장이 된다.

newItem 의 value: 유저가 입력한 할 일 

 

Line 25: 이 것은 다시 res.redirect("/")로

다시 home route로 가는데

이 말은 다시 app.get("/") 가 trigger된다는 말이고, 

 

그래서 그 안에 있는 

res.render('index', { kindOfDay: day, newListItem: item });

코드가 읽히게 된다. 

 

그러면 유저의 브라우저에 내용이 뜨게 되어

서버 -> 다시 브라우저어로 내용이 나오게 되었다. 

 

 

 

 

li에 아이템 하나씩 나오게 하기

 

하지만 item is not defined라는 에러가 또 난다.

 

item은 post route에서 만들어졌기 때문에

get route에서 읽히지 않는다. 

 

그래서 item을 post 안에 만들지 않고 따로 빼서

get, post 둘 다 속하지 않은 외부에 만드는 방법이 있다. 

 

 

방법1 ]  item을 빈 스트링에 담는 방법 (실패)

line 8에  var item =""; 

새로 만들었다.

하지만 스트링이 하나 밖에 안들어가기 때문에 

새 아이템을 입력할 때 계속 쌓여가는 것이 아니라 

그냥 아이템이 교체가 되버린다. 

 

 

할 일 입력하고

다른 할 일 입력하면

이 전 할일 지워지고

새 할 일만 보인다. 

 

 

 

 

방법2] 그래서 array로 교체하면 어떻게 될까? (실패)

items로 빈 array를 만들고, 

post 안에서 받아온 item을 items 안에 집어 넣는 작업을 한다. 

 

하지만 이 것 또한 에러가 발생한다. 

 

각 li에 아이템이 올라가는 것이 아니라

한 li에 계속 아이템들이 쌓인다. 

 

 

 

 

 

방법 3] for loop으로 입력된 아이템들을 하나씩 li에 들어가게 한다. (성공)

index.ejs

 

 

3-1 index.ejs에서 newListItems를 for loop으로 만든다. 

index.ejs

 

 

 

3-2 자바스크립트 문법에 해당하는 부분은 scriptlet 태그로 각 줄마다 <% %>를 감싸준다. 

index.ejs

 

 

 

3-3 li안에 있는 위의 아이템 세 개는 지우고

app.js의 items array 안으로 옮겨준다. 

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

 

 

3-4 index.js for loop 안에 newListItem --> newListItems가 되어

app.js의  line20에서도 변경해 준다. 

app.js

 

 

 

이제 입력한 내용들이 하나씩 리스트로 보인다. 

브라우저

 

 

다음 포스트에서는 var, let, const가 언제 local일 때, globe일 때인지 scope에 대해 알아보자.