์ด์ ์ ๊ตฌํํ๋ SNS ํ๋ซํผ ๊ธฐ๋ฐ ์ต๋ช /๊ธฐ๋ช ๋กค๋งํ์ดํผ ํ์์ "๋๋ฐ ์ฌ๊ฑด"์ ๋ฆฌํฉํ ๋ง ํ๋ฉด์ ์ํคํ ์ฒ์ ๋ํ ์์ฌ์์ ๊ฐ์ ํ๋ ๊ฒฝํ์ ์์ฑํ๋ค. ์ฐ์ ๋ด๊ฐ ๋งก์๋ ๊ธฐ๋ฅ์ค ํธ์ง ์์ฑ, ์ด์ ํธ์ง ์์ , ๋๊ธ, ๋ฑ ๋ค์ํ ๋ถ๋ถ์์ Textarea๊ฐ ํ์ฉ๋๊ณ ์๋ค. ๋น
๋ฒ์จ 2์ฐจ ํ์๋ค๊ณผ ํจ๊ป ํ ํ๋ก์ ํธ๋ฅผ ์์ํ๊ณ 1๋ฌ์ด ์ง๋์ ๋ง๋ฌด๋ฆฌ ๋์๋ค. ๋ง์ ์์ํ ๋๋ ํ๋ฌ์ด๋ผ๋ ๊ธฐ๊ฐ์ด ๊ธธ๊ฑฐ๋ผ๊ณ ์๊ฐํ๋๋ฐ ๋ง์ ์์ํ๋ ์์ฒญ ์งง๊ฒ ๋๊ปด์ก๋ค. > > ์ฃผ์ด์ง ์๊ตฌ์ฌํญ์ ๋ฐํ์ผ๋ก ๊ธฐํ, ์ค๊ณ, ๋์์ธ, ๊ตฌํ, ๋ฐฐํฌ๊น์ง ์ฒ์์๋ ์ฌ์ ์์ด ๋ณด์๋
๋ฒ์จ ๋ฐ๋ธ์ฝ์ค๋ฅผ ์์ํ์ง ๋ฌด๋ ค 3๊ฐ์(๋ฐ์ )์ด ์ง๋ฌ๋ค.ํนํ ์ด๋ฒ ํ๋ฌ์ ์ง๊ธ๊น์ง 3๋ฌ ์ค ๊ฐ์ฅ ๋นจ๋ฆฌ ์ง๋๊ฐ ํ ๋ฌ์ด์๋ค. ํ์ด ๋ฐ๋์ด ์๋กญ๊ฒ ๋ง๋๋ ํ์๋ค๊ณผ ์๋กญ๊ฒ ์์ํ๋ ๋ฌ์ด๊ธฐ๋ ํ๊ณ , ์์ฃผ ๋ง์ ๊ฐ์๋ + ํ์ต ํด์ผ ํ ๋ด์ฉ๋ค์ด ๋ง์๋ ๊ฒ ๊ฐ๋ค.์ ๋ ๋นจ๋ฆฌ ์ง๋๊ฐ๋
JavaScript์์ ์ฐ๋ฆฌ๋ ์๋์ ๋ฉ์๋๋ฅผ ํตํด ์๋ณธ ๋ฐฐ์ด์ ์ง์ ๋ณ๊ฒฝํ ์ ์๋ค.push()pop()shift()unshift()splice()sort()reverse()์ ๋ฉ์๋์ ๋นํด ์๋ณธ ๋ฐฐ์ด์ ๋ณ๊ฒฝํ์ง ์์ง๋ง ์๋ก์ด ๋ฐฐ์ด์ ๋ณ๊ฒฝํ ๋ฐํํ๋ ๋ฉ์๋๋ค์ด ์๋ค.
1\. ๋ ธ์ ํด๋ก๋2\. ์ ํ๋ธ ํด๋ก๋(HTML+CSS(SCSS))ํผ์ง๋งํ ์ฃผ์ ๋ก ์ ๋ ๊ฐ์ง ์ ๋์ ํ์ต์ ํ ๊ฒ ๊ฐ๋ค.์ฒ์ ์ฌ์ฉํด ๋ณธ VanillaJS์ ์ด๋ฅผ ์ด์ฉํ ๋ ธ์ ํด๋ก๋ ํ๋ก์ ํธ. ํ๋ก์ ํธ ๋ชฉํ๋ VanillaJS๋ฅผ ์ฌ์ฉํ SPA ์ดํด์ ์ปดํฌ๋ํธ ์ถ์ํ,
๊ฐ์ฒด๋ ์ํ๋ฅผ ์๋ฏธํ๋ ํ๋กํผํฐ์ ๋์์ ์๋ฏธํ๋ ๋ฉ์๋๋ก ์ด๋ฃจ์ด์ ธ ์์ผ๋ฉฐ, ๋ฉ์๋๋ ๊ฐ์ฒด์ ์ํ๋ฅผ ์ฐธ์กฐ ๋ฐ ๋ณ๊ฒฝํ ์ ์์ด์ผํฉ๋๋ค.this๋ ์์ ์ด ์ํ ๊ฐ์ฒด ๋๋ ์์ ์ด ์์ฑํ ์ธ์คํด์ค๋ฅผ ๊ฐ๋ฆฌํค๋ ์๊ธฐ์ฐธ์กฐ ๋ณ์์ ๋๋ค. ์ฆ, ์์ ์ด ์ํ ๊ฐ์ฒด, ์์ฑํ ์ธ์คํด์ค์ ํ๋ก
contentEditable=ture์ธ ์๋ฆฌ๋จผํธ์์ ํ ์คํธ๋ฅผ ์ ๋ ฅํ๊ณ innerText๋ก ๋ชจ๋ Text๋ฅผ ๋ฝ์ util ํด๋์ applyMarkupํจ์(๋งํฌ์ ์ ์ ์ฉํ๋ ํจ์)์ ์ ๋ฌํ๊ณ , ์ ๊ทํํ์๊ณผ startsWith ๋ฉ์๋๋ฅผ ์ด์ฉํด ํ๊ทธ๋ฅผ ์ ํ ๋ฆฌํดํ๊ธฐ.๋ฆฌํด ๋ฐ์
์ปดํฌ๋ํธ๊ฐ ์์กด์ฑ ์ต๋ํ ์ ๊ฑฐ๋จ๋ฐฉํฅ ๋ฐ์ดํฐ ํ๋ฆ์ฝ๋์ ์ญํ ๋ถ๋ฆฌ๊ฐ๋ ์ฑ ๋์ ์ฝ๋๋ชจ๋ ์ค๊ณ๊ฐ ๋๋ ๋๊น์ง ํค๋ณด๋์ ์ ๋์ง ์๊ธฐ5๊ฐ์ง์ ๋ชฉํ๋ฅผ ๋๊ณ ํ๋ก์ ํธ๋ฅผ ์์ํ์๊ณ , ์ ํํ ์ง์ผ์ง๊ฑด 5๋ฒ ํ๋ ๋ฟ์ด๋ค..ใ ใ ใ ใ ใ ใ ์ฐ์ ์ค๊ณ๊ฐ ๋๋ ๋๊น์ง ํค๋ณด๋์ ์์ ์์ ๋์ง ์์
์ฝ๋ฉํ ์คํธ, ๋ฉด์ ์ ๊ฑฐ์น๊ณ ์ต์ข ํฉ๊ฒฉ, 9์๋ถํฐ ์ค์๋ถํฐ ์์๋ ํ๋ก ํธ์๋ ๋ฐ๋ธ์ฝ์ค ๊ณผ์ . ๊ทธ ๊ณผ์ ์ด ์์๋ ์ดํ๋ก ํ๋ฌ์ด ์ง๋ฌ๋ค. > ์ด ๊ณผ์ ์์์ ๋๋ ๋ฌด์์ ์ป์์๊น? ๋, ๋๋ ๋ฌด์์ด ๋ถ์กฑํจ์ ์ธ์งํ์๊น? MIL์ ํตํด ์ง๋ ํ ๋ฌ์ ๋์๋ณด์. (๊ธด ๊ธ ์ฃผ์.
์๋ ์ฝ๋๋ฅผ ๋ณด์๋ถ๋ช res๋ฅผ await ํค์๋๋ฅผ ๋ถํ ํ๋ก๋ฏธ์ค ๊ฐ์ฒด๋ฅผ ๋ฐํ ๋ฐ์ ์๋๋ฐ ์ await์ ํ๋ฒ ๋ ์จ์ res.json()์ผ๋ก ํ์ฑํด์ ๋ณด๋ด์ฃผ๋ ๊ฑธ๊น ๋ผ๋ ๊ณ ๋ฏผ์ ํ๋ค.ํด๋น fetch ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์ฃผ๋ ์ฝ๋๋ ๋ค์๊ณผ ๊ฐ๋ค์ฝ๋ 1์์ await์ ๋ถํ์ง
fetch APIHistory APIXMLHTTPRequest ๊ฐ์ฒด์ ๋ง์ฐฌ๊ฐ์ง๋ก HTTP ์์ฒญ ์ ์ก ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ ํด๋ผ์ด์ธํธ ์ฌ์ด๋ Web APIํ๋ก๋ฏธ์ค๋ฅผ ์ง์ํ์ฌ ๋น๋๊ธฐ ์ฒ๋ฆฌ๋ฅผ ์ํ ์ฝ๋ฐฑ ํจํด์ ๋จ์ ์์ ์์ ๋ก์ด fetch.fetch ํจ์์๋ HTTP ์์ฒญ์ ์ ์กํ
๊ฐ์ฌ๋์ ์ฝ๋ฉํ ์คํธ ์ค๋น ๋ฐฉ๋ฒ์ ๊ดํ ๊ฐ์๋ฅผ ๋ณด๋ฉด์ ๋ค์ ํ๋ฒ ์ฝ๋ฉํ ์คํธ์ ๋ํ ์ค๋น ์์ธ๋ฅผ ๋ฐฐ์ ๋ค. ๊ฐ์ฌ๋์ ์กฐ์ธ์ ์ด๊ณณ์ ์จ๋๊ณ ์ฝ๋ฉํ ์คํธ ๋ฌธ์ ๋ฅผ ํ ๋๋ง๋ค ์ด ๋ธ๋ก๊ทธ๋ฅผ ๋ณด๋ฉฐ ๋ณต๊ธฐ ํ๋ฉด ์ข์ ๊ฒ ๊ฐ๋ค.1\. ํญ์ ์ฌ๋ฌ๊ฐ์ง ํ์ด ๋ฐฉ๋ฒ์ด ์์ ์ ์๋ค.2\. ํญ์ ์์ธ
๋ฐฑํธ๋ํนDPํธ๋ฆฌ ๊ตฌ์กฐ์์์ ์ ์,์ค์,ํ์ ์ํ(๊ณผ์ )ํธ๋ผ์ด ์๋ฃ ๊ตฌ์กฐ๋ฅผ ์ด์ฉํ ์๋ ์์ฑ ๊ธฐ๋ฅ ๊ตฌํ(๊ณผ์ )์ค๋๋ง์ ๋ฐฑํธ๋ํน ๋ฌธ์ ๋ฅผ ํ์ด๋ดค๋๋ฐ ๊ต์ฅํ ์ ๋ฅผ ๋จน์ ๋ฌธ์ (N-Queen)์๋ค. ๋ค๋ฅธ ๋ฐฑํธ๋ํน ๋ฌธ์ ๋ค์ ์กฐ๊ธ ํ์ด ๋ณด์๋๋ฐ, ๋ฐฑํธ๋ํน์ ๊ฐ์ฅ ๋ํ์ ์ธ N-Quee
1์ฃผ์ฐจ WIL๐ ์ง๋ 6,7 ์ผ์ฐจ ๊ฐ์์์๋ ํธ๋ฆฌ, ํ, ํธ๋ผ์ด, ์ ๋ ฌ, ์ด๋ถ ํ์, DFS, BFS, ๊ทธ๋ฆฌ๋ ๋ฑ ๋ค์ํ ์๋ฃ ๊ตฌ์กฐ์ ์๊ณ ๋ฆฌ์ฆ์ ๋ํด ๋ฐฐ์ ๋ค. ๋ํ, ๊ฐ์์์ ๋ฐฐ์ด ์๋ฃ ๊ตฌ์กฐ์ ์๊ณ ๋ฆฌ์ฆ์ ์ด์ฉํด ์ฝ๋ฉํ ์คํธ ๋ฌธ์ ๋ฅผ ํธ๋ ์๊ฐ์ ๊ฐ์ก์๋ค. ๋๋ถ๋ถ์ ๋ฌธ์
๋ฐ๋ธ์ฝ์ค 4์ผ์ฐจ JS๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ์ ํด์ ํ ์ด๋ธ, ๊ทธ๋ํ ๋ฑ ์ ๋ฐ์ ์ธ ์๋ฃ๊ตฌ์กฐ์ ์๊ณ ๋ฆฌ์ฆ์ ๋ํด ๋ฐฐ์ ๋ค. ๋๋ถ๋ถ ์์๋ ๋ด์ฉ์ด์์ผ๋ ํ๋ฅผ ์ง์ class๋ฅผ ์ด์ฉํด์ ๊ตฌํํด ๋ณธ ๊ฒ์ ์ฒ์์ด์๋ค. ์ถ๊ฐ๋ก ํ๋ฅผ ์ฐ๊ฒฐ๋ฆฌ์คํธ๋ฅผ ์ด์ฉํ์ฌ ๊ตฌํํ ์ ์๋ค๋ ๊ฒ๋ ์ฒ์ ์์๋ค. ์ค๋์ ๋ฐฐ์ด ์๋ฃ๊ตฌ์กฐ์ ์๊ณ ๋ฆฌ์ฆ์ ํ ๋๋ก ์ฝ๋ฉํ ์คํธ ๋ฌธ์ ๋ฅผ ํ์์ผ๋ฏ๋ก ๋ฌธ์ ์ ๋ํ ๋ฆฌ๋ทฐ๋ฅผ...
์ค๋ ๋ฐฐ์ด ๋ด์ฉ <span style="color:
์ด๋ฒคํธ ๋ฃจํ, ์ฟ ํค, ์ธ์ , ์น ์คํ ๋ฆฌ์ง, ๋ชจ๋, ์ ๊ทํํ์(์ด๊ฑด ์ธ์ฐ์ง ๋ง๊ณ ๊ทธ๋ฅ ์ด๋ ํ ๊ธฐ๋ฅ์ด ์๋์ง ์ดํดํ๊ณ ๋์ด๊ฐ ๋ค์ ํ์ํ ๋๋ง๋ค ๋ณด๊ณ ์ฌ์ฉํ๋ จ๋ค..) ์ด์ ๋ค ํ์ง ๋ชปํ 2์ผ์ฐจ ๊ฐ์ ๋ด์ฉ์ ์ถ๊ฐ๋ก ํ์ตํ ๋ด์ฉ์ด๋ค. ๊ฐ์ฌ๋๊ป์ ์ถ๊ฐ๋ก ์ฐพ์๋ณด๋ผ๊ณ ํ์ จ๋ ๋ด์ฉ๋
2์ผ์ฐจ ์ค๋์ ๋๋ถ๋ถ CS ์ง์์ ๋ํ ๋ด์ฉ์ด ์ฃผ๋ฅผ ์ด๋ฃจ์๋ค. ๋คํธ์ํฌ, ์ปดํจํฐ ์๊ฐ ์๋ฆฌ, ์ํธํ, ํจ์ํ ํ๋ก๊ทธ๋๋ฐ, ๊ฐ์ฒด์งํฅ/ํ๋กํ ํ์ , ์ด๋ฒคํธ ๋ฃจํ, ๋ชจ๋, ์ ๋์ฝ๋, ์ ๊ทํํ์, ์ฟ ํค์ ์ธ์ /์น์คํ ๋ฆฌ์ง ๋ฑ์ ๋ํ ๋ด์ฉ์ ๋ฐฐ์ ๋ค. ํ์ ํ๋ก์ ํธ๋ฅผ ๋ฆฌ์กํธ๋ฅผ ์ฌ
์ด์ ๋ OT ์๊ณ , ์ค๋์ด ์ฒซ ๊ฐ์ ์์์ด์๋ค.์ค๋ ๋ฐฐ์ด ๋ด์ฉ์ ๋ณ์, ์์, ์๋ฃํ, ๋ฉ๋ชจ๋ฆฌ, ํํ์, ์ฐ์ฐ์, ํ๋ฆ์ ์ด, ๋ฐฐ์ด/๊ฐ์ฒด, ์ค์ฝํ, ํด๋ก์ ๋๋ถ๋ถ ์๋ฒฝํ๋ ์๋์ง๋ง ์ด๋์ ๋ ์๋ ๋ด์ฉ์ด์๋ค.๊ทธ ์ค, ์ ๋ชฐ๋๋ ํด๋ก์ ์ ๋ํด ๋ถ์กฑํ ๋ด์ฉ์ ์ฝ์ด ์๋ฐ์คํฌ๋ฆฝํธ