์ค๋ ์ค์ตํ drag & drop
์ผ๋ก ๋ฐ๋๋ผ JS ํํธ์ ๋ง์ด ๋ด๋ ธ๋ค. ๋ฆฌ์กํธ, ๋ทฐ ๋ฟ๋ง ์๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ ์์ฒด๋ ๋ง์ด ๋ค๋ค๋ณด์ง ์์๋ ๋์๊ฒ ์ ๋ง ์ ๋ง ์ ๋ง ํฐ ๋์์ด ๋ ๊ฐ์์๋ค. ์น ๊ณต๋ถ ๋ฐฉ๋ฉด์์์ ์๋ฐ์คํฌ๋ฆฝํธ
๋ ๊ทธ์ DOM ๊ฐ์ฒด์ ์์๋ฅผ ๋์ด์ ๋์ ์ผ๋ก ์ค์ ํด์ฃผ๊ณ , ๊ฐ์ ๋ฐ๊พธ๊ณ ์ด๋ฒคํธ๋ฆฌ์ค๋๋ฅผ ๋ฌ์์ค๋ค? ์ ๋๋ก ๋ฐ์ ๋ชฐ๋๋ ๋๋ฅผ ์ปดํฌ๋ํธ์ ๋ฐฉ์
์ผ๋ก ํ๋์ ์น ์ ํ๋ฆฌ์ผ์ด์
์ ์ปดํฌ๋ํธ๋ก ์ชผ๊ฐ๊ณ ์ํ๋ฅผ ์ ์ํด ๊ฐ ์ปดํฌ๋ํธ์๊ฒ ํ์ํ ์ํ๋ค๋ง ๋๊ฒจ์ฃผ๊ณ , ์ํ ์ ์ด๋ฅผ ์์์์ ํ๋ ๋ฑ๋ฑ ๋ผ์ด๋ธ๋ฌ๋ฆฌ, ํ๋ ์์ํฌ ์์ด ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ณธ์ฐ์ ๊ธฐ๋ฅ์ ์๊ฒ ๋๊ฒ ๊ฐ๋ค. ๋ฆฌ์กํธ๋ฅผ ์์ฃผ ์กฐ-๊ธ ๊ณต๋ถํด๋ดค์๋๋ฐ, props์ ๊ฐ๋
์ด๋ jsx๋ฅผ ์ด์ฉํ ์ปดํฌ๋ํธ ์์ฑ์ ์๋ฆฌ๋ฅผ ์๊ฒ ๋์ด์ ๋งค์ฐ๋งค์ฐ ๋ป ๊น์ ์๊ฐ์ด์๋ค. ๋ํ ajax, fetch๋ฑ API์ ํต์ ๋ ๊ฑฐ์ ์ ๋ฌดํ๋ฌดํ ์์ค์ผ๋ก ๊ฒฝํ์ด ์์๋๋ฐ, http Method๋ฅผ ์ด์ฉํด API๋ฅผ ํธ์ถํ๊ณ ํค๋์ ๋ฐ๋๋ฅผ ๋ฃ๋ ์ ๋ง ํ๋ก ํธ์๋
๊ฐ์ ๊ฒฝํ์ ํ๊ฒ ๋์ด์ ์ข๋ค. ๐ ์์ง๋ ๊ฐ ๊ธธ์ ์-์ฃผ ๋ฉ์ง๋ง 4~6์ฃผ์ฐจ์์ ๋ฐฐ์ ๋ ๋ฐ๋๋ผ JS์ ๋ณธ์ง์ ์๊ณ ๊ฐ๋ค๋ฉด ํ๋ค๋ฆฌ์ง ์์ ๊ฒ ๊ฐ์ ์ ์ ์๋ ์์ ๊ฐ์ด ์๊ธด๋ค. ๊ฐ์ฌํฉ๋๋ค! roto! โญโญ
์ ๋ฒ ์ฃผ ์ด์ง์ฟต ๋ง๋ดค๋ CSS๊ฐ ์์๋์๋ค! ๋ ์ด์์์ ๋ํ ์ ๋ฐ์ ์ธ ์์ฑ์ ๋ฐฐ์ ๋ ์ ๋ฒ ์๊ฐ๊ณผ ๋ค๋ฅด๊ฒ ์ค๋์ CSS๊ฐ ๊ฐ์ง๊ณ ์๋ ๋ถ๊ฐ์ ์ธ ๊ธฐ๋ฅ? ์ฌ์ค ์ ์ ํด๋ณด์ง ์์๊ธฐ ๋๋ฌธ์, ๋ถ๊ฐ์ ์ธ์ง ํ์์ ์ธ์ง ์ ์๊ฐ ์๋ค... CSS๋ ๋ ๋์ด์ผํ๋ ์ฐ์ด๊ณ ๋๋ ต๊ธฐ ์ง์ด ์์ง๋ง ๋ฌ๋ฌ๋ฌ ์ธ์ฐ๊ธฐ๋ณด๋ค๋ ์ดํดํ๊ณ ํค์๋๋ฅผ ๊ธฐ์ตํด ํ์ํ ์๊ฐ์ ๊บผ๋ด๋ณผ ์ ์์์ผ๋ฉด ์ข๊ฒ ๋ค.
ํ๋กฑ์ด๋ค๋ง์ ๋-์ถ์ ๊ฐ ์งํ๋์๋ค! ์ถ์ ๋ง์ด ์จ๋ผ์ธ์ผ๋ก ํ๋ ๊ฒ์ ๋ํ! ํ๋ณ๋ก ์งํ๋์๊ณ , ์จ๋ผ์ธ์ผ๋ก ์ด๊ฒ ๋ ๊น? ์งํ๋ ์ด๋ ค์ธ ๊ฒ ๊ฐ๊ณ ์ด์ ์ ์ธ ์ฐธ์ฌ์ ์์์ด ๊ฐ๋ฅํ๋ ค๋? ํ๋๋ฐ ๋ฐ๋ธ์ฝ์ค ํ๋กฑ์ด๋ค์ ํ 500% ๊ฐ๋ฅ^^. ์ ๋ง ์ฌ๋ฐ๋ ํ์ฌ๋ก ๋ง์ด ๋ด๋ ธ๋ค! (ํ๋กฑ์ด.. ๋๋ฆฝ์ฒ์ฌ๋ค๋ง ๋ชจ์๋จ์ด..) ๊ทธ๋ฆฌ๊ณ ๋ณต์๋ณต์ ์ถ์ ๊ฐ ๋๋๊ณ ๋ฟ๋ ค์ง ๋ง๋๋ง์ SCSS ๊ฐ์ + ๊ณผ์ + Vue ๊ฐ์! ์! ์๋ง๋ค ์๋ง! ํ์ง๋ง ๋ ๋น์ฐํ ์ด์ฌํ ํ ๊ฒ๋๋ค.. ใ ใ ใ ใ ใ ์์ง๊น์ง ๋ฐฑ์ ์ ํ์ ์ฆ์ผ๋ก ๋ง์ ๊ณต๋ถ๋์ ์ํํ์ง ๋ชปํ๊ณ ์๋ค ๐ ์ผ๋ฅธ ํ๋ณตํด์ ๋ ๋นก๊ณต ๋ชจ๋๋ก ์ด์ฌํ ๋ฌ๋ฆฌ๊ณ ์ถ๋ค..
์ด์ฐ๋์ง ๋ฐฑ์ ํ์ ์ฆ์ด ๋ฉฐ์น ์งธ ๊ฐ์์ง ์๊ณ ์๋คใ
๋งค์ฐ๋งค์ฐ ํผ๊ณคํ ๋งํผ ๊ณต๋ถ ํจ์จ์ด ์์ข์์ ์ก๋ฌด๋ฃฉ์ค.. ๐ฆ ๋ค์์ฃผ ์ถ์์ด๋๊น ์ถฉ๋ถํ ํด์๊ณผ ๋ฐ๋ฆฐ ๊ณต๋ถ๋ก ๋ค์๊ธ ๋นก๊ณตํ ์ ์๊ธธ ๐ ๋ฐ๋๋ผ JS๋ฅผ ๋์ด CSS.. CSS๋ฅผ ๋์ด SCSS๋ก ๋์ด์๋ค! CSS ์ฐ๋ฉด์ ๋ถํธํ๊ณ , ๋ณต์ก์๋ฌ์ ๋ ๋ถ๋ถ๋ค์ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ ์ธ ๋๋์ผ๋ก๋ค๊ฐ? ํด๊ฒฐํ ์ ์์ด ์ ๋ฐํ๊ณ ๋ ์ด๊ฒ ๋๋ ๋ ๋ณต์กํด์ง๋ฉด ์์ด๊ณ ๋์ผ~ ํ ๊ธฐ๋ถ์ด๋ผ ์ตธํผ์ ๋๋ ต๋ค. ํ์ง๋ง ์ฑ์ฉ๊ณต๊ณ ์ ๊ผญ๊ผญ ์์๋ ์ฐ๋์ฌํญ SCSS Sass
๋ฅผ ์๊ฐํ๋ฉด ๊ณต๋ถํด๋ณด๋ฉด ์ข์ ๊ฒ ๊ฐ๋ค. (๋ง์๋ง์ ๋ด ๋์์ธ์ ๊ฐ๊ฐ์ ์กด์ฌํ์ง ์์ผ๋, ์ฝ๋๋ผ๋ ๊น์ํ๊ฒ ์ง๊ณ ์ถ๋ค ๐คช)
์๋ ์ฃผ๋ง ์ ๊ธ์์ผ์ ๊ฐ์ฅ ์ข์ํ๊ณ , ์ฐํด ์ง์ ํ์ผ์ ๋งค์ฐ๋งค์ฐ ์ข์ํ๋ค. ์ฌํ๋ ๊ฐ๊ธฐ ์ ๊ณตํญ์ด๋ ๊ณตํญ๊ฐ๋ ๊ธธ์ ์ ๋ง ์ข์ํ๋ค. ๊ทธ๋์ ๊ทธ๋ฐ์ง ์ง๊ธ๋ ๋งค์ฐ ์ ๋์๋ ์ํ ใ ใ ใ ! ์ด๋ฒ ์ถ์ ์ฐํด์ ๋ฐ๋ธ์ฝ์ค๋ ๊ฝค ๊ธธ๊ฒ ์ฌ๊ณ (๋ฌผ๋ก ๊ณต๋ถ๋ ํด์ผ๊ฒ ์ ธ..) ๋ฑํ ์ค์ผ์ฅด๋ ๋ง์ง ์์์ ํ๊ณ ์ถ์๋ ์ผ๋ค์ ํ ์ ์์ ๊ฒ ๊ฐ๋ค.
1) ์ต์ ์๋ฉด ์๊ฐ ์ธก์ ์น ๋ง๋ค์ด๋ณด๊ธฐ (ํฝ์
๋ก ์ฐ๊ณ ์ ๋๋ฉ์ด์
๋ง๋ค์ด๋ณด๊ธฐ) โญโญโญ
2) CSS ๊ณผ์ (SCSS๋ก ๊น์ํ๊ฒ ๊พธ๋ฉฐ๋ณด๊ณ ์ถ๋ค.) โญ
3) ๋ฐ๋ฆฐ ํ๊ต ๊ณต๋ถํ๊ธฐ โญโญ
4) ๊นํ๋ธ ์ ๋ฆฌ + ๊พธ๋ฏธ๊ธฐ โญ
์จ๋ณด์๋ฉด ์ด์ ๋? ์ด๊ฒ์กฐ์ฐจ ๊ณํ์ ์ผ๋ก ์จ๋๋ ๊ฑฐ ๋ณด๋ฉด ๋๋ entj๊ฐ ๋ง๋๋ณด๋ค... (po๊ณํwer)
7์ฃผ์ฐจ ๊ณผ์ ๊ฐ ๋์๋ค! ๋ฐ๋ก ๋ฐ๋ก ๋ฐ๋ก CSS๋ก ๋ค์ด๋ฒ ๋๋ ์ ํ๋ธ ํ์ด์ง๋ฅผ ํด๋ก ์ฝ๋ฉํ๋ ๊ฒ! ์ฌ์ค CSS ์ค๋ ฅ์ด ๋๋ฌด ์์ด์ ํด์ผ์ง ํด์ผ์ง~ ํ๋๊ฑธ ์ด๋ ๊ฒ ๊ณผ์ ๋ก ์ฃผ์๋ฉด ๋ฐ๊ฐ์ ์ ์ผ๋ก? ํ ์ ๋ฐ์ ์๋ค ๋์ CSS๊ฐ ์๋ SCSS๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ๊ท์น์ด๋ค. ๋ณด๋์ค ์๊ตฌ์ฌํญ๋ ์์ง๋ง ์ฐ์ ์ ์ผ๋ก ์๋ฉฐ์น ๋์ ๋ฐฐ์ด SCSS๋ฅผ ์ฐ์ตํ๋ ๊ธฐ๋ถ์ผ๋ก ๋ง๋ค์ด๋ณด์๋ค. ์ด๋ฏธ์ง ๊ตฌํด์ค๋ ๊ฒ๋... ๊ทธ๊ฑธ ์ ์ฉํ๋ ๊ฒ๋... ํด๋ก ์ฝ๋ฉ์ด๋ผ๋๊ฒ ๊ฐ๋ฒฝํ๊ฒ ๋๊ฐ์ด ๋ฐ๋ผํ๋ ๊ฑด์ง, ์๋ ์์๋ณผ ์ ์๊ฒ๋? ํ๋ ๊ฑด์ง์ ๋ํด ์กฐ๊ธ ์๋ฌธ์ด ๋ ๋ค... ์ฐ์ , ๋ ์ด์์์ด๋ ์๋งจํฑ ํ๊ทธ๊ฐ์ ๊ธฐ์ด ๊ฐ๋
์ ์ฝํ๊ธฐ ๋๋ฌธ์ ๊พธ์คํ ์ฐ์ตํด๋ณด๊ณ ์ฎ๊ฒจ๋ด์ผ๊ฒ ๋ค... ๊ทธ๋ฅ ๋ฌด์ง์ฑ์ผ๋ก ์ฅ์ฅ ํ๋๋ ๋น์ทํ์ง๋ง ์ฝ๋๋ ๋๋ฝ๊ณ ์๋ง์ธ๊ฒ ๊ฐ๋คใ
ใ
๐ฆ ๊ทธ๋๋ ๊ฒฐ๊ณผ๊ฐ ๋์ ํ๋ ํ๋ ๋ณด์ด๋๊ฑด ์ฌ๋ฐ๊ณ ์ปดํ์ผ์ด ์ฌ์ด๊ฒ๋ ๋๋ฌด๋๋ฌด ๊ฐ์ฌํ ๋ฐ๋ฆ...! ์ด๋ฒ ๋ช
์ ์ด์
๋ถํฐ ๋งค-์ฐ ๋ณด๋์ฐจ๋ ์ค!!!