
section + section {margin-top: 10rem;} em {color: #aaa;} ์๊ณ ๋ฆฌ์ฆ ์ฝ๋์นดํ ์ค ํน์ ๋ฌธ์์ด์ ๊ฐ์ด๋ฐ ๊ธ์๋ฅผ ๋ฐํํ๋ ํจ์๋ฅผ ๋ง๋๋ ๋ฌธ์ ๋ฅผ ํ์๋ค. ํน์ ๋ฌธ์์ด์ ์์น์ ๊ดํด์๋ ๋๊ดํธ([]) ํ๊ธฐ๋ฒ๋ง ์ฌ์ฉํด์๊ธฐ์

์ค๋์ ์๊ณ ๋ฆฌ์ฆ ์ฝ๋์นดํ๋ ํน์ ํจํด์ ์ ์งํ์ฌ ๋ฌธ์์ด์ ๋ฆฌํดํ๋ ํจ์๋ฅผ ๋ง๋๋ ๋ฌธ์ ์๋ค.์ด์ ์ ํ๊ณ ๋ฅผ ์๊ฐํ๋ฉฐ ์ผํญ์ฐ์ฐ์๋ฅผ ํ์ฉํด ๋ฌธ์ ๋ฅผ ํ์๋๋ฐ .... ๐ง์ด๋ฒ ๋ฌธ์ ์์๋ ์ผํญ์ฐ์ฐ์๋ณด๋ค๋ repeat() ๋ฉ์๋๋ฅผ ํ์ฉํ๋ ๊ฒ์ด ์ฑ๋ฅ๊ณผ ๊ฐ๋ ์ฑ ์ธก๋ฉด์์ ์ข๋ค๊ณ ํ๋ค.

์ค๋์ ์๊ณ ๋ฆฌ์ฆ ์ฝ๋์นดํ๋ '๋ด์ '์ ๊ดํ ๋ด์ฉ! ๋ฐ๋ณต๋ฌธ + ๋ณตํฉํ ๋น์ฐ์ฐ์๋ฅผ ํ์ฉํ๋ฉด ๊ทธ๋ฆฌ ์ด๋ ต์ง ์๊ฒ ๋ค๋ ์๊ฐ์ผ๋ก ํ๋ฑ ํ์๋๋ฐ์ธ์์ ..! ๋ค๋ฅธ ์ฌ๋์ ํ์ด๋ฅผ ์ฐพ์๋ณด๋ค ๋์ ๊ฐ์ ๊ณ์ฐํด์ฃผ๋ ๋ฉ์๋๊ฐ ์๋ค๋ ๊ฑธ ์๊ฒ ๋๋ค.๋ฌผ๋ก ๊ทธ๋ ๋ค๊ณ ๋ด ํ์ด๊ฐ ํ๋ ธ๋ค๋ ๊ฒ์ ์๋์ง๋ง

img {margin: 0;} > ์ด๋ฒ ์๊ณ ๋ฆฌ์ฆ ์ฝ๋์นดํ๋ ์ผ๋จ ๋ฌธ์ ๋ถํฐ ์ดํด๊ฐ ์ ๊ฐ์ ๋ฌธ์ ๋ง 5๋ถ ๋๊ฒ ์ฝ์ ๊ฒ ๊ฐ๋ค ๐ฅ ๊ฐ์ ํ ์ดํดํ๊ณ ๋ฐ๊ธฐ์ ๋ฐ๊ธฐ์ ํ ์ค์ฉ ์จ๊ฐ๋ค.. ์ผ๋จ๊ฒฐ์ ์์ฑ..! ์ ํ๋๋ฐ??????? vscode์์ ์์ ํ์ ๋

์ค๋์ ํ์๋ถ์ ๋์์ผ๋ก ํด๊ฒฐํ ์ด์ผ๊ธฐ!๊ทผ๋ฐ ์๊ณ ๋ฆฌ์ฆ ์ฝ๋์นดํ ํ ๋ฌธ์ ํธ๋๋ฐ ์ด๋ ๊ฒ ์ค๋ ๊ฑธ๋ ค๋ ๋๋ ์ถ์๐ ๋ฌธ์์ด s์ ๋ํ๋๋ ๋ฌธ์๋ฅผ ํฐ๊ฒ๋ถํฐ ์์ ์์ผ๋ก ์ ๋ ฌํด ์๋ก์ด ๋ฌธ์์ด์ ๋ฆฌํดํ๋ ํจ์, solution์ ์์ฑํด์ฃผ์ธ์.s๋ ์๋ฌธ ๋์๋ฌธ์๋ก๋ง ๊ตฌ์ฑ๋์ด ์์ผ๋ฉฐ

์ค๋์ ์๊ณ ๋ฆฌ์ฆ ์ฝ๋์นดํ ๋ฌธ์ ๋ ์๋ฆฟ์ ๋ํ๊ธฐ ์๋ค.๊ฐ๋ฐ์๋ ์ ๋ต์ด ์๊ตฌ๋๋ฅผ ๋ ๊นจ๋ฌ์ผ๋ฉฐ ์ค๋์ TIL ์์!์์ฐ์ N์ด ์ฃผ์ด์ง๋ฉด, N์ ๊ฐ ์๋ฆฟ์์ ํฉ์ ๊ตฌํด์ return ํ๋ solution ํจ์๋ฅผ ๋ง๋ค์ด ์ฃผ์ธ์.์๋ฅผ๋ค์ด N = 123์ด๋ฉด 1 + 2 + 3 = 6

ํ์คํ ๋ฆฌ๊ฐ ์ฐธ ๋ง์ ์ค๋์ TIL. ์ฝ๋์นดํ ๋ฌธ์ ๋ฅผ ํ๋ฉด์ ๋ค๋ฅธ ์ฌ๋์ ํ์ด๋ฅผ ํ์ธํ๊ณ ๊ทธ ํ์ด์์ ์๊ฒ ๋ ๋ฐฉ๋ฒ์ ๋ํด ํํฐ๋๊ป ์์ธํ ์ง๋ฌธ์ ๋๋ ธ๋ค. ์ด๋ฐ์ ๋ฐ ๋ง์์ ๋ง์ด ํด์ฃผ์๋ฉฐ ์ด๋ ๊ฒ ํ ๋ณํ์ ๋ํด ์๊ฒ ๋์ผ๋ Number()์ parseInt() ์ ๋ํ ์ฐจ

์ค๋ ๋ค์ ์๋ฐ์คํฌ๋ฆฝํธ 3์ฃผ์ฐจ ๊ฐ์์์๋ '์์ ๋ณต์ฌ(Shallow Copy)'์ '๊น์ ๋ณต์ฌ(Deep Copy)'๋ฅผ ๋ฐฐ์ ๋ค. ์ฌ์ค ๋์๊ฒ '์์/๊น์ ๋ณต์ฌ'๋ ์ ๊ตฌํ ์ ์ค์ด ์๋๋ฐ ..์ ํ์ฌ์์ ์ ์ ํผ๋ธ๋ฆฌ์ ๋ก ๊ทผ๋ฌดํ๋ ์๊ธฐ์ ์ฌ์๋ถ๊ป์ ๋ณต์ฌ ๋ ๋ณธ ์ ์๋๋ ๋ฌผ์์

์ ์ ํผ๋ธ๋ฆฌ์ ๋ก ๊ทผ๋ฌดํ ์ง ๋ ๋ฌ ์ฏค ๋์ ๋๊ฐ..? ์ ์๋๊ป์ false๋ก ๋ฐํ๋๋ ๊ฐ๋ค์ด ๋ญ๊ฐ ์๋์ง ์๊ณ ์๋๋๋ฉฐ ์์ด๋ณด๋ผ๊ณ ํ์ จ๋๋ฐ .. ๐ฉ "undefined.. .. null .. false.... ๋ญ๋๋ผ" ํ๋ค๊ฐ ๊ณต๋ถํ๋ผ๊ณ ํ์๋ฉฐ ์จ์ต ์๊ณ ๊ฐ์ จ์๋ค.์

๋ค ์ ๋ชฉ์ ์ ์ด์ผ๊น๋๋ค.๊ฐ๋ฐ์ ๊ดด๋ด์๋ '๋ฐ๋ณต๋ฌธ'๊ณผ '์กฐ๊ฑด๋ฌธ'๋ง ์๊ณ ์์ผ๋ฉด ํ๋ก๊ทธ๋๋ฐ์ ํ ์ ์๋ค ๐ป ๋ ๋ง์ด ์์ง๋ง๊ทธ๋๋ ๋ ๋์ ์ฝ๋๋ฅผ ์ํด ๊ณต๋ถ๋ฅผ ํ๋ ๊ฒ์ด ์ข์ง ์๋ํ๊ฐ\~~ ๋ฐฐ์ด์ ๊ฐ ์์์ ๋์ผํ ๋ก์ง์ ์ ์ฉํด์ผ ํ ๋ ๋น์ฐํ ๋ฐ๋ณต๋ฌธ์ด ๋จผ์ ๋ ์ค๋ฅด์ง๋ง

์ค๋์ ์ฝ๋ ์นดํ ๋ฌธ์ ๋ '3์ง๋ฒ'์ ๊ดํ ๋ด์ฉ์ด์๋ค.์๋ฐ์คํฌ๋ฆฝํธ๋ก n์ง๋ฒ์ ์ด๋ป๊ฒ ํ์ด๋ด์ง..? ๋ฐ๋ณต๋ฌธ.....? ๐ ํ๊ณ ๊ฐํฐ๊ณ ๋ฏผ์ ํ๊ณ ์๋๋ฐ๐ฅ 10์ง์๋ฅผ n์ง๋ฒ์ผ๋ก, ๋ n์ง๋ฒ์ผ๋ก ํํ๋ ๋ฌธ์์ด์ 10์ง๋ฒ์ผ๋ก ๋ฐ๊ฟ์ฃผ๋ ๋ฉ์๋๋ค์ด ์๋ค๋ ๊ฑธ ์๊ฒ ๋๋ค..! n

์ค๋์ ์์ ์๋ ์ง๊ธ๋ ์์ผ๋ก๋ ๋์ ์์ ๊ฐ ๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋น๋๊ธฐ ์ฒ๋ฆฌ์ ๊ดํด ๊ณต๋ถํ๋ค. ๋์ ๋ง๋ก ํ๋์ฉ ๋ฏ์ด๋จน์ด์ ์ดํดํด๋ณด๊ธฐ ์์!: ์ฐ๋ฆฌ๊ฐ ์ผ์์์ ์ฌ๋ฌ ๊ฐ์ง ์ผ์ ๋์์ ์ฒ๋ฆฌํ๋ ์ํฉ์ ๊ฐ์ ํด๋ณด์. ์๋ฅผ ๋ค์ด ์ถ๊ทผ ์ ์ค๋ ํ๋ฃจ๋ฅผ ๊ฒฌ๋๊ธฐ ์ํ ์ปคํผโ๋ฅผ ์ฌ๋ฌ

์ง๋ ๋ฒ, ๋น๋๊ธฐ์ Promise์ ๋ํด ์๊ธฐํ๋ ๋ด์ฉ์ ์ฌ๊ธฐ.์ค๋์ ๋ ๋์๊ฐ async์ await์ ๋ํด ์์๋ณด๋ ค ํ๋ค!: ์ง๋ ๋ฒ ๊ธ์์ then() ์ ์นดํ์์ ์๋ฃ๋ฅผ ์ฃผ๋ฌธํ๊ณ ๋ฐ๋ ์ง๋๋ฒจ์ ๋น์ ํ๋ค. ์ด๋ฒ์ ๋น์ ์ด ์น๊ตฌ๋ค๊ณผ ์นดํ์ ๊ฐ๋ค๊ณ ๊ฐ์ ํด๋ณด์. ๋์ค์

๋๊ตฌ๋ ํ๋ก์ ํธ๋ฅผ ํ๋ค ๋ณด๋ฉด, ์ฒ์์๋ ์์ ๊ธฐ๋ฅ๋ง์ ๊ตฌํํ๋ ์ฝ๋๊ฐ ์ ์ ๊ธฐ๋ฅ์ ๋ง๋ถ์ด๋ฉฐ ๋ชธ์ง์ด ์ปค์ ธ์ ํ ํ์ผ ์์ ์๋ฐฑ ์ค์ด ๋์ด๊ฐ๋ ๊ฒฝํ์ด ์์ ๊ฑฐ๋ค.์ฒ์์๋ (๋๋ฆ) ๊น๋ํ๋ ์ฝ๋๋ ์๊ฐ์ด ์ง๋๋ฉด์ ๋ค๋ฅธ ์ฌ๋๋ค๊ณผ ํ์ ์ ํ๋ค๊ฑฐ๋ ๊ธฐ๋ฅ์ ์ถ๊ฐํ ๋๋ง๋ค ์ ์ ๋

์ฝ๋๋ฅผ ์์ฑํ๊ณ ํผ๋๋ฐฑ์ ๋ฐ๋ค ๋ณด๋ฉด ๋ฃ๋ ๋ง๋ค์ด ์์ ๊ฑฐ๋ค. "์ด ํจ์๋ ๊ธฐ๋ฅ์ด ๋ช ํํ์ง ์๋ค", "ํ๋์ ํจ์์ ๋ ๊ฐ์ง ์ด์์ ๊ธฐ๋ฅ์ด ์๋ค", "์ฌ์ฌ์ฉ์ฑ์ด ์์ด ๋ณด์ธ๋ค", "์ค๋ณต๋ ๋ด์ฉ์ด ๋ง์์ ํจ์๋ก ๋ง๋ค ์ ์๊ฒ ๋ค" ๋ฑ๋ฑ ๊ฐ๋ฐ ์ ๋ฌธ์๋ผ๋ฉด ์๋ ์์ด ๋ค์ด ๋ณธ ํผ

๊ฐ๋ฐ ๊ณต๋ถ๋ฅผ ์ฒ์ ํ๋ ์ฌ๋์ด๋ผ๋ฉด ํ ๋ฒ์ฏค ์ด๋ฐ ๊ฒฝํ์ด ์์ ๊ฑฐ๋ค. ์ฝ๋๋ฅผ ์์ฑํ๋๋ฐ, ์๋ฌ๊ฐ ๋ฐ์ํ๋ฉด ์ด๋์๋ถํฐ ์๋ชป๋๋์ง ๋๋์ฒด๊ฐ ๊ฐ์ ์ก์ ์ ์๋ ๊ฒ. ๋ฌผ๋ก ์ ๊ณต์๋ค์ ์ด๋ป๊ฒ ๋ฐฐ์ฐ๋์ง ์ ๋ชจ๋ฅด๊ฒ ์ง๋ง ์ ์ด๋ ๋น์ ๊ณต์๋ฅผ ๋์์ผ๋ก ํ ํ์์ด๋ ๋ถํธ ์บ ํ, ํน๊ฐ ๋ฅ์์

ํ๋ก๊ทธ๋๋จธ์ค์ "๊ณผ์ผ ์ฅ์" ๋ฌธ์ ๋ฅผ ํ๋ค๊ฐ ๋ช๋ช ํ ์คํธ ์ผ์ด์ค์์ ์๊ฐ ์ด๊ณผ๊ฐ ๋ฐ์ํ๋ค. ๊ทธ์น๋ง ๋ก์ง ์์ฒด๋ ํ๋ฆฌ์ง ์์๋ค๋ ํ์ ์ด ์์๊ณ ๐ ์๊ฐ ์ด๊ณผ์ ๋ํ ์์ธ์ ๋ถ์ํ๋ ์ค splice(0, m) ์ด ์์ธ์์ ์๊ฒ ๋๋ค.์ด๋ฒ ๊ธ์์๋ ๋ฌธ์ ํ์ด ๊ณผ์ ๊ณผ ์๊ฐ ์ด

๐ฆ ๋ฐฐ์ด์ ์์. ๊ทธ ๋ค์ ๋ ์์. ๊ทธ ๋ค์ ๋.. : React๋ JavaScript๋ก ๋ฐ์ดํฐ๋ฅผ ๋ค๋ฃฐ ๋ map()๊ณผ filter()๋ฅผ ํจ๊ป ์ฌ์ฉํ๋ฉด ์ข ์ข ์์์น ๋ชปํ ์ค์ฒฉ ๋ฐฐ์ด์ด ๋ง๋ค์ด์ง๋ ๊ฒฝ์ฐ๊ฐ ์๋ค. ํ์์ ๊ฒฝ์ฐ๋ ํน์ ID ๋ฆฌ์คํธ(rotationData)

ํด๋ก์ ๋ JavaScript์์ ๊ฐ์ฅ ๊ฐ๋ ฅํ๋ฉด์๋ ๋๋ก๋ ์ดํดํ๊ธฐ ์ด๋ ค์ด ๊ฐ๋ ์ค ํ๋๋ค. ๊ฐ๋จํ ๋งํ๋ฉด, ํด๋ก์ ๋ 'ํจ์๊ฐ ์์ ์ด ์์ฑ๋ ํ๊ฒฝ(์ค์ฝํ)์ ๊ธฐ์ตํ๋ ํ์'์ ๋งํ๋ค. ํด๋ก์ ๋ฅผ ์ผ์์ ๋น๋์ด๋ณด๋ฉด ์๊ธฐ ์์ ๊ณผ๋ ๊ฐ๋ค. ์ฐ๋ฆฌ ์ง์ ์์ํด๋ณด์. ์ฐ๋ฆฌ ์ง(์ธ

์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋ง ๋ฐฐ์ด ์ ๋ฌธ์๋ผ๋ฉด ํ ๋ฒ์ฏค์ ์ด๋ฐ ๊ฒฝํ์ด ์์ ๊ฒ์ด๋ค.setTimeout์ ์ผ๋๋ฐ ๋ด๊ฐ ์๊ฐํ ์์๋๋ก ์คํ๋์ง ์๊ฑฐ๋, Promise๊ฐ ์์๊ณผ ๋ค๋ฅด๊ฒ ๋์ํด์ ํผ๋์ค๋ฌ์ ๋ ์๊ฐ. ์ด๋ด ๋๋ง๋ค ๋๋ ์๊ฐ์ ํ๋๋ค."์ ์๋ฐ์คํฌ๋ฆฝํธ๋ ๋ด๊ฐ ์ด ์ฝ๋ ์์๋

์นํ์ด์ง์์ ์คํ์ผ์ ๋ฐ๊ฟจ์ ๋, ์ด๋ค ๊ฑด ๋ถ๋๋ฝ๊ฒ ๋ฐ๋๊ณ ์ด๋ค ๊ฑด ํ๋ฉด์ด ํ๊ธฐ๋ฏ ๋ฐ๋๋ ๊ฒฝํ์ด ์๋ค๋ฉด ๊ทธ ๋ฐฐ๊ฒฝ์๋ ๋ธ๋ผ์ฐ์ ์ ๋ ๋๋ง ๊ณผ์ ์ค ํ๋์ธ Repaint์ Reflow๊ฐ ์๋ค.์ด๋ฒ ๊ธ์์๋ ์ด ๋ ๊ฐ๋ ์ด ๋ฌด์์ธ์ง, ์ด๋ป๊ฒ ๋ค๋ฅด๊ณ ์ด๋ค ์ฑ๋ฅ ์ด์๋ฅผ ์ ๋ฐํ ์
์ต๊ทผ Three.js๋ฅผ ๊ณต๋ถํ๋ฉด์ ๊ฐ์ ์ฝ๋๋ฅผ ๋ฐ๋ผ ์น๋ค ๋ณด๋ class ๋ฌธ๋ฒ์ด ๊ณ์ ๋ฑ์ฅํ๋ค. ๋๋ ์ฃผ๋ก ํจ์ํ์ผ๋ก ์ฝ๋๋ฅผ ์์ฑํด์๊ธฐ ๋๋ฌธ์ ํด๋์ค ๋ฌธ๋ฒ์ด ๋ฏ์ค๊ณ ์ด์ํ๋ค. "์ด๊ฑฐ ๊ผญ ํด๋์ค๋ก ์จ์ผ ํ๋?" ์ถ๊ธฐ๋ ํ์ง๋ง, Three.js ์ปค๋ฎค๋ํฐ์์ ํด๋์ค๋ฅผ ๋ง์ด