Skip to content

Programming-Seungwan/Javascript_Calculator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Javascript_Calculator ๐Ÿงฎ

ํ•ด๋‹น ํ”„๋กœ์ ํŠธ๋Š” ๋ณ„ ๋‹ค๋ฅธ ํ”„๋ ˆ์ž„์›Œํฌ๋‚˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ๋ฐ”๋‹๋ผ JS, html, css๋งŒ์„ ์ด์šฉํ•˜์—ฌ ๊ณ„์‚ฐ๊ธฐ๋ฅผ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค. ์•„๋ž˜์˜ ํ•ญ๋ชฉ๋“ค์€ ๊ฐ๊ฐ html, css, Javascript ํŒŒ์ผ์ด ์–ด๋–ค ์›๋ฆฌ๋กœ ๊ตฌํ˜„๋˜์—ˆ๋Š”์ง€๋ฅผ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค.

๐Ÿ“Œ index.html

  • ์šฐ์„  ์ „์ฒด ์š”์†Œ๋“ค์€ grid๋กœ ๊ตฌ์„ฑํ•  ๊ฒƒ์ด๋ฏ€๋กœ ์ตœ์™ธ๊ณฝ div์˜ class๋ฅผ ๊ด€๋ จ ์ด๋ฆ„์œผ๋กœ ์žก์Šต๋‹ˆ๋‹ค.
  • ๊ณ„์‚ฐ๊ธฐ๋Š” ํฌ๊ฒŒ ๊ฒฐ๊ณผ๋ฅผ ๋ณด์—ฌ์ค„ ๋ถ€๋ถ„๊ณผ ์—ฐ์‚ฐ์ž & ํ”ผ์—ฐ์‚ฐ์ž๊ฐ€ ๋“ค์–ด๊ฐˆ ๋ถ€๋ถ„์œผ๋กœ ๋‚˜๋‰ฉ๋‹ˆ๋‹ค. ์ „์ž๋Š” ํ•˜๋‚˜์˜ div์— ๋„ฃ์–ด์ฃผ๋ฉฐ ํ›„์ž๋Š” ๊ทธ๋ƒฅ button ์š”์†Œ๋ฅผ ๋‚˜์—ดํ•ฉ๋‹ˆ๋‹ค.
  • ๊ฐ ์—ญํ• ์„ ํ•˜๋Š” ์†์„ฑ์„ ์š”์†Œ๋งˆ๋‹ค ๋ถ€์—ฌํ•˜๋Š”๋ฐ, ์ด๋Š” Javascript๋ฅผ ํ†ตํ•ด DOM ์กฐ์ž‘์œผ๋กœ pickํ•ฉ๋‹ˆ๋‹ค.
  • ์†์„ฑ์€ ๊ฐ๊ฐ ac, del, ์ด์ „์˜ ํ”ผ์—ฐ์‚ฐ์ž, ํ˜„์žฌ์˜ ํ”ผ์—ฐ์‚ฐ์ž, ์—ฐ์‚ฐ์ž, ๋™๋“ฑ equal ๊ธฐํ˜ธ๋กœ ๋‚˜๋‰ฉ๋‹ˆ๋‹ค.

๐Ÿ“Œ styles.css

  • ๋ชจ๋“  ์š”์†Œ๋Š” box-sizing์„ border-box ์†์„ฑ์„ ์ ์šฉํ•ด ๋„ˆ๋น„์™€ ๋†’์ด๋ฅผ ์ง๊ด€์ ์œผ๋กœ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ค๋‹ˆ๋‹ค.
  • ๋ชจ๋“  ์š”์†Œ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์ตœ์™ธ๊ณฝ div๋Š” ์ปจํ…Œ์ด๋„ˆ ์—ญํ• ์„ ํ•˜๋Š”๋ฐ, display๋Š” ๊ทธ๋ฆฌ๋“œ๋กœ ํ•ฉ๋‹ˆ๋‹ค. ๊ด€๋ จ ์†์„ฑ๋“ค์„ ํ†ตํ•ด์„œ ์ด๋ฅผ ํ™”๋ฉด์˜ ์ค‘์•™์— ์œ„์น˜์‹œํ‚ต๋‹ˆ๋‹ค.
  • grid-template ์†์„ฑ์„ ํ†ตํ•ด ์—ด๊ณผ ํ–‰์˜ ๊ฐœ์ˆ˜๋ฅผ ๊ฐ๊ฐ ์ •ํ•ด์ค๋‹ˆ๋‹ค.
  • ๋ฒ„ํŠผ์— ์ปค์„œ๊ฐ€ ์˜ฌ๋ผ๊ฐ€๋ฉด ์ด๋ฅผ ํฌ์ธํ„ฐ๋กœ ๋ฐ”๊ฟ”์ฃผ๋ฉฐ, hover ์ƒํƒœ์˜ Psuedo class๋ฅผ ํ†ตํ•ด ์ƒ‰์ƒ์„ ๋ฐ”๊ฟ”์ค๋‹ˆ๋‹ค.
  • ac๋‚˜ = ๋ฒ„ํŠผ์€ ๋‹ค๋ฅธ ๋ฒ„ํŠผ๋“ค๊ณผ ๋‹ค๋ฅด๊ฒŒ 2์นธ์”ฉ ์ฐจ์ง€ํ•˜๋ฏ€๋กœ span-two ํด๋ž˜์Šค๋Š” ์ด๋ฅผ ์ ์šฉํ•ฉ๋‹ˆ๋‹ค.
  • previous ํ”ผ์—ฐ์‚ฐ์ž์™€ current ํ”ผ์—ฐ์‚ฐ์ž๋ฅผ ๋ณด์—ฌ์ค„ output div๋Š” ๊ฐ๊ฐ์˜ ์š”์†Œ๋ฅผ ๋‹ด๊ธฐ ์œ„ํ•ด์„œ display ์†์„ฑ์„ flex๋กœ ์„ค์ •ํ•˜๊ณ  ๊ด€๋ จ ์„ค์ •์„ ๋งž์ถฐ์ค๋‹ˆ๋‹ค.

