Today I Learned #9

loopbacksealยท2021๋…„ 1์›” 6์ผ
0

CODE KATA ๐Ÿง—โ€โ™‚๏ธ

๋ชฉ๋ก ๋ณด๊ธฐ
1/29
post-thumbnail

CODE KATA #1

CODE KATA๋ž€, ํ™€๋กœ ์ˆ˜ํ–‰ํ•˜๋Š” ์„ธ์„ธํ•œ ์•ˆ๋ฌด ํŒจํ„ด์ด์ž, ํ•™์Šต์ž๊ฐ€ ํŠน์ •ํ•œ ๊ธฐ๋ฒ•์„ ๋ฐ˜๋ณต ํ•™์Šต์ด ์•„๋‹Œ ์ž์—ฐ์Šค๋Ÿฌ์šด ๋ฐฉ์‹์œผ๋กœ ์ฒด๊ณ„์ ์ธ ์ ‘๊ทผ์„ ํ†ตํ•ด ์ฒด๋“ํ•˜๋„๋ก ํ•˜๋Š” KATA(ๅฝข)๋ฅผ ์ฝ”๋”ฉ์— ์ ‘๋ชฉ์‹œํ‚จ ๊ฒƒ์ด๋‹ค.

What makes a good practice session? You need time without interruptions, and a simple thing you want to try. You need to try it as many times as it takes, and be comfortable making mistakes. You need to look for feedback each time so you can work to improve. There needs to be no pressure: this is why it is hard to practice in a project environment. it helps to keep it fun: make small steps forward when you can. Finally, youโ€™ll recognize a good practice session because youโ€™ll came out of it knowing more than when you went in.
-codekata.com-

์–ด์ œ ์ง„ํ–‰ํ–ˆ๋˜ ์ฝ”๋“œ์˜ ์ž‘์„ฑ ๊ฒฐ๊ณผ ์ค‘ ๋ฒ„๊ทธ๋กœ ์ถ”์ •๋˜๋Š” ๊ฒฐ๊ณผ๊ฐ€ ์žˆ์—ˆ๋‹ค. ์ด์— ๋Œ€ํ•ด ์ž ๋“ค๊ธฐ ์ „ ๋” ์ข‹์€ ๋ฐฉ๋ฒ•์ด ์—†์„๊นŒ ์ƒ๊ฐํ•˜๋˜ ๋‚˜๋Š” ์šฐ์—ฐํžˆ ์ฝ์—ˆ๋˜ **CODE KATA**์˜ ์ฒซ๋ฒˆ์งธ ๋™์ž‘์œผ๋กœ ์ด ๋ฒ„๊ทธ๋ฅผ ์‹ค์ˆ˜๋ฅผ ๊ฐ๋‚ดํ•˜๊ณ , ์‹œ๊ฐ„์„ ๋“ค์—ฌ์„œ๋ผ๋„ ํ•ด๊ฒฐํ•ด๋ณด๊ธฐ๋กœ ๊ฒฐ์ •ํ–ˆ๋‹ค.


๋ฒ„๊ทธ ์ˆ˜์ •

ํ•ด๋‹น ๋ฒ„๊ทธ๋Š” 2๊ฐœ ์ด์ƒ์ธ ์ •์ˆ˜ n๊ฐœ์˜ To Do List๊ฐ€ ์กด์žฌํ•˜๋Š” ๊ฒฝ์šฐ, ๋งˆ์ง€๋ง‰ ์ˆœ์„œ๊ฐ€ ์•„๋‹Œ <li>๋ฅผ ์‚ญ์ œํ•˜๊ณ , ์ƒˆ๋กœ์šด To Do List๋ฅผ ์ถ”๊ฐ€ํ•œ ๊ฒฝ์šฐ, id๊ฐ€ n์ธ To Do List๊ฐ€ ์ค‘๋ณต๋˜๊ณ , ๋‘˜ ์ค‘ ํ•˜๋‚˜์˜ delBtn์„ clickํ•˜์—ฌ ์‚ญ์ œํ•˜๋Š” ๊ฒฝ์šฐ ๊ทธ ๋‘˜์ด ๋™์‹œ์— ์‚ญ์ œ๋˜๋Š” ํ˜„์ƒ์ด์—ˆ๋‹ค.

์ƒˆ๋กœ๊ณ ์นจ์„ ํ•˜๋Š” ๊ฒฝ์šฐ ๋‹ค์‹œ ์ •์ƒ์ ์œผ๋กœ id๊ฐ€ ์ •๋ ฌ๋˜์ง€๋งŒ, momentum์ด๋ผ๋Š” ํ”„๋กœ์ ํŠธ์˜ ํŠน์„ฑ์ƒ ๋งค๋ฒˆ reload๋ฅผ ํ•˜์ง€ ์•Š๊ณ ๋„ ์ •์ƒ์ ์œผ๋กœ id๋ฅผ ์ •๋ ฌํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ํ•„์š”ํ•˜๋‹ค.

