ํ์์์ ๊ณผ ํจ๊ป ์์ต์ค์ธ ์๋ฐ์คํฌ๋ฆฝํธ! ์ฌ์ค ์๋ฐ์คํฌ๋ฆฝํธ๋ ์ปค๋ ์ ์ด์ฟผ๋ฆฌ๋ ์ ๋๋ก ๋ค๋ฃฐ์ค ๋ชฐ๋ผ์ ์ฒ์์ ์ง๋ ๊ฒ๋จน์๋๋ฐ...์ ์ ๊ณต๋ถํ๋ฉด์ ์กฐ๊ธ์ฉ ๋ณด์ด๊ธฐ ์์ํ๋๊ฑฐ ๊ฐ๋ค...๋ ์ฌ์ค ์ค๋ Return ๋ฌธ ๊ณต๋ถํ๋๋ฐ ์ดํด๊ฐ ํ๋๋ ์๋์ ๋ฉํ์ด ๋ถ๊ดด๋ฌ์ง๋ง ใ ใ ...
์ดํด๊ฐ ์๋๋ ๊ฒฝ์ฐ์๋ ํ๋ฒ๋ง ๋ณด๊ณ ๋์ด๊ฐ๋๊ฒ ์๋๋ผ ๊ฐ์ ๊ฐ์๋ฅผ ํ์ ๋ ๋ ๊น์ง ๋๋ ค๋ณด๋๋ฐ...์ด๋ฒ Return๋ฌธ ๊ฐ์๊ฒฝ์ฐ๋ ๋๋ ค๋ด๋...์? ์ถ์ด์ ใ ใ ์ด๋ถ๋ถ์ ๋ฐ๋ก ํตํด๋จ๋ค ๋ฐ๋ก ๋ด์ฉ์ ์ฐพ์์ ์ ๋ฆฌํด๋ด์ผ๊ฒ ๋ค๋ผ๊ณ ์๊ฐํ๋ค.
๊ทธ๋์ ์ค๋ ์ฐ๋ ๋ด์ฉ์ ๋ญ๋๋ฉด ๊ทธ ๋์ ๋ฐฐ์ด ๋ด์ฉ๋ค ์ ๋ฆฌํ๋ ๊ฐ๋ ์ผ๋ก ์ผ๊ธฐ(?)๋ฅผ ์จ๋ณผ๋ ค๊ณ ํ๋ค. ๋ณต์ตํ๋ ๊ฐ๋ ์ด๋ผ๊ณ ์๊ฐํ๋ฉด ์ข๊ธฐ๋ ํ ๊บผ ๊ฐ์์ ์์ผ๋ก์ ๊ณต๋ถ๋ด์ฉ์ ๊ธฐ๋กํด๋ณผ๊น ํ๋ค.
์ฐธ๊ณ ๋ก ์ธ๊ฐ์์ ์ ๋ ธ๋ง๋์ฝ๋(NOMAD CODER)์ ๋์ฝ๋ผ์ค ์ค์ ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๊ณต๋ถํ๊ณ ์๊ณ , ์๋ฌธ(ๆธๆ)์ผ๋ก์ ๊ณต๋ถ๋ ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ฌ์ดํธ๋ฅผ ํตํด์ ๊ณต๋ถํ๊ณ ์๋ค.
์ด์์ค์ ๋์ฝ๋ผ์ค ์ค ๋๋ฌด ์์๊ธฐ์ จ๋ค...
๊ทธ๋ผ ์์!
์๋ฐ์คํฌ๋ฆฝํธ๋ HTML, CSS, JAVASCRIPT 3๊ฐ์ง ๊ตฌ์ฑ ์์์ค ํ ์ถ์ผ๋ก์จ HTML์ ๋ฌธ์์ ๊ตฌ์กฐ,ย CSS๋ ํํ์ ๋ด๋นํ๋ค๋ฉดย JAVASCRIPT๋ ๋ฌธ์์ ๋์์ ๋ด๋น์ ๋งํ ์ ์๋ค.
์ด๋ฆ | ์ญํ | ์๋ฏธ |
---|---|---|
HTML | ๋ฌธ์์ ๊ตฌ์ฑ(๋ผ๋) | ๋ด์ฉ |
CSS | ๋ฌธ์์ ํํ | ๋์์ธ |
JAVASCRIPT | ๋ฌธ์์ ๋์ | ๋ชจ์ |
๋ผ๊ณ ~์ ์๋ ์ด๋ ๊ฒ ์ธ์๋๋ค. ํ์ฌ ๊ฑฐ์ง 1๊ฐ์? ์๋์ผ 1๊ฐ์๊น์ง ์๋๊ณ ๊ฐ๊น์์ง๋ ค๊ณ ํ๋๋ฐ...NOMAD CORDER์ ๋์ฝ๋ผ์ฐ ์ค ๊ฐ์ ๋ค์ผ๋ฉด์ ๊ณต๋ถ์ค์ ์๋ค๋ง...์ ์ ์ด๋ ค์์ง๋๊ฑด ๋ถ๊ฐํผํ๊ฑฐ ๊ฐ๋ค ใ
ํ์ง๋ง ํ์คํ๊ฑด ์ซ์์, "๋ฌธ์"์ ํ๊ธฐ๋ฒ๊ณผ, "๋ณ์(variable)"์ ๊ฐ๋ ๊ณผ"๋ฐฐ์ด(Array)", "Object(๊ฐ์ฒด)"์ ๊ฐ๋ ์ ์ด๋ ดํ์ด ์กํ๊ฑฐ ๊ฐ๋ฌ๊น?
1์ ์ซ์์ง๋ง "1"์ ๋ฌธ์๋ก ์ธ์ํ๋ค. ์ฌ๋ฌ๋จ์ด๋ฅผ ์ฌ์ฉํ์ฌ ๋ณ์๋ฅผ ์ง์ ํ ๋์๋
๋จ์ด ์ฒซ ๊ธ์๋ฅผ ๋๋ฌธ์๋ก ํ๊ธฐํ์ฌ ๋์ด์ฐ๊ธฐ๋ฅผ ๋์ ํ๋ค(?)
ex)const MenuList = ["cake", "americano", "cookie","cafelatte"...]
true / false / null / NaN / underfine๋ฑ Boolean(๋ถ๋ฆฌ์ธ)์ด๋ผ๊ณ ๋ถ๋ฆฌ๋ฉฐ, 1๊ณผ 0, on&off ์ฒ๋ผ 2๊ฐ์ง์ ์ต์ ์ผ๋ก๋ง ๋ํ๋ผ ์ ์๋ค.
null์ ๋น์ด์์์ด๋ ๋ป์ผ๋ก ๋ด๊ฐ ์ง์ ์ฝ๋ ์์์ ์์ฑ, variable์์ ์๋ฌด๊ฒ๋ ์๋ค๋๊ฑธ ํ์ค์ ํ ๊ฒฝ์ฐ
๋ณ์์ ํด๋น๋๋ ๊ฐ, ๋ง ๊ทธ๋๋ก ๋น์ด ์์.
underfined๋ ๋ณ์์ ๊ฐ์ ๋ถ์ฌํ์ง ์์ ์ํ
ex) let hello; console.log(hello);
ํ๋์ variable์ ์ฌ๋ฌ๊ฐ์ง ๋ฐ์ดํฐ๋ฅผ ๋ฃ๊ณ ์ถ์ ๊ฒฝ์ฐ์๋ "Array"๋ฅผ ์ฌ์ฉํ๋ค. ์ด Array์ ๊ฒฝ์ฐ๋ ํ๋์ ๋ณ์ ๊ฐ์ ์ฌ๋ฌ ๋ฆฌ์คํธ๋ฅผ ์ถ๊ฐํ ์ ์๋ ๊ฐ์ฒด์ด๋ค.
ex) const content = ["string", 1, true, false, null, underfine...] โ ์ค๊ดํธ ์์ ์ถ๊ฐํ๊ณ ์ถ์ ๋ฆฌ์คํธ๋ฅผ ์ ๋๋ค. ๋ฆฌ์คํธ๋ ์ซ์, ๋ฌธ์, ๋ถ๋ฆฌ์ธ ๊ฐ ์๊ด ์์ด ์ถ๊ฐํ ์ ์๋ค.
[์์๋ฌธ-01] const Fruit = ["apple[0]", "banana[1]", "strawberry[2]", "orange[3]", "watermelon[4]"...]
โป ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ ๊ฒฝ์ฐ 1,2,3...์์๊ฐ ์๋ 0์ ์์์ผ๋ก ์์๋ฅผ ์ ํ๋ค.
์ฆ, ์์๋ฌธ์์ ๋ณด์ด๋ strawberry(๋ธ๊ธฐ)์ ๊ฒฝ์ฐ ์ผ๋ฐ์ ์ธ ์์๋ก๋ 3๋ฒ์งธ ์ด์ง๋ง ์๋ฐ์คํฌ๋ฆฝํธ ์์์์ ์ค์ง์ ์ธ ์๋ฒ์ผ๋ก๋ 2๋ฒ์งธ ํญ๋ชฉ์ด ๋๋ค.
โป Arrayํญ๋ชฉ์์๋ ์์ดํ
์ ์
๋ฐ์ดํธ ํ ์๋, ์ถ๊ฐํ ์ ์๋ค. ์ด๋ ์ฌ์ฉ๋๋๊ฒ์ด "push"๋ฅผ ์ฌ์ฉํ๋๋ฐ ์ด push์ ๊ฒฝ์ฐ๋ ๋ฉ์๋(method)๋ผ ๋งํ๋ฉฐ ๋ณ์์ ๋์์ ๋ถ์ฌํ๋ค๊ณ ์๋ฏธํ ์ ์๋ค.
[์์๋ฌธ-02] const buylist = ["apple", "beef", "tomato", "egg", "milk"]
buylist.push("bread");
๊ฒฐ๊ณผ : buylist =["apple", "beef", "tomato", "egg", "milk", "bread"]
โป ๊ทธ ๋ค์์ผ๋ก๋ ๊ธฐ์กด์ ๋ฆฌ์คํธ์์ ํญ๋ชฉ์ ์ ๋ฐ์ดํธํ ์ ์๋๋ฐ ์ด๋ฐ ๊ฒฝ์ฐ์๋ ์ ๋ฐ์ดํธ๋ฅผ ํด์ผํ ํญ๋ชฉ์ ์๋ฒ์ ๊ธฐ์ค์ผ๋ก ํญ๋ชฉ์ ์ธ๋ฑ์ค๊ฐ์ ์ค์ ํด ์ค๋ค.
[์์๋ฌธ-03] const buylist = ["apple", "beef", "tomato", "egg", "milk"]
buylist[2]="mango";
๊ฒฐ๊ณผ : buylist =["apple", "beef", "mango", "egg", "milk", "bread"]
์์ค ํ๋ค์ด...object ๋ถํฐ๋ ๋ค์์ ์จ์ผ์ง
์ฒ์์๋ ์์
์์ฒด์ ์ง๋ ๊ฒ๋จน๊ณ ๋์ ์์ฒด๋ฅผ ๋ฌด์์ ํ๋๋ฐ...๊ทธ๋๋ ๋๋ฆ๋๋ก ๊ณ์ ๋๋ ค๋ณด๊ณ ๋ชจ๋์๋ฐ์คํฌ๋ฆฝํธ ๋ด์ฉ๋ค ์ฒดํฌํ๋ฉด์ ์ ๋ฆฌํด ๋ณด๋๊น ๋๋ฆ๋๋ก ์ดํด๊ฐ๋๋๊ฒ ์ ๊ธฐํ ๋ฐ๋ฆ์ด๋ค. ๊ทธ๋ฐ๋ฐ ์ด๊ฒ ์ธ์ ๊น์ง ์ด๋ด ์ ์์๊น ์์ง๊น์ง ๊ฒ๋จน๊ณ ์๋์ค...์๋ ๊ทธ๋๋ก ๋ถ๋ชํ๋๊ฒ ์ค์ํ๊ฑฐ ๊ฐ๋ค. ๋ค์ด์ดํธ๋ ํ๋๋ฐ ๊ณต๋ถ๋ผ๊ณ ๋ชปํ ์๋...
๊ทธ๋ฆฌ๊ณ ์ด๊ฑธ ํค๋ค๋ฆฌ ์ค์๊ฒ 6์ผ๋ง์ ๋ค์ ์ ์์๊ฑฐ ๊ฐ์๋ฐ์? ๋ผ๊ณ ๋ด๊ฐ ์ ๋ง ๋ฉ์ฒญ์ด์๊ณ ๋ฌด๋ฆฌ์ ์ค์ง๊ฒ ๋์ก๋ค๋ผ๊ณ ๋ฐ์ ์๊ฐ์ด...!!
์๋ ๊ด๋ จ ์ง์์ด ์ ๋ฌดํ์ผ๋๊น ๋์ง ์ ์์๋ "ํฌ๋์ ๋๋ฆฝ"์ด์ง ์์๊น ์ถ๋ค. ๊ฒธ์ํ ํ๋๋ฅผ ๊ฐ์ง๊ณ ์ํํ๋ฏ์ด ๊ผผ๊ผผํ ๋ค์ด์ผ๊ฒ ๋ค.
์ค๋ธ์ ํธ(object)๋ถํฐ๋ ๋ค์ํธ์! ๊ทธ๋ผ ์๋ ...!