개요
todoList를 javascript로 구현하는 과정을 글로 정리함
구현 과정
각 UI 컴포넌트를 객체로 설계한 뒤 이에 대한 구현 코드를 작성하였음
컴포넌트 별로 UI를 분리한 것에 대해선 더 많은 설명이 필요하나 현재는 프론트엔드 단에서 UI 별로 인스턴스를 생성하여쓰는 것과 this를 쓰는 다양한 방법에 대해서 공유를 하기위해 목적임.
필요 과정
- VSCODE
- 해당 프로젝트는 여러 javascript 소스를 분리하고 import 하는 방식으로 사용하였으므로 source 타입을 module로 지정하였음, 이에 따라 Live Server 플러그인을 설치하여 로컬 서버를 띄워야 화면에서 확인할 수 있음
- Live Server 플러그인 설치
- Live Server 플러그인 설치 후 index.html을 vscode 편집기에서 띄운 뒤 하단의 go live 클릭
index.js
todoList 컴포넌트를 호출하여 그려내는 소스
data.js
mock 데이터를 json 파일로 관리하는 소스
utils.js
데이터의 유효성을 검증하는 소스가 담겨있는 소스, 유효하지 않는 경우 Error 메시지를 표시함
todoList.js
- 메인소스, 소스를 보면 몇몇 변수는 $(달러) 표시로 선언한 게 있는데 일반적으로 HTML element를 변수에 저장할 때 $ 표시를 넣어 구분을 시킴
- constructor: 전달받은 데이터를 검증한 뒤, 데이터가 유효할 경우 상태 설정한 뒤 렌더링 작업을 함
- render: 렌더링 작업을 담당하는 메서드
- setState: 전달받은 데이터를 해당 객체의 상태(데이터)가 유효한 지 판별 후 데이터를 설정함
댓글