Squares Front-End ๐Ÿ‘จโ€๐Ÿ’ป
์Šคํ€˜์–ด์Šค ํ”„๋ก ํŠธ์—”๋“œ ํŒ€์ž…๋‹ˆ๋‹ค.
๋‹จ์ถ•ํ‚ค๋Š” ์–ด๋–ป๊ฒŒ ๊ตฌํ˜„๋˜์—ˆ๋Š”๊ฐ€?
๋‚˜์˜ ๊ตฌํ˜„ ์ผ์ง€ ์ž…๋ ฅ ํ‚ค ์Šคํƒ์œผ๋กœ ๋ฐ›๊ธฐ what is stack? ์Šคํƒ์€ ๋ฐ์ดํ„ฐ๋ฅผ ์ฐจ๊ณก์ฐจ๊ณก ์Œ“์„ ์ˆ˜ ์žˆ๋Š” ์ž๋ฃŒ๊ตฌ์กฐ์ž…๋‹ˆ๋‹ค. ๋งŒ์•ฝ ctrl + shift + c ๋ฅผ ๋ˆŒ๋ €๋‹ค๋ฉด, [ctrl, shift, c] ์ด๋Ÿฐ ์‹์œผ๋กœ ๋“ค์–ด๊ฐ€ ์žˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ! ํ‚ค๋ฅผ ๊ผญ ์ˆœ์„œ๋Œ€๋กœ ๋ˆ„๋ฅด๋ผ๋Š” ๋ฒ•์€ ์—†๊ธฐ ๋•Œ๋ฌธ์— ์ˆœ์„œ๋Š” ๋ฐ”๋€Œ์–ด ์žˆ์„ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ์„ธ ๊ฐœ์˜ ํ‚ค๋ฅผ ํ•œ ๋ฒˆ์— ๋ˆ„๋ฅด๋Š” ๊ฒฝ์šฐ์—๋Š” shift + ctrl + c ์ด๋Ÿฐ ์‹์œผ๋กœ ์ €์žฅ๋  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•ด๋‹น stack์€ useKeyPress๋ผ๋Š” ํŒŒ์ผ์— ์ƒํƒœ๊ฐ’์œผ๋กœ ์ €์žฅ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. pressed keys๊ฐ€ ์Šคํƒ์ด์–ด์•ผ ํ•˜๋Š” ์ด์œ ? ๊ฐ™์€ ํ‚ค๋ฅผ ๋‘ ๋ฒˆ ๋ˆ„๋ฅด๋Š” ์ปค๋งจ๋“œ๋กœ์˜ ํ™•์žฅ ๊ฐ€๋Šฅ์„ฑ ๋‹ค๋ฅธ ๋ฌธ์ž ํ‚ค๋ฅผ ๊ฐ™์ด ๋ˆ„๋ฅด๋Š” ์ปค๋งจ๋“œ ํ™•์žฅ ๊ฐ€๋Šฅ์„ฑ โ†’ ์˜ˆ๋ฅผ ๋“ค์–ด์„œ "c c" ์ด๋Ÿฐ ์‹์˜ ์ปค๋งจ๋“œ์™€, "c f" ๊ฐ™์€ ์ปค๋งจ๋“œ๋„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•˜๋ ค๋ฉด ์Šคํƒ์„ ๋ฌด์กฐ๊ฑด ์‚ฌ์šฉํ•ด์•ผ ํ•จ. ์ž…๋ ฅ์€ ์Šคํƒ์œผ๋กœ ๋ฐ›๊ณ , ์‚ฌ์šฉ์€ ์ผ๋ฐ˜ ๊ฐ์ฒด๋กœ ๋ฐฐ์—ด์„ ์‚ฌ์šฉํ•  ๋•Œ ๋ฐฐ์—ด์„ ๊ณ„์† ์ˆœํšŒํ•˜๊ธฐ์—๋Š” ์„ฑ๋Šฅ ์ด์Šˆ๊ฐ€ ์žˆ๊ธฐ ๋•Œ๋ฌธ์—, ๊ฐ์ฒด๋กœ ๋งŒ๋“ค์–ด์„œ ์ฐธ์กฐํ•œ๋‹ค. ์ฆ‰, ํ‚ค๋ณด๋“œ ์ž…๋ ฅ ์ž์ฒด๋Š” ๋ฐฐ์—ด๋กœ ๋ฐ›๊ณ , ์ž…๋ ฅ๊ฐ’์„ ์‚ฌ์šฉํ•  ๋•Œ์—๋Š” ์ด๋ฅผ ์ผ๋ฐ˜๊ฐ์ฒด๋กœ ๋ณ€ํ™˜ํ•œ๋‹ค. ํ‚ค๊ฐ€ ๋ˆŒ๋ฆฐ ์ •๋„์— ๋”ฐ๋ผ key={c:2} key={c:1,f:1} ์ด๋Ÿฐ ์‹์œผ๋กœ ์ƒ์„ฑ๋œ๋‹ค. ์ž…๋ ฅ๊ฐ’์„ ๋ฐ›์•˜์„ ๋•Œ ๋ถ„๊ธฐ์ฒ˜๋ฆฌ ์‚ฌ์ง„์—์„œ์ฒ˜๋Ÿผ ํ•จ์ˆ˜ depth๊ฐ€ ๋‚˜๋‰˜์–ด์ ธ ์žˆ์Šต๋‹ˆ๋‹ค. ์ดˆ๋ก์ƒ‰ ๋…ธ๋“œ๊ฐ€ ๊ฐ ํ‚ค๊ฐ€ ์–ด๋–ค ํ–‰๋™์„ ํ•˜๋Š”์ง€๋ฅผ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. Ctrl ํ˜น์€ Alt, Shift๊ฐ€ ๋ˆŒ๋ ค์žˆ์Œ์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ํ–‰๋™์ด ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค. ๋นจ๊ฐ„์ƒ‰ ๋…ธ๋“œ์—์„œ ์ž…๋ ฅํ‚ค๋ฅผ ๋ฐ›์œผ๋ฉฐ, keydown event๋ฅผ ๊ฐ์ง€ํ•ฉ๋‹ˆ๋‹ค. ํšŒ์ƒ‰ - ์ดˆ๋ก์ƒ‰ ๋…ธ๋“œ์—์„œ ์ž…๋ ฅํ‚ค๋ฅผ ๋ถ„์„ํ•˜๊ณ  ๋ถ„๋ฅ˜ํ•˜์—ฌ ํŠน์ • ํ–‰๋™์„ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค. ์ฝ”๋“œ๋Š” ์ด๋ ‡์Šต๋‹ˆ๋‹ค. ํšŒ์ƒ‰ ๋…ธ๋“œ ์ดˆ๋ก์ƒ‰ ๋…ธ๋“œ ๋ชจ๋‹ฌ ์—ด๋ฆผ ์ •๋ณด ์ €์žฅ ๋‹จ์ถ•ํ‚ค๋ฅผ ํ†ตํ•ด ๋ชจ๋‹ฌ์„ ์—ฌ๋‹ซ๊ธฐ ์œ„ํ•ด์„œ๋Š” ๊ฐ ๋ชจ๋‹ฌ์ด ์—ด๋ ค ์žˆ๋Š” ์—ฌ๋ถ€๋ฅผ ์ €์žฅํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์•„๋ž˜์™€ ๊ฐ™์€ ์ž๋ฃŒ๊ตฌ์กฐ๋กœ ์ €์žฅํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ์‹œ) style : ์Šคํƒ€์ผ ํŽธ์ง‘ ๋ชจ๋‹ฌ์„ ์—ด๋ฆผ ์—ฌ๋ถ€๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” boolean ๊ฐ’ ๋ชจ๋‹ฌ ํ™•์žฅ์„ฑ์„ ๊ณ ๋ คํ•ด์„œ ์„ค๊ณ„! arrow keys๋Š” ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅธ ์ƒํƒœ๋กœ ์œ ์ง€์‹œํ‚ค๊ธฐ ํ‚ค๋ณด๋“œ๋ฅผ ๋ˆ„๋ฅด๋ฉด keydown์ด๋ฒคํŠธ๊ฐ€ ๋ฌด์ˆ˜ํžˆ ๋งŽ์ด ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. keydown์ด๋ฒคํŠธ์™€ ์ปจํ…์ธ ์˜ ์›€์ง์ž„์„ 1๋Œ€1๋กœ ๋งคํ•‘ํ•œ๋‹ค๋ฉด, 1์ดˆ ์•ˆ์— ์„น์…˜ ๋ฐ–์œผ๋กœ ๋›ฐ์ณ๋‚˜๊ฐ€ ๋ฒ„๋ฆด ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ, ์ ์ ˆํžˆ ์Šค๋กœํ‹€๋ง์„ ์ฃผ์–ด ์„น์…˜ ๋ฐ–์œผ๋กœ ๋›ฐ์ณ๋‚˜๊ฐ€์ง€ ๋ชปํ•˜๊ฒŒ ํ–ˆ์Šต๋‹ˆ๋‹ค. window.navigator.userAgent ํ™•์ธํ•˜๊ธฐ mac Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 window Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36 ์ฆ‰, mac์ด๋‚˜ windows๋ผ๋Š” ์šด์˜์ฒด์ œ ์ด๋ฆ„์ด ๋“ค์–ด๊ฐ‘๋‹ˆ๋‹ค. ์ด ๊ฒƒ์œผ๋กœ ๊ตฌ๋ถ„ํ•  ์ˆ˜๋Š” ์žˆ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ตฌํ˜„ ์‹œ ์–ด๋ ค์› ๋˜ ๊ฒƒ ์•ˆ ๋ง‰์•„์ง€๋Š” ํ‚ค๋„ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. Mac์„ ๊ธฐ์ค€์œผ๋กœ ์•ˆ ๋ง‰์•„์ง€๋Š” ํ‚ค๋“ค๋„ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ดโ€ฆ F11์€ โ€œ๋ฐ”ํƒ•ํ™”๋ฉด ๋ณด๊ธฐโ€ ๊ธฐ๋Šฅ์ธ๋ฐ์š”. ์ด ๊ฒƒ์€ ์ž…๋ ฅ ๋ฐฉ์ง€๊ฐ€ ๋˜์ง€ ์•Š๋”๊ตฐ์š”.. ๊ฒฐ๊ตญ ๊ธฐํšํŒ€๊ณผ ํ˜‘์˜ ํ›„ ๋‹ค๋ฅธ ํ‚ค์— ๋งคํ•‘ํ–ˆ์Šต๋‹ˆ๋‹ค. ์œˆ๋„์šฐ์™€ ๋งฅ, ์„œ๋กœ ๋‹ค๋ฅธ ํ‚ค ์‚ฌ์ง„์ฒ˜๋Ÿผ Mac๊ณผ window์˜ ํ‚ค๊ฐ€ ์—‡๊ฐˆ๋ฆฝ๋‹ˆ๋‹ค. ๋‹น์ตœ ์™œ ์ด๋ ‡๊ฒŒ ๋˜์–ด ์žˆ๋Š”์ง€ ์•Œ ์ˆ˜ ์—†๊ตฐ์š”. ์ฆ‰ Command์— ํŠน์ • ๊ธฐ๋Šฅ์„ ๋งคํ•‘ํ•œ๋‹ค๋ฉด, ์œˆ๋„์šฐ์—์„œ๋Š” ์ € ์ด์ƒํ•œโ€ฆ windowํ‚ค์— ๋งคํ•‘๋ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ, ์ด๋ ‡๊ฒŒ ํ•  ์ˆ˜ ๋ฐ–์— ์—†์—ˆ์Šต๋‹ˆ๋‹ค. Command (mac) โ†” ctrl (window) Control (mac) โ†” ctrl (window) Option (mac) โ†” alt (window) ๋‹ค๋งŒ ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด mac์—์„œ๋Š” metakey๋ฅผ ๋ˆŒ๋Ÿฌ๋„ ๋˜๊ณ  controlํ‚ค๋ฅผ ๋ˆŒ๋Ÿฌ๋„ ๊ฐ™์€ ๊ธฐ๋Šฅ์„ ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์•„์‰ฌ์› ๋˜ ์  ๋ฐฐ์—ด ํ˜•ํƒœ์˜ Stack๋ณด๋‹ค Map์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ ์–ด๋• ์„๊นŒ? ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋ฐฐ์—ด์„ ์œ„ํ•œ ๋‹ค์–‘ํ•œ ๋ฉ”์„œ๋“œ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. find๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ฐฐ์—ด ์•ˆ์˜ ํŠน์ • ์š”์†Œ๋ฅผ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ์ง€์š”. ๋‹ค๋งŒ ์ด ๋•Œ ๋ฐฐ์—ด ๋‚ด๋ถ€ ์š”์†Œ๋ฅผ ์ˆœํšŒํ•ด์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์„ฑ๋Šฅ์ƒ ์กฐ๊ธˆ ๋Š๋ฆด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฒŒ๋‹ค๊ฐ€ ์œ„์—์„œ ์ ์—ˆ๋“ฏ์ด ctrl + shift + c ๋ฅผ ๋ˆ„๋ฅธ๋‹ค๊ณ  ํ•ด๋„ ๋ฐฐ์—ด์— ์ € ์ˆœ์„œ๋Œ€๋กœ ๋“ค์–ด๊ฐ€ ์žˆ์œผ๋ฆฌ๋ž€ ๋ฒ•์ด ์—†์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๋ฐฐ์—ด๋ณด๋‹ค ์š”์†Œ ํƒ์ƒ‰ ์†๋„๊ฐ€ ์ข‹์€ Map ์ž๋ฃŒ๊ตฌ์กฐ๋ฅผ ์ผ์œผ๋ฉด ์–ด๋• ์„๊นŒ ํ•˜๋Š” ์•„์‰ฌ์›€๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ์žฅ๋‹จ์ ์€ ์ด ์ •๋„๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์žฅ์  ๋ฐฐ์—ด๋ณด๋‹ค ์š”์†Œ ํƒ์ƒ‰ ์†๋„๊ฐ€ ๋น ๋ฅด๋‹ค (get ์ œ๊ณต) ํŠน์ • ์š”์†Œ๋ฅผ ์‚ญ์ œํ•˜๊ธฐ๋„ ์‰ฝ๋‹ค (delete ์ œ๊ณต) key์— ๋ฌธ์ž์—ด์ด ์•„๋‹ˆ๋ผ ์ฃผ์†Œ๊ฐ’์„ ๋„ฃ์„ ์ˆ˜๋„ ์žˆ๋‹ค. ๋‹จ์  ์‹ ๊ธฐ์ˆ ์ด๋‹ค๋ณด๋‹ˆ ํŒ€์›๋“ค์ด ๋ชจ๋ฅผ ๊ฐ€๋Šฅ์„ฑ์ด ๋†’์Œ. ๋ฐฐ์—ด์ด๋‚˜ ์ผ๋ฐ˜ ๊ฐ์ฒด๊ฐ€ ๊ฐ€์žฅ ์นœ์ˆ™ํ•จ. ์Šคํ”„๋ฆฐํŠธ ์ผ์ •์ด ๋น ๋“ฏํ•˜์—ฌ, ํŒ€์›๋“ค์—๊ฒŒ Map์— ๋Œ€ํ•œ ์„ค๋ช…์„ ํ•˜๊ธฐ์—๋Š” ์‹œ๊ฐ„์ด ๋ถ€์กฑํ•ด์„œ ๊ฒฐ๊ตญ ๋ฐฐ์—ด๋กœ ๊ตฌํ˜„ ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ผ์ •์ด ๋„๋„ํ•œ ๋‚ ์ด ์˜จ๋‹ค๋ฉด Map์œผ๋กœ ๋ฆฌํŒฉํ† ๋ง์„ ํ•ด๋„ ๊ดœ์ฐฎ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค, ๋‹จ์ถ•ํ‚ค ํ•จ์ˆ˜๋ฅผ ์ถ”๊ฐ€ํ•  ๋•Œ๋งˆ๋‹ค ๋‹จ์ถ•ํ‚ค ๊ธฐ๋ณธ๊ฐ’ ๋ง‰๊ธฐ ์ž๋™ํ™” ์ด๋Ÿฐ ์‹์œผ๋กœ ํ•˜๋‚˜ํ•˜๋‚˜ ๊ธฐ๋ณธ ๊ธฐ๋Šฅ์„ ๋ง‰์•„์ฃผ๋Š” ์ค‘.. ์‚ฌ์šฉํ•˜๋Š” ํ‚ค๋ณด๋“œ ์ปค๋งจ๋“œ๋“ค์ด ์ด๋ฏธ ์›น์ด๋‚˜ ๋งฅ์—์„œ ์„ค์ •๋˜์–ด ์žˆ๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์•˜์Šต๋‹ˆ๋‹ค. ๊ทธ ๊ฒƒ์„ ํ•˜๋‚˜ํ•˜๋‚˜ ์ง€์›Œ์ฃผ๋Š” ์ผ์„ ํ–ˆ์—ˆ๋Š”๋ฐ์š”, ๊ทธ๋Ÿฌ๋‹ค๋ณด๋‹ˆ ๋„ˆ๋ฌด ๋…ธ๊ฐ€๋‹ค์„ฑ์ด ๊ฐ•ํ–ˆ์Šต๋‹ˆ๋‹ค.. ํ•จ์ˆ˜๋ฅผ ์ถ”๊ฐ€ํ•  ๋•Œ๋งˆ๋‹ค ์ž๋™์œผ๋กœ ๊ธฐ๋ณธ ๊ฐ’์ด ๋ง‰ํžˆ๋Š” ๋กœ์ง์„ ์งฐ๋‹ค๋ฉด ๋”์šฑ ์ข‹์•˜์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ง€๊ธˆ์€.. ํ•˜๋‚˜ํ•˜๋‚˜ ๋ˆŒ๋Ÿฌ๊ฐ€๋ฉด์„œ ์ด๋ฏธ ์„ค์ •๋˜์–ด ์žˆ๋Š” ๊ฒƒ๋“ค์„ ์ง€์›Œ์ฃผ๋Š” ์ž‘์—…์„..ํ–ˆ๋‹ต๋‹ˆ๋‹ค.
์ฃผ์„ฑ์ง„
๐Ÿ‘
2