๐Ÿ“Œ script.js

๋ณธ ๊ณ„์‚ฐ๊ธฐ ํ”„๋กœ์ ํŠธ๋Š” class๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ตฌํ˜„๋ฉ๋‹ˆ๋‹ค. ์ด๋•Œ ๊ณ„์‚ฐ๊ธฐ์—๋Š” ์ผ์ข…์˜ ์ƒํƒœ(state)๋“ค์ด ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋ฉด ์ข‹์Šต๋‹ˆ๋‹ค. ์‹ค์ œ ํ‘œ์‹œ๋  previous ํ”ผ์—ฐ์‚ฐ์ž์˜ UI, current ํ”ผ์—ฐ์‚ฐ์ž์˜ UI, previousOperand, currentOperand, operation(์—ฐ์‚ฐ ์ƒํƒœ)์ž…๋‹ˆ๋‹ค.

  • html ์š”์†Œ๋“ค์€ querySelector,querySelectorAll ๋ฉ”์„œ๋“œ๋ฅผ ํ†ตํ•ด pickํ•ด์ค๋‹ˆ๋‹ค. ์ด๋Š” html์—์„œ ๋ถ€์—ฌํ•œ ์†์„ฑ๋„ ์ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค(๊ด€๋ จ ์ฝ”๋“œ ์ฐธ์กฐ).
  • ๋‚˜๋จธ์ง€ ๊ด€๋ จ ์ •๋ณด๋Š” ์ฝ”๋“œ์˜ ์ฃผ์„์„ ์ฐธ๊ณ ํ•˜์‹œ๋ฉด์„œ ์ดํ•ดํ•˜์‹œ๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

ํด๋ก ์„ ํ•˜๋ฉด์„œ ๋Š๋‚€ ์  โœ…

  1. ์ฝ”๋”ฉ์„ ํ•˜๊ธฐ ์ด์ „์—, ๊ณ„์‚ฐ๊ธฐ์˜ ๋ ˆ์ด์•„์›ƒ์„ ๊ตฌ์ƒํ•˜๊ณ  ํ•„์š”ํ•œ ๊ธฐ๋Šฅ์„ ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ํ›„์— ์–ด๋–ค ๋ฐฉ์‹์œผ๋กœ ์ด๋ฅผ ๊ตฌํ˜„ํ• ์ง€๋ฅผ ์ •ํ•ฉ๋‹ˆ๋‹ค(class๋ฅผ ์ด์šฉํ•ด์„œ this.{๋ฉ”์„œ๋“œ} ๋ฐฉ์‹)
  2. ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜๋‹ค๋ณด๋ฉด ์—ฐ์‚ฐ์ž๊ฐ€ previousOperand ๋“ฑ์—์„œ ๋ˆ„๋ฝ๋˜๋Š” ๋“ฑ์˜ ์• ๋กœ ์‚ฌํ•ญ์ผ ์ƒ๊ธธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํด๋ž˜์Šค์˜ ๋ฉ”์„œ๋“œ๋ฅผ ์ž‘์„ฑํ•ด์ฃผ๋Š” ๋ฐฉ๋ฒ•์„ ํƒํ–ˆ๊ธฐ ๋•Œ๋ฌธ์—, ํ•ด๋‹น ์ผ€์ด์Šค๋“ค์„ ์ฒ˜๋ฆฌํ•ด์ค„ ์ˆ˜ ์žˆ๋Š” ์ดˆ๊ธฐ ์กฐ๊ฑด(early return)๋ฌธ์„ ํ†ตํ•ด ์ด๋ฅผ ๊ฐœ์„ ํ•ฉ๋‹ˆ๋‹ค.
  3. Javascript๋Š” ์‚ฌ์šฉ์ž์™€์˜ ์ธํ„ฐ๋ ‰์…˜์„ DOM์— ๋ฐ˜์˜ํ•˜๊ธฐ ์œ„ํ•œ ์Šคํฌ๋ฆฝํŒ… ์–ธ์–ด๋กœ ์‹œ์ž‘ํ•œ ๋ชฉ์ ์ด ๊ฐ•ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์—, ๊ฐ DOM ์š”์†Œ๋งˆ๋‹ค addEventListener() ๋“ฑ์˜ ๋ฉ”์„œ๋“œ๋ฅผ ์ด์šฉํ•ด ์ด๋ฒคํŠธ๋ฅผ ๋“ฑ๋กํ•ด์ฃผ๋Š” ๊ฒƒ์ด ํฌ์ธํŠธ์ž…๋‹ˆ๋‹ค

์‹ค์ œ ๊ณ„์‚ฐ๊ธฐ ๊ตฌํ˜„ ์ด๋ฏธ์ง€

๊ณ„์‚ฐ๊ธฐ ์ด๋ฏธ์ง€

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published