#1. let idNumber

ํ•ด๋‹น ๋ฒ„๊ทธ๋ฅผ ์ˆ˜์ •ํ•˜๊ธฐ ์œ„ํ•ด ์ฒ˜์Œ์œผ๋กœ ์‚ฌ์šฉํ•œ ๋ฐฉ๋ฒ•์€ comment์— ์žˆ๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค.
ํ•ด๋‹น ๋ฐฉ๋ฒ•๋Œ€๋กœ ์ง„ํ–‰ํ•˜๋ฉด, ๋ช…๋ฐฑํžˆ id๊ฐ€ ์ค‘๋ณต๋˜๋Š” ์ผ์€ ๋ฐœ์ƒํ•˜์ง€ ์•Š์ง€๋งŒ,
์ด์™€ ๊ฐ™์ด ์ƒˆ๋กœ๊ณ ์นจ์„ ํ•˜๊ธฐ์ „๊นŒ์ง€๋Š” ์ˆœ์„œ์™€ id๊ฐ€ ๋ณ„๊ฐœ๋กœ ๊ณ„์† ์ปค์ง์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค. id๊ฐ€ ์ค‘๋ณต๋˜์ง€ ์•Š๋Š”๋‹ค๋Š” ์ ์—์„œ ํ•œ๋ฒˆ์— ๋‘๊ฐ€์ง€ <li>๊ฐ€ ์‚ญ์ œ๋˜๋Š” ๋ฒ„๊ทธ๋Š” ์ˆ˜์ •๋œ ๊ฒƒ์ด ๋งž์ง€๋งŒ, ํ”„๋กœ์ ํŠธ์— ์žˆ์–ด ์ถ”๊ฐ€์ ์ธ ๊ธฐ๋Šฅ์ด ๊ตฌํ˜„๋  ๊ฒฝ์šฐ (์˜ˆ๋ฅผ ๋“ค์–ด, "1,4,5๋ฒˆ์งธ ํ•ญ๋ชฉ์ด ๋‚จ์•˜์Šต๋‹ˆ๋‹ค"๋ฅผ ์ถœ๋ ฅํ•˜๋Š” ๊ธฐ๋Šฅ) ์ƒˆ๋กœ๊ณ ์นจ ์—†์ด id์™€ ์ˆœ์„œ๊ฐ€ ์ผ์น˜ํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ๋‹ค.


์ˆœ์„œ์™€ id๋ฅผ ์ผ์น˜์‹œํ‚ค๋ ค๋ฉด?

์ˆœ์„œ์™€ id๋ฅผ ์ƒˆ๋กœ๊ณ ์นจ ์—†์ด ์ผ์น˜์‹œํ‚ค๊ณ  ์‹ถ๋‹ค๋Š” ๋งˆ์Œ์ด ์ƒ๊ฒจ ์ด๋Ÿฐ ์ €๋Ÿฐ ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•ด๋ณด์•˜๋‹ค. ๊ฐ€์žฅ ๋จผ์ € ์‚ฌ์šฉํ–ˆ๋˜ ๋ฐฉ๋ฒ•์€ forEach() ํ•จ์ˆ˜๋ฅผ ํ†ตํ•œ id ์ˆ˜์ •์ด์—ˆ๋‹ค.

forEach()

const cleanToDos = toDos.filter(function(toDo){
    return toDo.id !== parseInt(li.id);
})
toDos = cleanToDos;
saveToDos();

๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ตœ์ดˆ์˜ ์ฝ”๋“œ์—์„œ, forEach()๋ฅผ ํ†ตํ•ด ๊ฐ๊ฐ์˜ id๋ฅผ ์ˆœ์„œ๋Œ€๋กœ ์žฌ์ง€์ •ํ•ด์ฃผ๋ฉด ๋˜์ง€ ์•Š์„๊นŒ, ํ•˜๊ณ  ์ƒ๊ฐํ–ˆ์—ˆ๋‹ค. ํ˜น์€, paintToDo()๋ฅผ ๋‹ค์‹œ ์‹คํ–‰์‹œ์ผœ์ฃผ๋ฉด ์–ด๋–จ๊นŒ ์ƒ๊ฐ์„ ํ–ˆ์œผ๋‚˜, To Do List๊ฐ€ ์ค‘๋ณต์œผ๋กœ ์ƒ์„ฑ๋˜๋Š” ๊ฒฐ๊ณผ๊ฐ€ ๋ฐœ์ƒํ–ˆ๋‹ค.

