[PROJECT] To-do List - 구현

이번 포스팅에서는 프로젝트 진행 중 발생했던 문제 해결 과정과, 개선할 점에 대해서 다루어보려고 합니다.

구현 기능💡

• 웹 페이지가 Load될 때, 기본적으로 To-do 입력창에 focus 설정했고, setTimeout 메서드를 사용해서 1초 뒤 설명text를 지워줍니다.

• 사용자가 To-do 입력창에 할 일을 작성 후 Enter키를 누르면 아래에 있는 To-do List에 순차적으로 열거되도록 구현.

• 태그(#,@) 인식 기능을 구현
  #태그: 카테고리 분류 기능
  할 일을 작성한 후 '#카테고리명'을 붙이면 이에 상응하는 이모티콘이 함께 List에 등록되어서 구분할 수 있습니다.
  Ex)책 반납하기#일상 -> 🔅️책 반납하기
  (운동🏋️‍♀,학업✏️,건강❤️,구매💰,일상🔅️)
  
  @태그: 일정 완료처리 기능
  완료된 일정에 체크 표시(✅)로 확인 할 수 있습니다.
  Ex)1@ -> 첫 번째 할 일✅

• Routine 관리 기능
  To-do 관리와 로직은 동일하고, 독서📚건강❤️취미🔅로 분류됩니다.
  루틴으로 설정한 항목은 다음 날이 되어도 초기화되지 않고, 완료 표시만 초기화 됩니다.(아이디어 처리)

• 한줄 일기 기능
  하루를 돌아보는 한 줄 일기를 작성할 수 있고, 작성을 완료하면 일기가 성공적으로 저장됐다는 메시지가 출력됩니다. 또한, '다이어리 보러가기' 링크를 클릭하면, 그동안 저장된 한줄 일기를 모아볼 수 있습니다.(아이디어 처리)

• To-do List 사용 안내 TEXT
  처음 사용하는 유저를 위해서 To-do List 사용법을 작성했습니다.

문제해결

할일 완료 시에 해당 to do 완료 표시 구현하는 과정에서, 두 가지 아이디어가 처음에 떠올랐다.

• '\n'기준으로 todo배열(split사용)을 만들어서 입력한 인덱스에 있는 할 일을 찾은 뒤 todo_list에서 제거한다.(체크가 아니라 아예 삭제하는 방법)
  :삭제를 하면 무엇을 했는지 파악하기 힘들어서 PASS

• todo_list 업데이트 함수 구현 -> todo배열(todo_list에 있는 각 할 일들이 차례대로 저장되어있음)을 활용해서, 입력한 인덱스(1부터)에 있는 할 일에 ✅추가.
  :이 방법을 선택했지만, 처음에는 todo_input(입력창 값)을 todo배열에 저장하니까 카테고리(이모티콘)는 제외되고 저장이 되는 문제가 발생했다.
  그래서, todo_list값을 가져오기에는 계속 누적되는 오류가 발생하기 때문에
  한 개의 항목을 추가할 때마다 todo배열에 todo_list값을 넣어주고(todo_index 사용) 초기화 그리고 update를 하는 방식으로 구현했다.

function update() {
    todo_list.value = ""; //누적 방지
    for(var i=0; i<todo.length; i++) { //todo_list 업데이트
        todo_list.value += todo[i]+"\n";
    }
    routine_list.value = ""; //routine_list 업데이트
    for(var i=0; i<routine.length; i++) {
        routine_list.value += routine[i]+"\n";
    }
}
var tmp = todo_list.value; //현재 todo_list.value 저장
todo[todo_index] = tmp; //save
todo_index++;
update();

개선해야될 부분🔥

이번 프로젝트를 만들어가면서 JQuery와 같은 라이브러리를 사용해봐야겠다라는 생각이 많이 들었는데 막상 경험해보지 못했다.
보다 숙련된 개발자가 되기 위해서는 라이브러리와 프레임워크를 잘 다루는 것은 필수적이기에 나도 이번 기회에 공부를 해서 다음 프로젝트에는 바로 적용을 해서 코드의 간결성과 생산이 향상되는 것을 경험하고 싶다.
그리고, 아이러니하게도 자바스크립트로 기능을 구현하는 시간보다 CSS 속성을 다루는 시간이 더 길었던 것 같다.. CSS를 조금 더 깊게 공부해서 원하는 디자인을 빠르고 정확하게 완성할 수 있도록 공부해야겠다.

자세한 코드는 Github를 참고해주세요.