CODE KATA #7

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

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

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

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

vanilla JS ๋ฅผ ํ†ตํ•ด ๊ณ„์‚ฐ๊ธฐ๋ฅผ ๊ตฌํ˜„ํ•˜๋ผ

์š”๊ตฌ์กฐ๊ฑด

clear button (C) ๋ฅผ ๊ตฌํ˜„ํ•˜๋ผ
Basic operator ( + , - , * , / ) ๋ฅผ ๊ตฌํ˜„ํ•˜๋ผ
์—ฐ์†์ ์ธ ๊ณ„์‚ฐ (ex.2 x 2 x 2 x 2 x 2) ์„ ๊ตฌํ˜„ํ•˜๋ผ

ํ•ด๊ฒฐ๊ณผ์ •

html

calculator๋ผ๋Š” class๋ฅผ ๊ฐ€์ง„ div์˜ ๋‚ด๋ถ€์—, status class์˜ div์™€ ๊ฐ๊ฐ์˜ ์ˆซ์ž๋ฅผ innerText๋กœ ๊ฐ€์ง„ number class์™€ ๊ฐ๊ฐ์˜ ๊ธฐํ˜ธ๋ฅผ innerText๋กœ ๊ฐ€์ง„ operator๋ฅผ button์œผ๋กœ ์„ ์–ธํ–ˆ๋‹ค. equal๊ณผ clear๋ฅผ class๋กœ ๊ฐ–๋Š” button๋„ ์ƒ์„ฑํ•ด์ฃผ์—ˆ๋‹ค.

css

๊ฐ€์žฅ ๋จผ์ € .calculator์˜ ์•ˆ์— grid์†์„ฑ์„ ์ง€์ •ํ•˜์—ฌ ๋‚ด๋ถ€์˜ ๋ฒ„ํŠผ์ด ์ •๋ ฌ๋˜๋„๋ก ํ•˜์˜€๋‹ค.

.calculator {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
  background-color: black;
}

์ดํ›„ ๊ฐ๊ฐ์˜ ์†์„ฑ์— ๋”ฐ๋ผ ํŠน์„ฑ์„ ์ง€์ •ํ•ด์ฃผ์—ˆ๋Š”๋ฐ, ๊ทธ์ค‘ ์ฃผ๋ชฉํ• ๋งŒํ•œ ๊ฒƒ์€ .zero์ด๋‹ค. ์—ฌํƒ€ ๋ฒ„ํŠผ๊ณผ๋Š” ๋‹ค๋ฅด๊ฒŒ, ํ•ด๋‹น ๋ฒ„ํŠผ์€ ๊ฐ€๋กœ๋กœ ๋‘์นธ์„ ์ฐจ์ง€ํ•˜๋Š”๋ฐ, ํ•ด๋‹น ํŠน์„ฑ์„ grid-column: auto / span 2;์„ ํ†ตํ•ด ์ง€์ •ํ•ด์ฃผ์—ˆ๋‹ค. ๋˜ํ•œ, ๋ชจ๋“  ๋ฒ„ํŠผ์— ๋Œ€ํ•ด์„œ ํด๋ฆญ์‹œ์— ํ•˜์ด๋ผ์ดํŠธ ๋˜๋Š” ํ˜„์ƒ์„ ์—†์• ๊ธฐ ์œ„ํ•ด์„œ

*:focus {
  outline: none;
}

์„ ์ง€์ •ํ•˜์—ฌ ์ฃผ์—ˆ๊ณ , ๊ฐ ๋ฒ„ํŠผ์ด ํด๋ฆญ ๋˜์—ˆ์„๋•Œ, ์•„๋ž˜๋กœ ์‚ด์ง ๋ˆŒ๋ฆฌ๋Š” ๋Š๋‚Œ๊ณผ ์ƒ‰์ƒ์˜ ๋ณ€ํ™”๋ฅผ ์ฃผ๊ธฐ ์œ„ํ•˜์—ฌ ๊ฐ๊ฐ์˜ ํด๋ž˜์Šค:active๋ฅผ ์ง€์ •ํ•˜์—ฌ, transform: translateY(1px);์™€ background-color:๋ฅผ ๊ฐ๊ฐ์˜ ํด๋ž˜์Šค์™€ ์–ด์šธ๋ฆฌ๋Š” ์ƒ‰์ƒ์œผ๋กœ ๋ฐ”๊พธ์–ด ์ฃผ์—ˆ๋‹ค.