const cleanToDos = toDos.filter(function(toDo){
    return toDo.id !== parseInt(li.id);
})
idNum = 1;
cleanToDos.forEach(function(toDo){
    toDo.id = idNum;
    idNum += 1;
}
toDos = cleanToDos;
saveToDos();

๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ฝ”๋“œ๋ฅผ ์ˆ˜์ •ํ•˜์ž, id๋Š” ์ •์ƒ์ ์œผ๋กœ ๋ณ€ํ™˜์ด ๋˜์—ˆ์œผ๋‚˜, ๋˜๋ ค ์‚ญ์ œ ๊ธฐ๋Šฅ์ด ์ž‘๋™๋˜์ง€ ์•Š์•˜๋‹ค. ์ด์œ ๋Š” ํ•ด๋‹น toDo์˜ id๋Š” ๋ฐ”๋€Œ์—ˆ์œผ๋‚˜, <li>์˜ id๋Š” ๋ฐ”๋€Œ์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์—, ์„œ๋กœ์˜ id๊ฐ€ ์–ด๊ธ‹๋‚˜์„œ filter()๋ถ€๋ถ„์ด ์ •์ƒ์ ์œผ๋กœ ์ž‘๋™ํ•˜์ง€ ์•Š์•„ ์—‰๋šฑํ•œ To Do๊ฐ€ ์‚ญ์ œ๋˜๊ฑฐ๋‚˜, ์•„๋ฌด๊ฒƒ๋„ ์‚ญ์ œ๋˜์ง€ ์•Š๋Š” ํ˜„์ƒ์ด ๋ฐœ์ƒํ–ˆ๋‹ค.

๊ฐ๊ฐ์˜ <li>์— ๋Œ€ํ•œ ์ ‘๊ทผ?

๊ทธ๋ ‡๋‹ค๋ฉด forEach()์—์„œ ๊ฐ๊ฐ์˜ toDo.id๋ฅผ ์ˆ˜์ •ํ•ด์ฃผ๋ฉด์„œ, ํ•ด๋‹น <li>์˜ id๋„ ์ˆ˜์ •ํ•ด์ฃผ๋ฉด ๋˜๊ฒ ๋‹ค. ํ•˜์ง€๋งŒ ์–ด๋–ป๊ฒŒ? ๊ฐ๊ฐ์˜ <li>๋Š” paintToDo()์—์„œ createElement๋ฅผ ํ†ตํ•ด ์ƒ์„ฑ๋˜์—ˆ๊ณ , ํ•ด๋‹น ๊ธฐ๋Šฅ์„ ๋‹ค๋ฅธ ํ•จ์ˆ˜๋กœ Divideํ•˜์—ฌ ์ถ”๊ฐ€๋กœ ๋ชจ๋“ˆํ™” ํ•˜๊ฑฐ๋‚˜, <li>๋ฅผ ์ƒ์„ฑํ•  ๋•Œ, class๋ฅผ ๋ถ€์—ฌํ•˜์—ฌ ๊ฐ๊ฐ์˜ <li>์— ๋Œ€ํ•ด ์ ‘๊ทผํ•˜๋Š” ๋ฐฉ์‹์„ ์ƒ๊ฐํ–ˆ๋‹ค.

ํ•˜์ง€๋งŒ ๋‘ ๋ฐฉ์‹ ๋ชจ๋‘, ์ด๋ก  ์ƒ์œผ๋กœ ์‹คํ–‰์— ์˜ฎ๊ธฐ๋ฉด ๊ฐ€๋Šฅํ•  ๊ฒƒ์ด๋ผ๊ณ  ๊ฒฐ๋ก  ๋‚ด๋ ธ์ง€๋งŒ, ํ”„๋กœ๊ทธ๋žจ ์ž์ฒด์˜ ํฐ ํ‹€์˜ ๋ณ€ํ™”๊ฐ€ ํ•„์š”ํ•œ ๊ฒƒ์œผ๋กœ ์˜ˆ์ƒ๋˜์–ด ์ตœํ›„์˜ ๋ณด๋ฃจ๋กœ์„œ ๋‚จ๊ฒจ๋‘๊ธฐ๋กœ ํ–ˆ๋‹ค.

removeChild()

๊ธฐ์กด์˜ ์ฝ”๋“œ์—์„œ, toDoList.removeChild(li)๋ฅผ ํ†ตํ•ด, click์ด ๋ฐœ์ƒํ•œ target์˜ <li>๋ฅผ ์‚ญ์ œํ–ˆ๋‹ค. ์—ฌ๊ธฐ์„œ, ์–ด์ฐจํ”ผ toDo๋Š” LS์— ์ €์žฅ๋œ ๋ฐ์ดํ„ฐ์˜ array์ด๊ณ , <li>๋“ค์€ ๊ฐ๊ฐ์˜ ๋ฐ์ดํ„ฐ๋“ค์„ ๋‹ด๋Š” HTML tag๋ผ๋ฉด, ๋‹จ์ง€ click๋œ ํ•ญ๋ชฉ๋งŒ ์‚ญ์ œํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ๋ชจ๋“  ํ•ญ๋ชฉ๋“ค์„ ์‚ญ์ œํ•œ ํ›„, ์‚ญ์ œํ•ด์•ผํ•˜๋Š” ๋ฐ์ดํ„ฐ๋ฅผ filter()๋กœ ๊ฑธ๋Ÿฌ๋‚ธ ํ›„, ํ•ด๋‹น ๋ฐ์ดํ„ฐ๋ฅผ ํ† ๋Œ€๋กœ forEach()์˜ ๋‚ด๋ถ€์—์„œ toDo.id์™€ paintToDo(toDo.text)๋ฅผ ์‹คํ–‰ํ•˜์—ฌ ์ƒˆ๋กœ ์ถœ๋ ฅํ•ด์ฃผ๋ฉด ์ƒˆ๋กœ๊ณ ์นจ ์—†์ด๋„ ์ˆœ์„œ์™€ id๊ฐ€ ํ•ญ์ƒ ์ผ์น˜ํ•  ๊ฒƒ์ด๋‹ค.
๊ทธ๋Ÿฌ๊ธฐ ์œ„ํ•ด์„œ๋Š” ํŠน์ • parentNode์˜ ๋ชจ๋“  child๋ฅผ ์‚ญ์ œํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•„์•ผ ํ•œ๋‹ค.
MDN removeChild()์—์„œ ์•„๋ž˜์™€ ๊ฐ™์€ ๋‚ด์šฉ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

To remove all children from an element:

let element = document.getElementById("top");
while (element.firstChild) {
  element.removeChild(element.firstChild);
}

์ด๋ฅผ ํ†ตํ•ด, ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋ฉด, delBtn์ด click๋˜๋ฉด ๋ชจ๋“  <li>๊ฐ€ ์‚ญ์ œ๋œ๋‹ค.

while(toDoList.firstChild) {
    toDoList.removeChild(toDoList.firstChild);
}

๊ฒฐ๋ก 

๋‹ค์‹œ ์ดˆ๋ฐ˜์˜ ์•„์ด๋””์–ด๋กœ ๋Œ์•„์™€์„œ forEach()๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ํ™˜๊ฒฝ์ด ๊ฐ–์ถฐ์กŒ๋‹ค. ๊ธฐ์กด์˜ ํ”„๋กœ๊ทธ๋žจ์—์„œ ๊ตฌ์กฐ์ ์ธ ์ˆ˜์ •์„ ๊ฑฐ์น˜์ง€๋„ ์•Š์•˜๊ณ , ๋‹จ์ง€ click๋œ <li>๋งŒ ์ง€์›Œ์ง€๋˜ ๊ฒƒ์„ ๋ชจ๋“  <li>๊ฐ€ ์‚ญ์ œ๋˜๋„๋ก ํ•˜์—ฌ, paintToDo()ํ˜ธ์ถœ์‹œ์— ๋ฐœ์ƒํ–ˆ๋˜ ์ค‘๋ณต ์ถœ๋ ฅ๋„ ํ•ด๊ฒฐ๋˜์—ˆ๋‹ค. ๋”ฐ๋ผ์„œ, forEach()์—์„œ toDo.id์™€ paintToDo(toDo.text)๋ฅผ ์‚ฌ์ „์— ์„ ์–ธํ–ˆ๋˜ idNum์„ 1๋กœ ๋ณ€๊ฒฝ ํ›„ ์ ์šฉ์‹œ์ผœ์ฃผ๋ฉด,

idNum = 1;
cleanToDos.forEach(function(toDo){
    toDo.id = idNum;
    paintToDo(toDo.text); // ๋‚ด๋ถ€ id๋„ idNum์œผ๋กœ ์ง€์ •๋จ.
    // paintToDo๊ฐ€ ์‹คํ–‰๋œ ํ›„ idNum += 1;์ด ์‹คํ–‰๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ถ”๊ฐ€๋กœ ์‹คํ–‰ํ•˜์ง€ ์•Š์Œ.
});
toDos = cleanToDos;
saveToDos();

๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ฝ”๋“œ๊ฐ€ ์™„์„ฑ๋˜๊ณ , ์ •์ƒ์ ์œผ๋กœ ์ž‘๋™ํ•จ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค!

์ตœ์ดˆ์˜ ์ƒํƒœ, 3๊ฐœ์˜ <li>์˜ id๊ฐ€ ์ˆœ์„œ๋Œ€๋กœ ์ง€์ •๋จ.

2๋ฒˆ์งธ <li>์ธ "C"๋ฅผ ์‚ญ์ œํ•œ ์ƒํ™ฉ. ์ƒˆ๋กœ๊ณ ์นจ ์—†์ด๋„ "JAVA"์˜ id๊ฐ€ 2๋กœ ์ˆ˜์ •๋จ.

"C++"์„ ์ถ”๊ฐ€ํ•œ ์ƒํ™ฉ, ๊ธฐ์กด ์ฝ”๋“œ๋ผ๋ฉด id๊ฐ€ ์ค‘๋ณต๋˜๊ฑฐ๋‚˜, 4๋กœ ์ง€์ •๋˜์ง€๋งŒ, ์ˆœ์„œ๋Œ€๋กœ ์ง€์ •.


๋Š๋‚€์ 

์–ธ์ œ๋‚˜ ๊ทธ๋žฌ๋“ฏ์ด, ๋ฐฐ์šด ๋‚ด์šฉ์„ ๋”ฐ๋ผํ•˜๊ฑฐ๋‚˜, ์ธํ„ฐ๋„ท์—์„œ ์ฝ”๋“œ๋ฅผ ๋ณด๊ณ  ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์€ ๊ธˆ๋ฐฉ์ด์ง€๋งŒ, ๊ตณ์ด ๊ตณ์ด ์Šค์Šค๋กœ ์ด๊ฑด ์ด๋Ÿฌ๋‹ˆ๊นŒ, ์ €๊ฑด ์ €๋Ÿฌ๋‹ˆ๊นŒ ๋”ฐ์ ธ๊ฐ€๋ฉฐ ํŽœ๊ณผ ๋…ธํŠธ๋กœ ๊ธฐ๋ก์„ ํ•˜๋ฉฐ ์ƒ์ƒํ•œ๋Œ€๋กœ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ณ , ์˜ˆ์ƒํ•œ ๊ฒฐ๊ณผ์™€ ๋น„๊ตํ•ด๋ณด๊ณ  ์ด์œ ๋ฅผ ์ƒ๊ฐํ•˜๋Š” ๊ฒƒ์€ ์ •๋ง ์˜ค๋žœ ์‹œ๊ฐ„์ด ๊ฑธ๋ฆฐ๋‹ค.

๋ชจ๋“  ์‚ฝ์งˆ์„ ๋‹ค ๊ธฐ๋กํ•˜๊ธฐ์—” ๊ธ€์ด ๋„ˆ๋ฌด ๊ธธ์–ด์งˆ ๊ฒƒ ๊ฐ™์•„ ์ตœ์ดˆ์˜ ๋ฐœ์ƒ๋ถ€ํ„ฐ ๊ฒฐ๋ก ๊นŒ์ง€ ๋‚˜๋ฆ„ ์œ ์˜๋ฏธํ•œ ๊ณ ๋ฏผ๋งŒ์„ ๊ธฐ๋กํ–ˆ๋Š”๋ฐ, ๊ทธ๋ž˜๋„ ๊ธ€์ด ๊ฝค ๊ธธ์–ด์ง„ ๊ฒƒ ๊ฐ™๋‹ค.

'๊ตฌ์กฐ ์ˆ˜์ • ์—†์ด๋Š” ์•ˆ๋˜๋Š”๊ฑฐ ์•„๋‹Œ๊ฐ€..' ์‹ถ์€ ์ƒ๊ฐ์ด ๋ช‡๋ฒˆ ๋“ค์—ˆ์ง€๋งŒ, ์ƒˆํ•ด๋‹ˆ๊นŒ ์†๋Š” ์…ˆ ์น˜๊ณ  ๊ณ„์† ๋ถ™๋“ค๋˜๊ฒŒ ์ข‹์€ ๊ฒฐ๊ณผ๋กœ ์ด์–ด์กŒ๊ณ , ์ด ๊ฒฝํ—˜์œผ๋กœ ์„ฑ์žฅํ•œ ๊ฒƒ ๊ฐ™์•„ ๊ธฐ์˜๋‹ค.

profile
CAU Business Administration

0๊ฐœ์˜ ๋Œ“๊ธ€