어느덧 과정중 세번째 과제를 제출하게 되었습니다. 이번 과제에서는 특히나 전반적인 JS실력을 크게 기를 수 있었던것 같아 매우 만족스럽습니다.
과제가 TODO 리스트를 만드는것이었던 만큼 기본적인 CRUD에 집중하였습니다. 이전 미니프로젝트에서 localstorage를 활용하여 TODO를 개발한적이 있어서 그 경험을 기반삼아 프로젝트를 구성하였습니다.
REST API를 활용한 CRUD
이번과제는 localstorage, sessionstorage, cookie등과 같은 저장소를 활용하는것이 아닌 REST API를 활용하여 서버에다 정보를 저장하는것이 핵심이었습니다. 따라서 async/await과 같은 Promise 키워드를 굉장히 많이 썼고 기본적인 DOM과 eventListner들, 모듈화까지 전반적인 JS에 대해서 깊이 탐구할수있는 시간이었던 것 같습니다.
화면 렌더를 어떻게 구성할것인가?
이번 과제를 수행하면서 제일 많은 고민을 했던 부분인것 같습니다. localstorage를 사용할때는 getItem과 setItem과 같은 메서드들이 굉장히 빠르게 수행이 됐었고, Item정보를 불러오는것도 자유롭게 할 수 있었던 반면에, API를 활용했을때는, 동작 수행에 있어서 시간이 꽤나 소요가 되고, 메서드들도 한정되어(특히 전체 delete) 있었기에 그런부분이 힘들었던것 같습니다.
특히나 화면 렌더를 원래는
- (Create) 새로 생긴 item만 추가로 렌더링한다
- 변경된 item만 따로 렌더링한다
와 같이 최대한 효율성을 고려해서 렌더링을 했었습니다. 그래서 이번 과제를 수행함에 있어서도 이런식으로 코드를 짰었습니다.
동작상에는 아무 문제가 없었으나 제가 수행한 방식은 innerHtml로 하나를 렌더링하고, DOM으로 각 element를 간단하게 찾기위하여 각 button들에 id를 부여해주었었습니다.
다만들고보니 이러한 방식이 뭐가 의미가있냐 싶었습니다... 모든 element에 id를 부여하고 하나하나 하드하게 DOM으로 select를 하는것이 절대 좋은코드가 아니라는 생각이들었고, 대대적인 리펙토링을 하게 되었습니다.
그렇게 바꾸게 된 코드입니다. createElement로 각 요소를 직접생성을 해주었고, 가장 애먹었던 eventListner 코드는 생성과 동시에 콜백함수를 지정해줌으로써 나중에 다시 찾고 부여를 할 필요가 없어졌죠. 이 방법으로 코드의 가독성을 굉장히 높여주었다 생각합니다!
치명적인 오류들
이번과제를 진행하면서 몇가지 치명적이고 놀랐던 오류들이 있는데요 하나씩 살펴보려고 합니다.
addEventListner 콜백함수 즉시실행 문제
가장 당황스러웠던 문제였다. 버튼들에 달아둔 이벤트리스너들이 페이지로드와 함께 실행되는 것이었다 ㅜㅜ....
항상 이벤트리스너에 콜백으로 함수를 직접 넣어줬었고, 이번에도 다를것이 없다고 생각을 했었는데 문제가 생긴이유는 바로
함수에 인자가 있었기 때문이다.
이런경우에는 function (인자) 꼴로 함수가 익명으로 생성과 동시에 바로 실행되어 버리기 때문에 이벤트리스너의 콜백함수에 인자를 넣어줄때는,
element.addEventListner("click",()=>{
addItem(content))위와 같이 콜백으로 한번 감싸고 그 안에다가 함수를 선언해주어야 한다는 것이었다. 즉, 이벤트리스너의 콜백함수로 인자를 넣어줄때는 평소와 다르게 작성을 해주어야한다.
ID값이 숫자로 시작하면 DOM오류가 나는 문제
이것또한 이유를 찾기가 굉장히 힘들었었다. 내 코드엔 ID를 직접 hard하게 찾는 부분이 하나가 있었는데 바로
checkEl.id = todo.id와 같이 체크박스에 직접 id를 달아준것이었다.
문제는, CSS selector는 숫자로 시작하는 id에 대해서는 selector를 지원하지 않는다는 것이었다.
이렇게 되면 ID select를 할때 바로 오류가 났었다. 근데... 이문제를 발견하기 어려웠던 이유는 어쩔때는 id가 숫자로 시작하고 어쩔때는 문자로 시작하기 때문에 굉장히 랜덤하게 발현되는 오류였기 때문이다.
따라서 이 문제를 해결하고자
checkEl.id = `check${todo.id}`와 같이 앞에 check을 붙여주는것으로 해결하였습니다(굉장히 하드하지만 ㅜ).
