๋ชฉ๋กํ๋ก๊ทธ๋๋ฐ/Javascript ์๋ฐ์คํฌ๋ฆฝํธ (45)
Bibi's DevLog ๐ค๐
* ์ด ๊ธ์ ์ธํ๋ฐ์์ ์ ๊ณตํ๋ ํธ๋ ์ค๋์ ์ ๋ฃ ๊ฐ์ '์ฝ๊ณ ์์ฐ์ค๋ฝ๊ฒ ๋ฐฐ์๋ณด๋ Javascript ์ ๋ฌธ - ์ฝ๋์ค์ฟผ๋ ๋ง์คํฐ์ฆ ์ฝ์ค ๋ ๋ฒจ1'๋ฅผ ๋ฃ๊ณ ๊ณต๋ถํ๋ฉฐ ์ ๋ฆฌํ ๊ธ์ ๋๋ค. ๊ฐ์ ๋ด์ฉ์ ๋ํด, ์ ๊ฐ ํ๊ธฐํ๊ณ ๊ตฌ๊ธ๋งํ ๋ด์ฉ์ด ์ ๋ฆฌ๋์ด ์์ต๋๋ค. ์ด๋ณด์ธ ์ ๊ฐ ์ดํดํ ๋๋ก ์ ๋ฆฌํ๊ธฐ ๋๋ฌธ์, ๋ถ์ ํํ ๋ด์ฉ์ด ์์ ์ ์์์ ๊ฐ์ํด ์ฃผ์๊ธธ ๋ฐ๋๋๋ค. ๊ฐ์๋ฅผ ๋ฃ๊ณ ๋ด์ฉ์ ์ ๋ฆฌํ ๊ธ์ด๊ธฐ ๋๋ฌธ์ ๋ฌธ์ ๊ฐ ๋์ง ์๋๋ค๋ ์ธํ๋ฐ ์ธก ๋ต๋ณ์ ๋ฐ์ ์ ์ด ์์ผ๋(https://bibi6666667.tistory.com/37), ์ ์๊ถ์ ๋ฌธ์ ๊ฐ ๋๋ค๋ฉด ๋ณดํธ ๋ชจ๋(๋น๊ณต๊ฐ)๋ก ์ ํํ๊ฒ ์ต๋๋ค. [์ค์ต] ๊ณ์ฐ๊ธฐ ๊ตฌํํ๊ธฐ ์ด๋ฒ ์ค์ต์ ํตํด ๊ณ์ฐ๊ธฐ๋ฅผ ๊ตฌํํด ๋ณผ ๊ฒ์ด๋ค. ๋ฌธ์์ด ๊ณ์ฐ๊ธฐ ์์ ์์ํ๊ธฐ ๊ณ์ฐ๊ธฐ ํ๋ก๊ทธ๋๋ฐ์ ๋ํ ์๊ตฌ์ฌํญ ๊ณ์ฐ๊ธฐ..
CSS ์ํ ์ฝ๋ฉ WEB2 CSS๋ฅผ ๊ณต๋ถํด ์ฃผ์ธ์. ๋ฐฐ์ฐ๋ฌ ๊ฐ๊ธฐ WEB2 - CSS - ์ธํ๋ฐ ์ด ์์ ์ https://opentutorials.org(์ํ์ฝ๋ฉ ์ฌ์ดํธ)๋ฅผ ๋ง๋ค์ด๊ฐ๋ฉด์ CSS์ ๋ํ ์ง์๊ณผ ๊ฒฝํ์ ๋์์ ์ฑ์๋๋ฆฌ๊ธฐ ์ํ ๋ชฉ์ ์ผ๋ก ๋ง๋ค์ด์ง ์์ ์ ๋๋ค. ์ด๊ธ ์น ๊ฐ๋ฐ HTML/CSS ์จ๋ผ์ธ ๊ฐ์ ์ํ์ฝ๋ฉ์ www.inflearn.com ** ๋์ค์ ๊ณต๋ถํ๋ ๊ฒ ์์ง ์๊ธฐ ์ํด ๊ฐ๋ณ ํฌ์คํ ์ผ๋ก ์์ฑ.
* ์ด ๊ธ์ ์ธํ๋ฐ์์ ์ ๊ณตํ๋ ํธ๋ ์ค๋์ ์ ๋ฃ ๊ฐ์ '์ฝ๊ณ ์์ฐ์ค๋ฝ๊ฒ ๋ฐฐ์๋ณด๋ Javascript ์ ๋ฌธ - ์ฝ๋์ค์ฟผ๋ ๋ง์คํฐ์ฆ ์ฝ์ค ๋ ๋ฒจ1'๋ฅผ ๋ฃ๊ณ ๊ณต๋ถํ๋ฉฐ ์ ๋ฆฌํ ๊ธ์ ๋๋ค. ๊ฐ์ ๋ด์ฉ์ ๋ํด, ์ ๊ฐ ํ๊ธฐํ๊ณ ๊ตฌ๊ธ๋งํ ๋ด์ฉ์ด ์ ๋ฆฌ๋์ด ์์ต๋๋ค. ์ด๋ณด์ธ ์ ๊ฐ ์ดํดํ ๋๋ก ์ ๋ฆฌํ๊ธฐ ๋๋ฌธ์, ๋ถ์ ํํ ๋ด์ฉ์ด ์์ ์ ์์์ ๊ฐ์ํด ์ฃผ์๊ธธ ๋ฐ๋๋๋ค. ๊ฐ์๋ฅผ ๋ฃ๊ณ ๋ด์ฉ์ ์ ๋ฆฌํ ๊ธ์ด๊ธฐ ๋๋ฌธ์ ๋ฌธ์ ๊ฐ ๋์ง ์๋๋ค๋ ์ธํ๋ฐ ์ธก ๋ต๋ณ์ ๋ฐ์ ์ ์ด ์์ผ๋(https://bibi6666667.tistory.com/37), ์ ์๊ถ์ ๋ฌธ์ ๊ฐ ๋๋ค๋ฉด ๋ณดํธ ๋ชจ๋(๋น๊ณต๊ฐ)๋ก ์ ํํ๊ฒ ์ต๋๋ค. ์ด๋ฒ ์๊ฐ์๋ DOM์ ํตํด ๋ฒํผ์ ์ถ๊ฐํด ๋ณผ ๊ฒ. - ๊ธฐ์กด element์ ๊ณ์ธต ๊ตฌ์กฐ๋ก ์์์ ์ถ๊ฐํ๊ธฐ - ๋ฒํผ์ ์ถ๊ฐํ๊ธฐ ์ค๋นํ๊ธฐ ์๋์..
* ์ด ๊ธ์ ์ธํ๋ฐ์์ ์ ๊ณตํ๋ ํธ๋ ์ค๋์ ์ ๋ฃ ๊ฐ์ '์ฝ๊ณ ์์ฐ์ค๋ฝ๊ฒ ๋ฐฐ์๋ณด๋ Javascript ์ ๋ฌธ - ์ฝ๋์ค์ฟผ๋ ๋ง์คํฐ์ฆ ์ฝ์ค ๋ ๋ฒจ1'๋ฅผ ๋ฃ๊ณ ๊ณต๋ถํ๋ฉฐ ์ ๋ฆฌํ ๊ธ์ ๋๋ค. ๊ฐ์ ๋ด์ฉ์ ๋ํด, ์ ๊ฐ ํ๊ธฐํ๊ณ ๊ตฌ๊ธ๋งํ ๋ด์ฉ์ด ์ ๋ฆฌ๋์ด ์์ต๋๋ค. ์ด๋ณด์ธ ์ ๊ฐ ์ดํดํ ๋๋ก ์ ๋ฆฌํ๊ธฐ ๋๋ฌธ์, ๋ถ์ ํํ ๋ด์ฉ์ด ์์ ์ ์์์ ๊ฐ์ํด ์ฃผ์๊ธธ ๋ฐ๋๋๋ค. ๊ฐ์๋ฅผ ๋ฃ๊ณ ๋ด์ฉ์ ์ ๋ฆฌํ ๊ธ์ด๊ธฐ ๋๋ฌธ์ ๋ฌธ์ ๊ฐ ๋์ง ์๋๋ค๋ ์ธํ๋ฐ ์ธก ๋ต๋ณ์ ๋ฐ์ ์ ์ด ์์ผ๋(https://bibi6666667.tistory.com/37), ์ ์๊ถ์ ๋ฌธ์ ๊ฐ ๋๋ค๋ฉด ๋ณดํธ ๋ชจ๋(๋น๊ณต๊ฐ)๋ก ์ ํํ๊ฒ ์ต๋๋ค. DOM๊ณผ HTML HTML HyperText Markup Language ์ ์ฝ์ WWW(World Wide Web)์ 3์์ ์ค ํ๋. H..
* ์ด ๊ธ์ ์ธํ๋ฐ์์ ์ ๊ณตํ๋ ํธ๋ ์ค๋์ ์ ๋ฃ ๊ฐ์ '์ฝ๊ณ ์์ฐ์ค๋ฝ๊ฒ ๋ฐฐ์๋ณด๋ Javascript ์ ๋ฌธ - ์ฝ๋์ค์ฟผ๋ ๋ง์คํฐ์ฆ ์ฝ์ค ๋ ๋ฒจ1'๋ฅผ ๋ฃ๊ณ ๊ณต๋ถํ๋ฉฐ ์ ๋ฆฌํ ๊ธ์ ๋๋ค. ๊ฐ์ ๋ด์ฉ์ ๋ํด ์ ๊ฐ ํ๊ธฐํ๊ณ ๊ตฌ๊ธ๋งํ ๋ด์ฉ์ด ์ ๋ฆฌ๋์ด ์์ต๋๋ค. ์ด๋ณด์ธ ์ ๊ฐ ์ดํดํ ๋๋ก ์ ๋ฆฌํ๊ธฐ ๋๋ฌธ์, ๋ถ์ ํํ ๋ด์ฉ์ด ์์ ์ ์์์ ๊ฐ์ํด ์ฃผ์๊ธธ ๋ฐ๋๋๋ค. ๊ฐ์์ ๋จ์ ๋ณต๋ถ์ด ์๋ ๋ด์ฉ์ ์ ๋ฆฌํ ๊ธ์ด๊ธฐ ๋๋ฌธ์ ๋ฌธ์ ๊ฐ ๋์ง ์๋๋ค๋ ์ธํ๋ฐ ์ธก ๋ต๋ณ์ ๋ฐ์ ์ ์ด ์์ผ๋(https://bibi6666667.tistory.com/37), ์ ์๊ถ์ ๋ฌธ์ ๊ฐ ๋๋ค๋ฉด ๋ณดํธ ๋ชจ๋(๋น๊ณต๊ฐ)๋ก ์ ํํ๊ฒ ์ต๋๋ค. Prototype ๋์ด๋๊ฐ ๊ฝค ์๋ ๊ฐ์ข์ด๋ฏ๋ก ๊ทธ๋ฅ ์ ๋ฐฐ์ฐ์๊ณ ๋์ด๊ฐ๋ ๋ฌด๋ฐฉํฉ๋๋ค. ํ๋กํ ํ์ prototype ์์ฑ์๋ก ๋ง๋ ..
* ์ด ๊ธ์ ์ธํ๋ฐ์์ ์ ๊ณตํ๋ ํธ๋ ์ค๋์ ์ ๋ฃ ๊ฐ์ '์ฝ๊ณ ์์ฐ์ค๋ฝ๊ฒ ๋ฐฐ์๋ณด๋ Javascript ์ ๋ฌธ - ์ฝ๋์ค์ฟผ๋ ๋ง์คํฐ์ฆ ์ฝ์ค ๋ ๋ฒจ1'๋ฅผ ๋ฃ๊ณ ๊ณต๋ถํ๋ฉฐ ์ ๋ฆฌํ ๊ธ์ ๋๋ค. ๊ฐ์ ๋ด์ฉ์ ๋ํด, ์ ๊ฐ ํ๊ธฐํ๊ณ ๊ตฌ๊ธ๋งํ ๋ด์ฉ์ด ์ ๋ฆฌ๋์ด ์์ต๋๋ค. ์ด๋ณด์ธ ์ ๊ฐ ์ดํดํ ๋๋ก ์ ๋ฆฌํ๊ธฐ ๋๋ฌธ์, ๋ถ์ ํํ ๋ด์ฉ์ด ์์ ์ ์์์ ๊ฐ์ํด ์ฃผ์๊ธธ ๋ฐ๋๋๋ค. ๊ฐ์๋ฅผ ๋ฃ๊ณ ๋ด์ฉ์ ์ ๋ฆฌํ ๊ธ์ด๊ธฐ ๋๋ฌธ์ ๋ฌธ์ ๊ฐ ๋์ง ์๋๋ค๋ ์ธํ๋ฐ ์ธก ๋ต๋ณ์ ๋ฐ์ ์ ์ด ์์ผ๋(https://bibi6666667.tistory.com/37), ์ ์๊ถ์ ๋ฌธ์ ๊ฐ ๋๋ค๋ฉด ๋ณดํธ ๋ชจ๋(๋น๊ณต๊ฐ)๋ก ์ ํํ๊ฒ ์ต๋๋ค. ๊ฐ์ ์ํ ์ ๋ฌ ์ดํดํ๊ธฐ ์ด๋ฒ ์๊ฐ์๋ ๊ฐ์ ์ํ ์ ๋ฌ(call by Value)๊ณผ ์ฐธ์กฐ์ ์ํ ์ ๋ฌ(call by Reference) ์ ..
* ์ด ๊ธ์ ์ธํ๋ฐ์์ ์ ๊ณตํ๋ ํธ๋ ์ค๋์ ์ ๋ฃ ๊ฐ์ '์ฝ๊ณ ์์ฐ์ค๋ฝ๊ฒ ๋ฐฐ์๋ณด๋ Javascript ์ ๋ฌธ - ์ฝ๋์ค์ฟผ๋ ๋ง์คํฐ์ฆ ์ฝ์ค ๋ ๋ฒจ1'๋ฅผ ๋ฃ๊ณ ๊ณต๋ถํ๋ฉฐ ์ ๋ฆฌํ ๊ธ์ ๋๋ค. ๊ฐ์ ๋ด์ฉ์ ๋ํด, ์ ๊ฐ ํ๊ธฐํ๊ณ ๊ตฌ๊ธ๋งํ ๋ด์ฉ์ด ์ ๋ฆฌ๋์ด ์์ต๋๋ค. ์ด๋ณด์ธ ์ ๊ฐ ์ดํดํ ๋๋ก ์ ๋ฆฌํ๊ธฐ ๋๋ฌธ์, ๋ถ์ ํํ ๋ด์ฉ์ด ์์ ์ ์์์ ๊ฐ์ํด ์ฃผ์๊ธธ ๋ฐ๋๋๋ค. ๊ฐ์๋ฅผ ๋ฃ๊ณ ๋ด์ฉ์ ์ ๋ฆฌํ ๊ธ์ด๊ธฐ ๋๋ฌธ์ ๋ฌธ์ ๊ฐ ๋์ง ์๋๋ค๋ ์ธํ๋ฐ ์ธก ๋ต๋ณ์ ๋ฐ์ ์ ์ด ์์ผ๋(https://bibi6666667.tistory.com/37), ์ ์๊ถ์ ๋ฌธ์ ๊ฐ ๋๋ค๋ฉด ๋ณดํธ ๋ชจ๋(๋น๊ณต๊ฐ)๋ก ์ ํํ๊ฒ ์ต๋๋ค. ๊ฐ์ฒด์ ์์ฑ์ ์ดํด๋ณด๊ธฐ ๋ณต์ต ๊ฐ์ฒด object ๋ ์ ์ง ๋ณด์๋ฅผ ์ฝ๊ฒ ํ๊ธฐ ์ํด์ ๊ฐ๋ค์ ๋ฌถ์ด ๋์ ๊ฒ์ผ๋ก, ์์ฑproperty๊ณผ ๋ฉ์๋met..
* ์ด ๊ธ์ ์ธํ๋ฐ์์ ์ ๊ณตํ๋ ํธ๋ ์ค๋์ ์ ๋ฃ ๊ฐ์ '์ฝ๊ณ ์์ฐ์ค๋ฝ๊ฒ ๋ฐฐ์๋ณด๋ Javascript ์ ๋ฌธ - ์ฝ๋์ค์ฟผ๋ ๋ง์คํฐ์ฆ ์ฝ์ค ๋ ๋ฒจ1'๋ฅผ ๋ฃ๊ณ ๊ณต๋ถํ๋ฉฐ ์ ๋ฆฌํ ๊ธ์ ๋๋ค. ๊ฐ์ ๋ด์ฉ์ ๋ํด, ์ ๊ฐ ํ๊ธฐํ๊ณ ๊ตฌ๊ธ๋งํ ๋ด์ฉ์ด ์ ๋ฆฌ๋์ด ์์ต๋๋ค. ์ด๋ณด์ธ ์ ๊ฐ ์ดํดํ ๋๋ก ์ ๋ฆฌํ๊ธฐ ๋๋ฌธ์, ๋ถ์ ํํ ๋ด์ฉ์ด ์์ ์ ์์์ ๊ฐ์ํด ์ฃผ์๊ธธ ๋ฐ๋๋๋ค. ๊ฐ์๋ฅผ ๋ฃ๊ณ ๋ด์ฉ์ ์ ๋ฆฌํ ๊ธ์ด๊ธฐ ๋๋ฌธ์ ๋ฌธ์ ๊ฐ ๋์ง ์๋๋ค๋ ์ธํ๋ฐ ์ธก ๋ต๋ณ์ ๋ฐ์ ์ ์ด ์์ผ๋(https://bibi6666667.tistory.com/37), ์ ์๊ถ์ ๋ฌธ์ ๊ฐ ๋๋ค๋ฉด ๋ณดํธ ๋ชจ๋(๋น๊ณต๊ฐ)๋ก ์ ํํ๊ฒ ์ต๋๋ค. switch-case ๋ฌธ๋ฒ - if๋ฌธ๊ณผ ๋๋ถ์ด ๋ง์ด ์ฌ์ฉํ๋ ๋ถ๊ธฐ๋ฌธ/์กฐ๊ฑด๋ฌธ. ( = ์ฝ๋์ ์งํ๋ฐฉํฅ์ ๋ฐ๊พธ๋ ๋ช ๋ น! ) - ๋ณ์์ ์ ์ฅ๋ ๊ฐ..