프로그래머스에서 적용한 vanilla-js로 만든 todoList코드다.
구현 조건은 아래와 같았다.
-
기본 요구사항
TodoList 라는 이름을 가진 함수를 작성합니다. -
해당 함수는 new 키워드를 이용해 생성되며, 파라메터로 위의 data를 넘겨받습니다. ex) var todoList = new TodoList(data);
-
TodoList 함수는 파라메터로 넘겨받은 data를 this 키워드를 이용해 함수 내 변수로 저장해둡니다. this.data = data 이런 식으로요.
-
this.render = function{ ... } 형태로 TodoList 함수 내에 render function을 작성합니다.
-
이 함수는 data를 이용해 data 배열을 순회하며 각 배열첨자의 text를 html로 만든 뒤, todo-list라는 id를 가진 div에 data의 text가 렌더링되도록 작성합니다. 아래 Tip을 참고하세요.
-
위에서 작성한 TodoList 함수를 var todoList = new TodoList(data); 형태로 생성한 후, todoList.render() 함수를 호출하여 실행되게 작성합니다.
이 외의 보너스 구현사항이 더 있었는데, 아래와 같았다.
- new 키워드로 함수의 인스턴스를 만들 때 올바른 파라미터가 아닐경우 에러 발생하게 하기
- extra data를 만들고 TodoList컴포넌트를 세 개 만들고 div를 기존에 있던 1개 말고 두 개를 더 추가해 데이터 렌더링하게 하기
- data에 isCompleted 필드를 추가하고 값이 true일 때
<s>태그 이용하여 삭선처리 해주기 - TodoList컴포넌트에 setState(nextData)를 추가하고 todoList.setState(extraData)일 때 해당 컴포넌트가 다시 렌더링 되게 만들기
<html>
<head>
<title>Mission 1</title>
<meta charset="utf-8" />
</head>
<body>
<div id="todo-list"></div>
<div id="mango-list"></div>
<div id="clean-list"></div>
<script>
const data = [
{
text: 'JS 공부하기',
isCompleted: true,
},
{
text: 'JS 복습하기',
isCompleted: false,
},
];
const data2 = [
{
text: '망고 털 빗겨주기',
isCompleted: false,
},
{
text: '망고 물 주기',
isCompleted: true,
},
{
text: '망고 밥주기',
isCompleted: false,
},
{
text: '장난감으로 놀아주기',
isCompleted: true,
},
];
const data3 = [
{
text: '주방 싱크대 청소',
isCompleted: false,
},
{
text: '방 옷 청소',
isCompleted: false,
},
{
text: '작은방 책상 청소',
isCompleted: true,
},
{
text: '거실 바닥 청소',
isCompleted: true,
},
];
class TodoList {
constructor(data, container) {
//new 키워드 안 붙이고 함수 실행 시
if (!(this instanceof TodoList)) {
throw new Error('error message');
}
//null 혹은 undefined
if (data === null || data === undefined) {
throw new Error('error message');
}
//array가 아닌 형태
if (!Array.isArray(data)) {
throw new Error('error message');
}
//data가 유효한 형식이 아닐때
//data는 배열의 형태로 되어있고, 안의 key와 value는 string으로 되어있다.
//data를 돌면서 안의 아이템을 검증해야함으로, forEach를 썼다.
data.forEach((item) => {
if (typeof item !== 'object' || typeof item.text !== 'string') {
throw new Error('error message');
}
});
this.data = data;
this.container = container;
}
setState(nextData) {
this.data = nextData;
this.render();
}
render() {
const container = document.getElementById(this.container);
this.data.forEach((item) => {
const p = document.createElement('p');
const s = document.createElement('s');
//p 태그 안에 내용정하기
//isComplete조건문 추가. p 내부에 s태그가 생긴다.
if (item.isCompleted === true) {
s.textContent = item.text;
p.appendChild(s);
//아닐 경우에는 그냥 p태그로 추가
} else {
p.textContent = item.text;
}
container.append(p);
});
}
}
const todoList = new TodoList(data, 'todo-list');
const mangoList = new TodoList(data2, 'mango-list');
const cleanList = new TodoList(data3, 'clean-list');
todoList.render();
todoList.setState(data2);
mangoList.render();
cleanList.render();
console.log(todoList);
</script>
</body>
</html>출처 : vanillaJS 스터디
진화중인 돌리입니다 :>