JS

์ด์ œ ๋ณธ๊ฒฉ์ ์ธ ์š”๊ตฌ์กฐ๊ฑด์„ ์ถฉ์กฑ์‹œํ‚ค๋Š” ๊ณ„์‚ฐ๊ธฐ๋ฅผ ๋งŒ๋“ค์–ด๋ณด๊ฒ ๋‹ค. ๊ฐ€์žฅ ๋จผ์ €,

const status = document.querySelector(".status");
const clear = document.querySelector(".clear");
const number = document.querySelectorAll(".number");
const operator = document.querySelectorAll(".operator");
const equal = document.querySelector(".equal");

๋ฅผ ํ†ตํ•ด ํ•„์š”ํ•œ ์š”์†Œ๋“ค์„ ๋ฏธ๋ฆฌ ์„ ์–ธํ•ด์ฃผ๊ณ , ์‚ฌ์šฉํ•  ๋ณ€์ˆ˜๋„ ์„ ์–ธํ•ด์ฃผ์—ˆ๋‹ค.

let num1 = 0;
let num2 = 0;
let num = 0;
let wasOp = 0;
let op1 = "";
let op = "";
let opCount = 0;
let result = 0;

ํŽ˜์ด์ง€์˜ ๋กœ๋“œ์™€ ํ•จ๊ป˜ ์‹คํ–‰๋˜๋Š” ํ•จ์ˆ˜ init()์—์„œ๋Š” ๊ฐ๊ฐ์˜ ์ˆซ์ž๋ฅผ innerText๋กœ ๊ฐ–๊ณ ์žˆ๋Š” number์™€ ์—ฐ์‚ฐ์ž๋ฅผ innerText๋กœ ๊ฐ–๊ณ ์žˆ๋Š” operator์— ๋Œ€ํ•ด์„œ,

    number.forEach(function(Item) {
        Item.addEventListener("click",handleNumber);
    });
    operator.forEach(function(Item) {
        Item.addEventListener("click", handleOperator);
    });

๋ฅผ forEach()๋ฅผ ํ†ตํ•ด ์‹คํ–‰ํ•˜์—ฌ ๊ฐ๊ฐ ํด๋ฆญ์— ๋Œ€ํ•ด ๋™์ž‘ํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ์„ ์–ธํ•ด์ฃผ๊ณ , clear ๋ฒ„ํŠผ๊ณผ equal ๋ฒ„ํŠผ์— ๋Œ€ํ•ด์„œ๋„ ํด๋ฆญ์— ๋Œ€ํ•ด ๋™์ž‘ํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ์„ ์–ธํ•ด์ฃผ์—ˆ๋‹ค.

    clear.addEventListener("click", handleClear);
    equal.addEventListener("click",handleEqual);

handleNumber(event)

