할일 추가하기 – jquery | 풀스택개발 EastFlag

화면구성

<div class="row">
  <div class="col-sm-8">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="할일을 입력하세요." id="input_todo">
    </div>
  </div>
  <div class="col-sm-4">
    <button class="btn btn-primary btn-block" (click)="add_todo()">추가</button>
  </div>
</div>

</div>

</div>

bootstrap은 전체 12칸을 그리드로 구성하고있고 8칸을 input 에 4칸을 버튼에 할당하였다. input은 form-group과 form-control로 디자인하였다.

input 노드를 찾기 위해서 input_todo라는 id를 추가했고, 버튼 클릭 이벤트시 add_todo()함수를 추가했다.

모델 데이터 얻기

  add_todo() {
    $.ajax({
      url: 'http://www.javabrain.kr:8080/api/todo',
      method: 'POST',
      data: JSON.stringify({todo: $('#input_todo').val(), isFinished: false}),
      contentType: 'application/json',
      dataType: 'json',
      success: function(data) {
        console.log(data);
      }
    });
  }

add_todo() {

$.ajax({

url: 'http://www.javabrain.kr:8080/api/todo',

method: 'POST',

data: JSON.stringify({todo: $('#input_todo').val(), isFinished: false}),

contentType: 'application/json',

dataType: 'json',

success: function(data) {

console.log(data);

}

});

}

보내는 데이터는 JSON.stringify() 를 하였다.

여기서contentType과 dataType이 의미하는것은 무엇인가? contentType은 Request로 보내는 body 데이터의 데이터 타입을 의미하고 dataType은 Response로 받는 body의 데이터 타입을 의미한다.

뷰 생성

      success: data => {
        this.todoList.unshift(data);

        // 뷰 생성
        let todo =
          '<tr>' +
          '<td>' +
          (data.isFinished ? '완료' : '미완료') +
          '</td>' +
          (data.isFinished ? '<td style="text-decoration: line-through">' : '<td>') + data.todo + '</td>' +
          '<td>' + data.created + '</td>' +
          '<td>' + data.updated + '</td>' +
          '<td>' +
          '<button type="button">삭제</button>' +
          '</td>' +
          '</tr>';
        $('#todo_list').prepend(todo);

        // input clear
        $('#input_todo').val('');
      }

success: data => {

this.todoList.unshift(data);

// 뷰 생성

let todo =

'<tr>' +

'<td>' +

(data.isFinished ? '완료' : '미완료') +

'</td>' +

(data.isFinished ? '<td style="text-decoration: line-through">' : '<td>') + data.todo + '</td>' +

'<td>' + data.created + '</td>' +

'<td>' + data.updated + '</td>' +

'<td>' +

'<button type="button">삭제</button>' +

'</td>' +

'</tr>';

$('#todo_list').prepend(todo);

// input clear

$('#input_todo').val('');

}

success 의 function 에서 this.todoList를 사용하게 되면 todoList에 접근을 할수 없다. json에서 this는 바로 상위 부모를 가르키기 때문이다. 이런 문제를 해결하는 방법은 여러가지가 있는데, es6에서는 이것을 해결하기 위해서 arrow 펑션에서 사용하는 this는 lexical this가 되도록 했다.

모델 데이터를 얻었으면 노드를 만든후에 부모 노드의 맨 앞에 삽입한다.

form validation

아무값을 입력하지 않고 추가를 누르면 이 값이 서버로 보내지지만 서버에서는 이 값이 없어서 오류가 발생한다. html5 API중 form validation중 required를 사용하여 입력값이 없으면 submit 되지 않도록 한다.

<form (submit)="add_todo()" ngNativeValidate>
  <div class="row">
    <div class="col-sm-8">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="할일을 입력하세요."
               id="input_todo" required>
      </div>
    </div>
    <div class="col-sm-4">
      <button type="submit" class="btn btn-primary btn-block">추가</button>
    </div>
  </div>
</form>

<input type="text" class="form-control" placeholder="할일을 입력하세요."

id="input_todo" required>

</div>

</div>

</form>

angular내에서 form을 사용하면 기본적으로 novalidate가 된다. 그래서 html5 validation을 하기 위해서 ngNativeValidate를 추가하여 html5 validation을 수행하도록 했다.

html5 validation 9가지 중 여기서는 required를 사용하여 입력값이 없을때 submit 되지 않도록 했다.

html5 validation에 관한 자세한 사항은 여기를 참고하자

로드 중…