본문 바로가기

Dev.Project/Todolist_project

[Todolist_Basic] Step 3. 동적인 부분에 대해서 사용자 경험 높이기



Step 3. 동적인 부분에 대해서 사용자 경험 높이기

Step 2 에서 멈추면 사용자에 대해 너무 야박한 서비스이다.
왜냐하면, 입력하기 위해서 커서를 input 태그에 찍어야 하고,
입력을 하기 위해 다시 손을 마우스로 옮겨서 New item 이라는 버튼을 클릭해야하니 말이다!
또 새로운 값을 입력하려고 이전에 입력했던 것을 다 지워야 한다.

이를 위해 다음 세 가지를 추가로 설정해보자.
1> Enter키를 통해 값을 입력하자.
2> 웹 애플리케이션을 시작했을때 자동으로 input 태그로 커서를 위치시키자.
3> 입력을 하고 나서는 백스페이스를 입력할 필요가 없도록 입력한 값을 블록설정해주자.

이렇게 기능을 추가하는 과정에서는 코드가 추가도 되겠지만 삭제될 수도 있다.
엔터키로 입력할 것이니 더이상 버튼은 필요하지 않다.
버튼을 삭제해주자.
단지 Enter라는 표시만 옆에 해주자.

그리고 스타일링에 집중하는 것은 후반부에 하자. 

1>.onkeyup 메소드를 활용하자.
엔터키를 어떻게 입력받을까?
우선 버튼 클릭을 통해 발생시켰던 이벤트를
inputText에서 키를 눌렀을 때 발생하도록 바꿔준다.

btnNew.onclick = function( ){ … } 이 코드를
inputText.onkeyup = function(event){ … } 로 바꿔준다.
발생하는 익명 이벤트 함수에 event 라는 인자가 추가된 것을 볼 수 있다.
이 event라는 인자를 통해 Enter key를 인식하게 해야 한다!
event.which를 통해 console.log 를 해보면 크롬 브라우저는 enter key를 13이라는 숫자로 인식한다.
그래서 if를 통해 값을 입력 받을 조건을 달아주자.
if(event.which === 13){ … }
… 안에는 이전에 입력한 이벤트 코드 addNewItem이 들어간다.

2> .focus( )란 메소드를 활용하자.
inputText.focus( )를 추가해주는 것이다.
애플리케이션을 실행시킨 후 바로 실행되어야하기 때문에,
이벤트 function에 들어가있으면 작동하지 않는다.
자연스럽게 inputText를 잡는 코드도 이벤트 코드 밖으로 나온다.

3> .selet( )란 메소드를 활용하자.
이벤트 코드 안에 포커스를 다시 한 번 잡아주고(Enter 키를 입력받은 후에 작동해야하므로)
그 영역을 선택해주는 메소드이다.
inputText.focus( );
inputText.select( );
두 줄의 코드를 삽입해주면 되겠다. 

main.js code>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function addNewItem(list, itemText){
  var listItem = document.createElement('li');
  listItem.innerText = itemText;
  list.appendChild(listItem);
}
 
var inputText = document.getElementById('inputText');
inputText.focus( );
 
inputText.onkeyup = function(event){
  //Event.which (13) === ENTER Key!!
  if(event.which === 13){
    var itemText = inputText.value;
    if(!itemText || itemText === "" || itemText === " "return false// blank 방지
    addNewItem(document.getElementById('todolist'), itemText);
    inputText.focus();
    inputText.select();
  }
};
cs

엔터를 쳐서 생성되는 기분이 좋다


- Step 3. The end -


 Step 4. 완료한 항목을 표시하기. [이동]