๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

Web2

JS๋กœ ๊ทธ๋ฆผ ๊ทธ๋ฆฌ๊ธฐ rect/fill/fillRect/beginPath/fillStyle/moveTo/lineTo/arc ํ•จ์ˆ˜ rect : ์‚ฌ๊ฐํ˜•์„ ์„ ์œผ๋กœ ๊ทธ๋ฆฌ๋Š” ํ•จ์ˆ˜. ์œ„ ํ•จ์ˆ˜์— ํ•„์š”ํ•œ argument๋กœ๋Š” ์ˆœ์„œ๋Œ€๋กœ x์ขŒํ‘œ, y์ขŒํ‘œ, ์›ํ•˜๋Š” x์„  ๊ธธ์ด, ์›ํ•˜๋Š” y์„  ๊ธธ์ด fill : ์„ ์œผ๋กœ ๋งŒ๋“ค์–ด์ง„ ์˜์—ญ(๋„ํ˜•)์„ ์ƒ‰(๊ธฐ๋ณธ black)์œผ๋กœ ์ฑ„์šฐ๋Š” ํ•จ์ˆ˜ fillRect : ์„ ๊ณผ ์ฑ„์šฐ๊ธฐ ํ•จ์ˆ˜ rect,fill์„ ํ•œ๋ฒˆ์— ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•œ๋ฒˆ์— ์ฑ„์›Œ์ง„ ๋„ํ˜•์„ ๊ทธ๋ฆฌ๋Š” ํ•จ์ˆ˜. ํ•„์š”ํ•œ argument๋Š” ์‹œ์ž‘ํ•  x์ขŒํ‘œ,y์ขŒํ‘œ , ์ฑ„์šธ๋งŒํผ์˜ x์ขŒํ‘œ, y์ขŒํ‘œ beginPath : ์ƒˆ๋กœ์šด ์ƒ‰/์Šคํƒ€์ผ์„ ์ž…ํžˆ๊ณ  ์‹ถ์„๋•Œ path๋ฅผ ์ƒˆ๋กœ ์ง€์ •ํ•ด์ฃผ๊ธฐ ์œ„ํ•ด ํ˜ธ์ถœํ•˜๋Š” ํ•จ์ˆ˜ fillStyle : ์ƒ‰์œผ๋กœ ์ฑ„์šธ๋•Œ ์›ํ•˜๋Š” ์ƒ‰์„ ์ž…๋ ฅ moveTo: ๋งˆ์šฐ์Šค ์ปค์„œ์˜ ์œ„์น˜๋ฅผ ๋‹ค์‹œ ์ž…๋ ฅํ•˜๊ณ  ์‹ถ์„๋•Œ ์‚ฌ์šฉ. ์œ„ ํ•จ์ˆ˜์— ํ•„์š”ํ•œ argument๋กœ๋Š” ์ˆœ์„œ๋Œ€๋กœ ์ด๋™ํ•˜๊ณ  ์‹ถ์€ x์ขŒํ‘œ ์œ„์น˜ (์ˆซ.. 2022. 8. 27.
JS ๊ฐ•์˜ ๋ณต์Šต [1] #2๋‹จ์› ๋ณต์Šต์˜ ์ค‘์š”์„ฑ์€ ์ •๋ง ๊ณต๋ถ€๋ฅผ ํ• ๋•Œ๋งˆ๋‹ค ๋Š๋ผ๋Š” ๊ฒƒ ๊ฐ™๋‹ค.. ์˜ค๋žœ๋งŒ์— ๊ณต๋ถ€๋ฅผ ํ• ๋•Œ ๋‚ด๊ฐ€ ์ด๊ฑธ ์ง€๊ธˆ๋„ ๊ธฐ์–ต ๋ชปํ•˜๋Š”๋ฐ, ์ดํ›„์— ๊ธฐ์–ตํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š”๊ฒŒ ๋‚ด ๋Šฅ๋ ฅ์ด ์•„๋‹Œ ๋ณต์Šต์ด๋ผ๋Š” ๊ฑธ ์•Œ๋ฉด ๋งค๋ฒˆ ๊ณต๋ถ€ํ• ๋•Œ๋งˆ๋‹ค ๋ณต์Šต์„ ๋†“์น ์ˆ˜๊ฐ€ ์—†๋‹ค.. ๊ทธ๋Ÿฐ ์˜๋ฏธ์—์„œ ์ง€๊ธˆ ํ•˜๊ณ  ์žˆ๋Š” ๋ฐ”๋‹๋ผ JS ๊ฐ•์˜์— ๋Œ€ํ•œ ์ง€๋‚œ ๊ณต๋ถ€๋ฅผ ๋ณต์Šตํ•ด๋ณด๋ ค ํ•œ๋‹ค. #2. const ๋ณ€์ˆ˜ - ์ดํ›„ ๋ณ€์ˆ˜ ๋ณ€๊ฒฝ ๋ถˆ๊ฐ€ ; ์ด๊ฒƒ์„ ๋ฉ”์ธ์œผ๋กœ ์‚ฌ์šฉ let - ๋ณ€๊ฒฝ ๊ฐ€๋Šฅ - ๊ฐ€๋” ์‚ฌ์šฉ (var - ์˜›๋‚  ์ฝ”๋“œ, ๊ตฌ๋ถ„ํ•  ์ˆ˜ ์—†๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ์šฉ ์ง€์–‘ ) list -> ๋˜‘๊ฐ™์ด [ ] ์‚ฌ์šฉ, ๋‹ค์–‘ํ•œ ๋ฐ์ดํ„ฐํƒ€์ž…์„ ํ•œ๋ฒˆ์— ๋„ฃ์„ ์ˆ˜ ์žˆ์Œ (์ด๊ฒŒ ํŠนํžˆ ํŠน์ด) -> ๋‹น์—ฐํžˆ ์ƒˆ๋กœ ํ•ญ๋ชฉ ์ถ”๊ฐ€ ๊ฐ€๋Šฅ object ์ œ์ž‘ ; ๊ฐ์ฒด ์ œ์ž‘ - ๊ฐ์ฒด๊ฐ€ ๊ฐ€์ง€๋Š” ์†์„ฑ์€ ๋‹ค์–‘ key-value ํ˜•์‹ array ๋ณต์Šต.. 2022. 6. 13.