2019-06-11 express를 이용해서 TodoList만들기(1)

$express --view=ejs todo
$npm install
  • 명령어를 통해 todo라는 이름의 express앱을 만들었다.
//app.js
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html')
  • 템플릿엔진을 ejs=> html로 바꾼다.

    여기서 궁금한점은 renderFile이라는 메소드를 호출할때 왜 renderFile()이 아니라 renderFile인지 궁금하다 !!

라우터

app.METHOD(PATH, HANDLER)
  • app은 익스프레스 인스턴스
  • method는 http메소드
  • path는 경로
  • Handler는 라우트가 일치될 때 실행되는 함수이다.
//app.js
var todoRouter = require('./routes/todo');
...
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);

// routes/todo.js
var express = require('express');
var router = express.Router();

/* todo router */
router.get('/', function (req, res, next) {
    res.render('todo.html', {title : 'todo list'});
});

module.exports = router;
  • todo 라우터를 만들었다.
  • 템플릿 엔진을 ejs => html파일로 변경을 했다. 여기서 기존에 존재하던 파일들 views/error.ejs, index.ejs, todo.ejs를 error.html로 확장자를 변경했을때 에러가 계속 발생했다. 왜그럴까?….
  • 기존 코드에서는 라우터에 res.render(‘index’, {title:’Express’}) views에 있는 index를 찾아가라 라는 형태였는데, html로 바꾸면서 index.html로 명시를 해주니 해결이 되었다.

Bootstrap적용하기

<head>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>

</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--<script src="/js/bootstrap.min.js"></script>-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  • head태그와 body태그 밑에 부트스트랩 CDN을 적용했다.
//todo_add.html
<form action="/todo/add", method="post">
            <label> 제목 : <input type="text" name="title"></label>
            <p/>
            <label> 내용 : <input type="text" name="contents"></label>
            <p/>
            <label> 날짜 : <input type="date" name="date"></label>
            <p></p>
            <button type="submit">저장</button>
</form>
  • form태그와 input태그를 활용해서 title, contents, date를 입력을 받고 post메서드를 통해 /todo/add 전달한다.
//todo.js => router

router.post('/add', function (req, res, next) {
    console.log("requ body : ", req.body);
    let title = req.body.title;
    let contents = req.body.contents;
    let date = req.body.date;
    res.render('todo_list.html', {title: title, contents:contents, date:date});
});
  • todo/add를 통해 전달을 받은 값을 todo_list.html로 다시 전달을 하는 역할을 한다.
  • form에서 전달받은 값들은 req.body에 담겨져 있다.
  • 거기서 전달받은 값들을 res.render를 통해 함께 전달을 한다.
  • todo_list.html에서는 전달받은 값들을 출력을 해준다.

오늘의 배운점

  • express가 어떻게 동작을 하는지. 특히 JS의 콜백의 개념에 대해서 많은 어려움이 있었다.
app.engine('html', require('ejs').renderFile);
  • 여기서 require(‘ejs’).renderFile에서 renderFile()이 아닌 renderFile로 전달을 하는게 이해가 잘 안됬었다.
  • renderFile()은 리턴값을 전달해주는것이고, renderFile은 콜백을 전달해주는 의미였다.
  • app.engine = function engine(ext, fn) {}형태로 구성이 되어있다. 콜백함수를 전달하는 의미였다.
  • rendFile자체가 함수이므로 ()이 있으면 리턴값을 반환하고 ()이 없이 renderFile을 전달하면 콜백을 전달하라는의미 !
  • 아직도 명확하지 않지만 그래도 리턴과 콜백을 전달하는 차이는 알게되었고, 특히 JS에서 레퍼런스를 보면서 어떻게 콜백을 전달하는지? 이런 부분이 어느정도 감이왔다….
  • 처음에는 express에서 어떻게 값들을 넘기고 컨트롤러 빼고 이런게 몰랐는데, router와 템플릿엔진을 설정하고, 데이터 처리를 하는 방법에 대해서 차근차근 학습을 하게되었다.
  • 내일은 오늘보다 더 나은 개발자가 되자 !!
Written on June 11, 2019