ํด๋น ํ๋ก์ ํธ๋ ๋ณ ๋ค๋ฅธ ํ๋ ์์ํฌ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ง ์๊ณ ๋ฐ๋๋ผ JS, html, css๋ง์ ์ด์ฉํ์ฌ ๊ณ์ฐ๊ธฐ๋ฅผ ๊ตฌํํฉ๋๋ค. ์๋์ ํญ๋ชฉ๋ค์ ๊ฐ๊ฐ html, css, Javascript ํ์ผ์ด ์ด๋ค ์๋ฆฌ๋ก ๊ตฌํ๋์๋์ง๋ฅผ ๋ณด์ฌ์ค๋๋ค.
- ์ฐ์ ์ ์ฒด ์์๋ค์ grid๋ก ๊ตฌ์ฑํ ๊ฒ์ด๋ฏ๋ก ์ต์ธ๊ณฝ div์ class๋ฅผ ๊ด๋ จ ์ด๋ฆ์ผ๋ก ์ก์ต๋๋ค.
- ๊ณ์ฐ๊ธฐ๋ ํฌ๊ฒ ๊ฒฐ๊ณผ๋ฅผ ๋ณด์ฌ์ค ๋ถ๋ถ๊ณผ ์ฐ์ฐ์ & ํผ์ฐ์ฐ์๊ฐ ๋ค์ด๊ฐ ๋ถ๋ถ์ผ๋ก ๋๋ฉ๋๋ค. ์ ์๋ ํ๋์ div์ ๋ฃ์ด์ฃผ๋ฉฐ ํ์๋ ๊ทธ๋ฅ button ์์๋ฅผ ๋์ดํฉ๋๋ค.
- ๊ฐ ์ญํ ์ ํ๋ ์์ฑ์ ์์๋ง๋ค ๋ถ์ฌํ๋๋ฐ, ์ด๋ Javascript๋ฅผ ํตํด DOM ์กฐ์์ผ๋ก pickํฉ๋๋ค.
- ์์ฑ์ ๊ฐ๊ฐ ac, del, ์ด์ ์ ํผ์ฐ์ฐ์, ํ์ฌ์ ํผ์ฐ์ฐ์, ์ฐ์ฐ์, ๋๋ฑ equal ๊ธฐํธ๋ก ๋๋ฉ๋๋ค.
- ๋ชจ๋ ์์๋ box-sizing์ border-box ์์ฑ์ ์ ์ฉํด ๋๋น์ ๋์ด๋ฅผ ์ง๊ด์ ์ผ๋ก ์กฐ์ํ ์ ์๋๋ก ํด์ค๋๋ค.
- ๋ชจ๋ ์์๋ฅผ ๊ฐ์ง๊ณ ์๋ ์ต์ธ๊ณฝ div๋ ์ปจํ ์ด๋ ์ญํ ์ ํ๋๋ฐ, display๋ ๊ทธ๋ฆฌ๋๋ก ํฉ๋๋ค. ๊ด๋ จ ์์ฑ๋ค์ ํตํด์ ์ด๋ฅผ ํ๋ฉด์ ์ค์์ ์์น์ํต๋๋ค.
- grid-template ์์ฑ์ ํตํด ์ด๊ณผ ํ์ ๊ฐ์๋ฅผ ๊ฐ๊ฐ ์ ํด์ค๋๋ค.
- ๋ฒํผ์ ์ปค์๊ฐ ์ฌ๋ผ๊ฐ๋ฉด ์ด๋ฅผ ํฌ์ธํฐ๋ก ๋ฐ๊ฟ์ฃผ๋ฉฐ, hover ์ํ์ Psuedo class๋ฅผ ํตํด ์์์ ๋ฐ๊ฟ์ค๋๋ค.
- ac๋ = ๋ฒํผ์ ๋ค๋ฅธ ๋ฒํผ๋ค๊ณผ ๋ค๋ฅด๊ฒ 2์นธ์ฉ ์ฐจ์งํ๋ฏ๋ก span-two ํด๋์ค๋ ์ด๋ฅผ ์ ์ฉํฉ๋๋ค.
- previous ํผ์ฐ์ฐ์์ current ํผ์ฐ์ฐ์๋ฅผ ๋ณด์ฌ์ค output div๋ ๊ฐ๊ฐ์ ์์๋ฅผ ๋ด๊ธฐ ์ํด์ display ์์ฑ์ flex๋ก ์ค์ ํ๊ณ ๊ด๋ จ ์ค์ ์ ๋ง์ถฐ์ค๋๋ค.
๋ณธ ๊ณ์ฐ๊ธฐ ํ๋ก์ ํธ๋ class๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๊ตฌํ๋ฉ๋๋ค. ์ด๋ ๊ณ์ฐ๊ธฐ์๋ ์ผ์ข ์ ์ํ(state)๋ค์ด ์๋ค๊ณ ์๊ฐํ๋ฉด ์ข์ต๋๋ค. ์ค์ ํ์๋ previous ํผ์ฐ์ฐ์์ UI, current ํผ์ฐ์ฐ์์ UI, previousOperand, currentOperand, operation(์ฐ์ฐ ์ํ)์ ๋๋ค.
- html ์์๋ค์ querySelector,querySelectorAll ๋ฉ์๋๋ฅผ ํตํด pickํด์ค๋๋ค. ์ด๋ html์์ ๋ถ์ฌํ ์์ฑ๋ ์ ์ฉํ ์ ์์ต๋๋ค(๊ด๋ จ ์ฝ๋ ์ฐธ์กฐ).
- ๋๋จธ์ง ๊ด๋ จ ์ ๋ณด๋ ์ฝ๋์ ์ฃผ์์ ์ฐธ๊ณ ํ์๋ฉด์ ์ดํดํ์๋ฉด ์ข์ ๊ฒ ๊ฐ์ต๋๋ค.
- ์ฝ๋ฉ์ ํ๊ธฐ ์ด์ ์, ๊ณ์ฐ๊ธฐ์ ๋ ์ด์์์ ๊ตฌ์ํ๊ณ ํ์ํ ๊ธฐ๋ฅ์ ์๊ฐํฉ๋๋ค. ํ์ ์ด๋ค ๋ฐฉ์์ผ๋ก ์ด๋ฅผ ๊ตฌํํ ์ง๋ฅผ ์ ํฉ๋๋ค(class๋ฅผ ์ด์ฉํด์
this.{๋ฉ์๋}
๋ฐฉ์) - ๊ธฐ๋ฅ์ ์ถ๊ฐํ๋ค๋ณด๋ฉด ์ฐ์ฐ์๊ฐ previousOperand ๋ฑ์์ ๋๋ฝ๋๋ ๋ฑ์ ์ ๋ก ์ฌํญ์ผ ์๊ธธ ์ ์์ต๋๋ค. ํด๋์ค์ ๋ฉ์๋๋ฅผ ์์ฑํด์ฃผ๋ ๋ฐฉ๋ฒ์ ํํ๊ธฐ ๋๋ฌธ์, ํด๋น ์ผ์ด์ค๋ค์ ์ฒ๋ฆฌํด์ค ์ ์๋ ์ด๊ธฐ ์กฐ๊ฑด(early return)๋ฌธ์ ํตํด ์ด๋ฅผ ๊ฐ์ ํฉ๋๋ค.
- Javascript๋ ์ฌ์ฉ์์์ ์ธํฐ๋ ์
์ DOM์ ๋ฐ์ํ๊ธฐ ์ํ ์คํฌ๋ฆฝํ
์ธ์ด๋ก ์์ํ ๋ชฉ์ ์ด ๊ฐํ๊ธฐ ๋๋ฌธ์, ๊ฐ DOM ์์๋ง๋ค
addEventListener()
๋ฑ์ ๋ฉ์๋๋ฅผ ์ด์ฉํด ์ด๋ฒคํธ๋ฅผ ๋ฑ๋กํด์ฃผ๋ ๊ฒ์ด ํฌ์ธํธ์ ๋๋ค