๊ฐ๊ฐ์˜ number์— ๋Œ€ํ•œ ํด๋ฆญ์— ๋ฐ˜์‘ํ•˜๋Š” handleNumber()์—๋Š” event.target.innerText๋ฅผ ํ†ตํ•ด ํ•ด๋‹น ๋ฒ„ํŠผ์˜ ์ˆซ์ž๋ฅผ value๋กœ์„œ ์ €์žฅํ•ด์ฃผ๊ณ , ํ•ด๋‹น value๋ฅผ ๋””์Šคํ”Œ๋ ˆ์ด์˜ ์ƒํ™ฉ์— ๋”ฐ๋ผ ๋ณ€ํ™”ํ•˜๋„๋ก status.innerText๋ฅผ now๋กœ ์ €์žฅํ•ด์ฃผ์—ˆ๋‹ค. ์ดํ›„์— 0์ด ์ž…๋ ฅ๋˜์—ˆ๋Š”๋ฐ ์ˆซ์ž๋ฅผ ์ž…๋ ฅ์‹œ 03๊ณผ ๊ฐ™์ด ์ž…๋ ฅ๋˜๋Š” ๊ฒƒ์„ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด now !== 0์ธ ์กฐ๊ฑด๋ฌธ์„ ๋™ํ•ด else์—๋Š” status.innerText๋ฅผ value๋กœ ๋ฐ”๋€Œ๋„๋ก ํ–ˆ๊ณ , ์กฐ๊ฑด๋ฌธ์— ํ•ด๋‹น๋˜๋Š” ๊ฒฝ์šฐ์—๋Š” ์ง์ „์˜ ์ž…๋ ฅ์ด ์—ฐ์‚ฐ์ž์˜€๋Š”์ง€ ์—ฌ๋ถ€๋ฅผ 1๋กœ ํ‘œํ˜„ํ•˜๋Š” wasOp๋ฅผ ์กฐ๊ฑด๋ฌธ์œผ๋กœ ํ•˜์—ฌ ๋งŒ์•ฝ ์ด์ „์˜ ์ž…๋ ฅ์ด ์กฐ๊ฑด๋ฌธ์ด์—ˆ๋˜ ๊ฒฝ์šฐ status.innerText๋ฅผ ๋ฐ”๋กœ value๋กœ ๋ฐ”๊พธ์–ด์ฃผ๊ณ , wasOp๊ฐ’์„ 0์œผ๋กœ ๋ฐ”๊ฟ”์ฃผ์—ˆ๋‹ค. ์•„๋‹Œ ๊ฒฝ์šฐ, status.innerText = status.innerText + value๋ฅผ ํ†ตํ•ด ์ด์ „์˜ ๊ฐ’์˜ ๋‹ค์Œ ๊ฐ’์œผ๋กœ ์ด์–ด์ง€๋„๋ก ํ•˜์˜€๋‹ค.

handleClear(event)

clear ๊ธฐ๋Šฅ์„ ํ•˜๋Š” clear ๋ฒ„ํŠผ์˜ ํด๋ฆญ์— ๋ฐ˜์‘ํ•˜๋Š” handleClearํ•จ์ˆ˜๋Š” result,wasOp,opCount๋ฅผ ๋ชจ๋‘ 0์œผ๋กœ ๋ฐ”๊ฟ”์ค€ ํ›„์—, status.innerText ๋˜ํ•œ 0์œผ๋กœ ๋ฐ”๊พธ์–ด ์ถœ๋ ฅํ•ด์ฃผ์—ˆ๋‹ค.

handleOperator(event)

