Skip to content

Commit b745355

Browse files
HTMLheadcrongro
HTMLhead
authored and
crongro
committed
lec3 - Step2.다양한 출력 지원 (#48)
* Lecture3 - step1. 기본기능 구현 (#40) * 스켈레톤 코드 작성 * 수많은 에러가 담긴 todo객체의 add함수 추가(id의 값을 제대로 가지지 못함, todo객체의 getStatusNum수정 필요 * 랜덤한 id값을 못가져오는 것을 수정. checkOverlap함수를 통해서 id의 값이 같지않도록 구현 * todo.add함수기능 완벽하게 구현 * todo.update함수 완성 * id를 입력받아 할일을 제거해주는 todo.remove함수 완성, 오류가많은 todo.printTask함수 완성 * todo.printTask함수 완성, tag를 확인하는 함수 제거(printTask를 통해 각 할일들의 태그가 무엇인지 확인이 가능하므로) * todo.printTagRelate 함수 완성, todo.add함수에서 버그를 발견함 * 새로운 객체 안 배열에 저장하도록 만들어 문제 해결 * remove함수를 호출했을때, saveData.task배열에서 지워지는것 뿐 아니라 saveData.idArrays배열에서도 id를 지워지게 수정 * 테스트코드를 주석처리함 들여쓰기를 다시 맞춤 * saveData객체를 없애고 그 내용을 todo객체 안으로 집어 넣음, todo.idArrays의 값은 todo.add를 호출할때마다 추가되도록 수정. * if(saveData.idArrays.indexOf(ranNum) !== -1)-> if(this.idArrays.includes(ranNum))으로 변경 * 기나긴 삼항연산자 statusNum[obj.status]++로 해결 * todo.update함수에서 바뀐 상태의 상태를 반영하지 않는 버그를 찾아내서 수정 * 함수마다 간단한 주석을 달아줌 * 주석추가 * 피드백을 위한 주석 추가 * 같은 숫자를 반복하는 것을 todo.task로부터 찾아와 sync가 완벽하게 맞도록 수정 * 쓸데없는 todo.idArrays에 쓰이는 배열과 메서드 제거 * 변수명 변경 * add나revmoe, update함수를 입력할때마다 각각 인자를 다르게 받아 다르게 출력하는 함수를 만듬 * 해야할 일들 주석으로 정리 * 만들어야 할 함수들 미리 작성 * time obj를 saveTimeObj로 이름을 변경하고 saveTimeObj에 doing일때의 시간과 done일때의 시간을 인자로 입력받아 경과된 시간을 반환해주는 getTakeTime 함수 구현 * 업데이트할 객체를 인자로 받아 id값과업데이트 될때의 시간 값을 saveTImeObj의 객체에 저장해주는 함수 구현 * todo.add함수에서 새 객체를 만들때 걸린시간 이라는 항목을 추가함 * timeobj객체를 todo안으로 집어넣어 활용하기로 결정, 수정 * doingTimeArray와 takenTimeArray가 굳이 필요할것 같이 않아서 제거, 대신 task배열내의 객체에 timeData추가. 이를 이용해 updateDoingTime메서드 완성 * updateTakeTime메서드 구현. id가 같은 task.timeData값에 걸린 시간을 계산해서 저장해줌 * showTag메서드와 그 메서드를 위한 printByTag메서드 구현. printByTag는 tag과 status를 인자로 받아 같은인자와 tag를 출력, showTag메서드는 그 값을 세번 불러서 서로다른 3가지의 status값을 모두 출력. * show메서드 구현 만약 status가 done상태일때만 시간을 출력해주도록 함 * printByTag메서드의 버그 수정(상태가done인 항목을 입력해도 걸린 시간이 나오지 않았음), show메서드의 버그 수정(상태가done이면 doing항목을 출력하라고 입력했을때 done항목도 같이 출력되었었음) * 테스트 케이스 추가 * showAll메서드 구현, bind메서드를 이용함 * 같은태그를가짐과동시에 같은상태인것의 개수를 세는 함수 getSameTagAndStatusNum함수를 만듦 * show함수를 좀더 보기좋게 수정 * showTags를 위한 getSameTagArrays와 printSameTag함수를 만듬. 태그의 모든값이 담긴 배열을 만들고, 배열의 값을 통해 같은 값을 출력하는 함수를 만듬 * 태그가 같은 할 일의 개수를 계산해주는 함수 getSameTagNum을 만듬 * 함수의 쓰임새에 따라 정렬하여 보기편하게 수정 * 테스트 케이스들을 모두 주석처리하고 id의 경우의 수를 100가지로 늘림 * 사소한 버그 수정
1 parent 9422501 commit b745355

File tree

1 file changed

+239
-0
lines changed

1 file changed

+239
-0
lines changed

‎todo.js‎

Lines changed: 239 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,239 @@
1+
const todo = {
2+
task: [],
3+
4+
add: function (objToAdd) {
5+
const notAddedLength = this.task.length
6+
const newTodo = {
7+
id: this.getRanNum(),
8+
name: objToAdd.name,
9+
status: 'todo',
10+
tag: objToAdd.tag,
11+
timeData: 0,
12+
}
13+
this.task.push(newTodo)
14+
let statusNum = this.getStatusNum(this.task)
15+
this.printChangeThing(newTodo, notAddedLength)
16+
this.printStatusNum(statusNum)
17+
},//해야할일과 id값을 추가해주는 함수
18+
19+
getRanNum: function () {
20+
const ranNum = Math.floor(Math.random() * 100)
21+
const idArrays = this.task.map(obj => obj.id)
22+
if (idArrays.includes(ranNum)) {
23+
return this.getRanNum()
24+
}
25+
return ranNum;
26+
},//중복되지 않는 랜덤한 숫자를뽑아내는 함수
27+
28+
getStatusNum: function (accumulatedTask) {
29+
const statusNum = {
30+
todo: 0,
31+
doing: 0,
32+
done: 0
33+
}
34+
accumulatedTask.forEach(obj => {
35+
statusNum[obj.status]++
36+
})
37+
return statusNum
38+
},//상태를 초기화 시켜주는 함수
39+
40+
printStatusNum: function (statusNum) {
41+
console.log(`현재상태 todo : ${statusNum.todo}, doing: ${statusNum.doing}, done : ${statusNum.done}`)
42+
},//상태를 출력해주는 함수
43+
44+
printChangeThing: function (objToPrint, beforeTaskLength, beforeTaskStatus) {
45+
if (this.task.length > beforeTaskLength) {
46+
console.log(`ID : ${objToPrint.id}, ${objToPrint.name} 항목이 추가되었습니다.`);
47+
} else if (this.task.length < beforeTaskLength) {
48+
console.log(`ID : ${objToPrint.id}, ${objToPrint.name} 삭제 완료`)
49+
} else {
50+
console.log(`ID: ${objToPrint.id}, ${objToPrint.name} 항목이 ${beforeTaskStatus} => ${objToPrint.status} 상태로 업데이트 되었습니다.`)
51+
}
52+
},//할일이 추가되거나 제거되거나 업데이트 될 때 적합한 내용을 출력해 주는 함수
53+
54+
update: function (objToUpdate) {
55+
let beforeTaskStatus = []
56+
if (objToUpdate.nextstatus === 'doing') {
57+
this.updateDoingTime(objToUpdate)
58+
} else if (objToUpdate.nextstatus === 'done') {
59+
this.updateTakeTime(objToUpdate)
60+
}
61+
this.task = this.task.map(taskObj => {
62+
if (objToUpdate.id === taskObj.id) {
63+
beforeTaskStatus.push(taskObj.status)
64+
taskObj.status = objToUpdate.nextstatus.toLowerCase();
65+
return taskObj
66+
}
67+
return taskObj
68+
})
69+
const changedTask = this.task.filter(taskObj => {
70+
if (objToUpdate.id === taskObj.id) {
71+
return taskObj
72+
}
73+
})
74+
let statusNum = this.getStatusNum(this.task)
75+
this.printChangeThing(changedTask[0], this.task.length, beforeTaskStatus[0])
76+
this.printStatusNum(statusNum)
77+
},//상태 업데이트 함수//주어진 정보의 시간을 넣을 수 있도록 수정 요망
78+
79+
updateDoingTime: function (objToUpdate) {
80+
this.task.forEach(taskObj => {
81+
if (taskObj.id === objToUpdate.id) {
82+
taskObj.timeData = Date.now();
83+
}
84+
})
85+
},//업데이트할 객체를 인자로 받아 task내의 timeData값을 변경.
86+
87+
updateTakeTime: function (objToUpdate) {
88+
this.task.forEach(taskObj => {
89+
if (taskObj.id === objToUpdate.id) {
90+
taskObj.timeData = this.getTakeTime(taskObj.timeData, Date.now())
91+
}
92+
})
93+
},//업데이트할 객체를 인자로 받아 task내의 timeData의 값을 걸린 시간으로 변경.
94+
95+
getTakeTime: function (doingTime, currentTime) {
96+
let takenTime = ''
97+
let takenMsecTime = currentTime - doingTime
98+
const msecPerMinute = 1000 * 60, msecPerHour = msecPerMinute * 60, msecPerDay = msecPerHour * 24
99+
const takenDays = Math.floor(takenMsecTime / msecPerDay)
100+
takenMsecTime = takenMsecTime - takenDays * msecPerDay
101+
const takenHours = Math.floor(takenMsecTime / msecPerHour)
102+
takenMsecTime = takenMsecTime - takenHours * msecPerHour
103+
const takenMinutes = Math.floor(takenMsecTime / msecPerMinute)
104+
takenMsecTime = takenMsecTime - takenMinutes * msecPerMinute
105+
takenTime += takenDays + '일, ' + takenHours + '시간, ' + takenMinutes + '분'
106+
return takenTime;
107+
},//걸린 시간을 계산해주는 함수
108+
109+
remove: function (objToRemove) {
110+
const notRemovedLength = todo.task.length
111+
let filteredTask = this.task.filter(taskObj => taskObj.id === objToRemove.id)
112+
let removedTask = this.task.filter(taskObj => taskObj.id !== objToRemove.id)
113+
this.task = removedTask
114+
this.printChangeThing(filteredTask[0], notRemovedLength)
115+
},//할 일과 id값을 제거해주는 함수
116+
117+
show: function (status) {
118+
console.log(`[${status} 상태인 할 일들]`)
119+
this.task.forEach(taskObj => {
120+
if (status === 'done' && taskObj.status === 'done') {
121+
console.log(`ID : ${taskObj.id}, ${taskObj.name}, [${taskObj.tag}], ${taskObj.timeData}`)
122+
} else if (taskObj.status === status) {
123+
console.log(`ID : ${taskObj.id}, ${taskObj.name}, [${taskObj.tag}]`)
124+
}
125+
})
126+
},//인자로 입력받은 상태의 정보들을 출력해주는 함수
127+
128+
showTag: function (tag) {
129+
const todoNum = this.getSameTagAndStatusNum(tag, 'todo')
130+
console.log(`[todo, 총 ${todoNum}개]`)
131+
this.printByTag(tag, 'todo');
132+
const doingNum = this.getSameTagAndStatusNum(tag, 'doing')
133+
console.log(`[doing, 총 ${doingNum}개]`)
134+
this.printByTag(tag, 'doing');
135+
const doneNum = this.getSameTagAndStatusNum(tag, 'done')
136+
console.log(`[done, 총 ${doneNum}개]`)
137+
this.printByTag(tag, 'done');
138+
},//수정필요, 여기에 showTags기능까지 넣어볼 것.//함수는 한가지의 일만 하는게 맞는듯
139+
140+
printByTag: function (tag, status) {
141+
this.task.forEach(taskObj => {
142+
if (taskObj.tag === tag && taskObj.status === status) {
143+
if (status === 'done') {
144+
console.log(`ID : ${taskObj.id}, ${taskObj.name}, ${taskObj.timeData}`)
145+
return;
146+
}
147+
console.log(`ID : ${taskObj.id}, ${taskObj.name}`)
148+
}
149+
})
150+
},//tag의 값과 상태의 값을 인자로 받아 출력해주는 함수
151+
152+
getSameTagAndStatusNum: function (tag, status) {
153+
let sameTagAndStatusNum = 0
154+
this.task.forEach(taskObj => {
155+
if (taskObj.tag === tag && taskObj.status === status) {
156+
sameTagAndStatusNum++
157+
}
158+
})
159+
return sameTagAndStatusNum
160+
},//태그와 상태가 같은 것들의 개수를 세어주는 함수
161+
162+
showTags: function () {
163+
const taggedTask = this.task.filter(obj => {
164+
return obj.tag !== undefined
165+
})
166+
const sameTagArrays = this.getTagArrays(taggedTask);
167+
sameTagArrays.forEach(tag => {
168+
const sameTagNum = this.getSameTagNum(tag, taggedTask)
169+
this.printSameTag(tag, taggedTask)
170+
})
171+
},//태그에 따라 모든 값을 출력해주는 함수
172+
173+
getTagArrays: function(taggedTask) {
174+
const sameTagArrays = [];
175+
taggedTask.forEach(taggedTaskObj => {
176+
if(!sameTagArrays.includes(taggedTaskObj.tag)) {
177+
sameTagArrays.push(taggedTaskObj.tag)
178+
}
179+
})
180+
return sameTagArrays
181+
},//현재 task배열 내에있는 모든 tag값들을 중복 없이 따로 모아놓는 배열을 만드는 함수
182+
183+
printSameTag: function(tag, taggedTask) {
184+
console.log(`${tag}, 총 ${sameTagNum}개`)
185+
taggedTask.forEach(taggedTaskObj => {
186+
if(tag === taggedTaskObj.tag) {
187+
console.log(`ID : ${taggedTaskObj.id}, ${taggedTaskObj.name}, [${taggedTaskObj.status}]`)
188+
}
189+
})
190+
},//tag의 값에 따라서 출력해주는 함수
191+
192+
getSameTagNum: function(tag, taggedTask) {
193+
sameTagNum = 0
194+
taggedTask.forEach(taggedTaskObj => {
195+
if(tag === taggedTaskObj.tag) {
196+
sameTagNum++
197+
}
198+
})
199+
return sameTagNum
200+
},//같은 태그의 개수를 세어주는 함수
201+
202+
showAll: function () {
203+
const statusNum = this.getStatusNum(this.task)
204+
console.log(`총 ${this.task.length}개의 리스트를 가져왔습니다.
205+
지금부터 2초뒤에 todo내역을 출력합니다........`)
206+
setTimeout(function () {
207+
console.log(`[todo, 총${statusNum.todo}개]`);
208+
this.show('todo')
209+
console.log(`지금부터 3초뒤에 doing내역을 출력합니다.......`)
210+
setTimeout(function () {
211+
debugger;
212+
console.log(`[doing, 총${statusNum.doing}개]`)
213+
this.show('doing')
214+
console.log(`지금부터 2초뒤에 done내역을 출력합니다........`)
215+
setTimeout(function () {
216+
console.log(`[done, 총${statusNum.done}개]`)
217+
this.show('done')
218+
}.bind(todo), 2000)
219+
}.bind(todo), 3000)
220+
}.bind(todo), 2000)
221+
},//입력된 정보들의 상태에 따라 시간차로 출력해주는 함수
222+
}//해야 할일 객체
223+
// 테스트
224+
225+
todo.add({ name: '자바스크립트', tag: 'programming'});
226+
todo.add({ name: 'C++', tag: 'programming' });
227+
todo.add({ name: '회식', tag: '회사' });
228+
todo.add({ name: '노래연습', tag: '자기개발' });
229+
todo.add({ name: '과장님업무', tag: '회사' })
230+
231+
// todo.update({ id: 3, nextstatus: 'doing' })
232+
// todo.update({ id: 3, nextstatus: 'done' })
233+
// todo.update({ id: 2, nextstatus: 'done' })
234+
todo.showTag('programming')
235+
todo.showTags();
236+
todo.show('todo')
237+
todo.showAll();
238+
239+

0 commit comments

Comments
 (0)