operator๋ฅผ ํด๋ฆญํ•œ ๊ฒƒ์— ๋Œ€ํ•œ ๋ฐ˜์‘ํ•˜๋Š” handleOperatorํ•จ์ˆ˜๋Š” ๊ฐ€์žฅ ๋จผ์ € ์ด์ „ ์ž…๋ ฅ์ด ์—ฐ์‚ฐ์ž์˜€์Œ์„ ์˜๋ฏธํ•˜๋Š” wasOp๋ฅผ 1๋กœ ์ง€์ •ํ•˜๊ณ , clear๊ฐ€ ๋ˆŒ๋ฆฌ์ง€ ์•Š๊ณ  ๋ช‡๋ฒˆ์˜ ์—ฐ์‚ฐ์ž๊ฐ€ ์ž…๋ ฅ๋˜์—ˆ๋Š”์ง€ ์—ฌ๋ถ€๋ฅผ ์ €์žฅํ•˜๋Š” opCount์˜ ๊ฐ’์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ๊ฒฐ๊ณผ๋ฅผ ์ถœ๋ ฅํ•˜๋„๋ก ํ•˜์˜€๋‹ค. ๋จผ์ € ์ฒ˜์Œ์œผ๋กœ ์ž…๋ ฅ๋œ ์—ฐ์‚ฐ์ž์ธ ๊ฒฝ์šฐ, num1์— parseInt(status.innerText)๋ฅผ ์ €์žฅํ•˜๊ณ , op1์—๋Š” event.target.innerText๋ฅผ ์ €์žฅํ•ด์ค€ ํ›„์— ๋‹ค์Œ ์ž…๋ ฅ์„ ๊ธฐ๋‹ค๋ฆฌ๋„๋ก ํ•˜์˜€๋‹ค. opCount๊ฐ€ 1์ธ ๊ฒฝ์šฐ์—๋Š”, num2๋ฅผ parseInt(status.innerText)๋กœ ์ €์žฅํ•˜๊ณ , op๋ฅผ event.target.innerText๋กœ ์ €์žฅํ•ด์ค€ ํ›„์—, op1์˜ ๊ฐ’์ด +,-,*,/ ์ค‘ ์–ด๋–ค ๊ฒƒ์ด๋ƒ์— ๋”ฐ๋ผ result๋ฅผ ํ•ด๋‹น ์—ฐ์‚ฐ์ž๋กœ num1๊ณผ num2๋กœ ๊ณ„์‚ฐํ•œ ๊ฒฐ๊ณผ๊ฐ’์„ ์ €์žฅํ•˜๋„๋ก ํ•˜์˜€๋‹ค. opCount๊ฐ€ 2 ์ด์ƒ์ธ ๊ฒฝ์šฐ์—๋Š” ๊ณตํ†ต์ ์œผ๋กœ num์— status.innerText๋ฅผ ์ €์žฅํ•ด์ฃผ๊ณ , result์™€ num์„ op์— ๋”ฐ๋ผ ๊ณ„์‚ฐํ•œ ๊ฒฐ๊ณผ๋ฅผ result๋กœ ์ตœ์‹ ํ™” ์‹œ์ผœ์ฃผ๊ณ , ๊ทธ ํ›„์— event.target.innerText๋ฅผ op๋กœ ์ตœ์‹ ํ™” ์‹œ์ผœ์ฃผ์—ˆ๋‹ค. opCount์— ๋”ฐ๋ฅธ ์กฐ๊ฑด๋ฌธ์„ ๊ฑฐ์นœ ์ดํ›„์—๋Š” ๊ณตํ†ต์ ์œผ๋กœ opCount = opCount + 1์„ ํ•ด์ฃผ์–ด ๊ฐ™์€ ์กฐ๊ฑด์„ ์ค‘๋ณต์œผ๋กœ ํ†ต๊ณผํ•˜์ง€ ์•Š๋„๋ก ์ฒ˜๋ฆฌํ•˜์˜€๋‹ค.

handleEqual(event)

equal (=) ๋ฒ„ํŠผ์„ ํด๋ฆญํ•œ ์ด๋ฒคํŠธ์— ๋Œ€ํ•œ ๋ฐ˜์‘์œผ๋กœ ๋™์ž‘ํ•˜๋Š” handleEqual ํ•จ์ˆ˜๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ handleOperator์˜ ๋™์ž‘๊ณผ ๊ฐ™์€ ๋ฉ”์ปค๋‹ˆ์ฆ˜์œผ๋กœ ๋™์ž‘ํ•œ๋‹ค. ์ฐจ์ด์ ์ด ์žˆ๋‹ค๋ฉด, opCount๊ฐ€ 0์ธ ๊ฒฝ์šฐ์—๋Š” ํŠน์ • ์—ฐ์‚ฐ์„ ์ง„ํ–‰ํ•  ์ˆ˜ ์—†๊ธฐ ๋•Œ๋ฌธ์— handleClear ํ•จ์ˆ˜๊ฐ€ ์ž‘๋™ํ•˜๊ฒŒ ํ–ˆ๊ณ , ์ด์™ธ์˜ ์—ฐ์„ ์—์„œ๋Š” op๋ฅผ ์ €์žฅํ•˜๋Š” ๊ฒƒ์„ ์ œ์™ธํ•˜๊ณ ๋Š” ๊ฐ™์€ ๋ฐฉ์‹์œผ๋กœ ์ž‘๋™ํ•˜๊ฒŒ ํ•˜์˜€๋‹ค.


์‹คํ–‰๊ฒฐ๊ณผ

profile
CAU Business Administration

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