๐Ÿ’ปํ”„๋ก ํŠธ์—”๋“œ ๊ณต๋ถ€์ผ๊ธฐ 01 - JAVASCRIPT

Shiroi_Hikaruยท2021๋…„ 9์›” 5์ผ
0
post-thumbnail

ํ•™์›์ˆ˜์—…๊ณผ ํ•จ๊ป˜ ์˜ˆ์Šต์ค‘์ธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ! ์‚ฌ์‹ค ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์ปค๋…• ์ œ์ด์ฟผ๋ฆฌ๋„ ์ œ๋Œ€๋กœ ๋‹ค๋ฃฐ์ค„ ๋ชฐ๋ผ์„œ ์ฒ˜์Œ์—” ์ง€๋ ˆ ๊ฒ๋จน์—ˆ๋Š”๋ฐ...์ ์  ๊ณต๋ถ€ํ•˜๋ฉด์„œ ์กฐ๊ธˆ์”ฉ ๋ณด์ด๊ธฐ ์‹œ์ž‘ํ•˜๋Š”๊ฑฐ ๊ฐ™๋‹ค...๋Š” ์‚ฌ์‹ค ์˜ค๋Š˜ Return ๋ฌธ ๊ณต๋ถ€ํ•˜๋Š”๋ฐ ์ดํ•ด๊ฐ€ ํ•˜๋‚˜๋„ ์•ˆ๋˜์„œ ๋ฉ˜ํƒˆ์ด ๋ถ•๊ดด๋ฌ์ง€๋งŒ ใ… ใ… ...

์ดํ•ด๊ฐ€ ์•ˆ๋˜๋Š” ๊ฒฝ์šฐ์—๋Š” ํ•œ๋ฒˆ๋งŒ ๋ณด๊ณ  ๋„˜์–ด๊ฐ€๋Š”๊ฒŒ ์•„๋‹ˆ๋ผ ๊ฐ™์€ ๊ฐ•์˜๋ฅผ ํŒŒ์•…๋ ๋•Œ ๊นŒ์ง€ ๋Œ๋ ค๋ณด๋Š”๋ฐ...์ด๋ฒˆ Return๋ฌธ ๊ฐ™์€๊ฒฝ์šฐ๋Š” ๋Œ๋ ค๋ด๋„...์‘? ์‹ถ์–ด์„œ ใ… ใ…  ์ด๋ถ€๋ถ„์€ ๋”ฐ๋กœ ํ‚ตํ•ด๋†จ๋‹ค ๋”ฐ๋กœ ๋‚ด์šฉ์„ ์ฐพ์•„์„œ ์ •๋ฆฌํ•ด๋ด์•ผ๊ฒ ๋‹ค๋ผ๊ณ  ์ƒ๊ฐํ–ˆ๋‹ค.

๊ทธ๋ž˜์„œ ์˜ค๋Š˜ ์“ฐ๋Š” ๋‚ด์šฉ์€ ๋ญ๋ƒ๋ฉด ๊ทธ ๋™์•ˆ ๋ฐฐ์šด ๋‚ด์šฉ๋“ค ์ •๋ฆฌํ•˜๋Š” ๊ฐœ๋…์œผ๋กœ ์ผ๊ธฐ(?)๋ฅผ ์จ๋ณผ๋ ค๊ณ  ํ•œ๋‹ค. ๋ณต์Šตํ•˜๋Š” ๊ฐœ๋…์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜๋ฉด ์ข‹๊ธฐ๋„ ํ• ๊บผ ๊ฐ™์•„์„œ ์•ž์œผ๋กœ์˜ ๊ณต๋ถ€๋‚ด์šฉ์„ ๊ธฐ๋กํ•ด๋ณผ๊นŒ ํ•œ๋‹ค.

์ฐธ๊ณ ๋กœ ์ธ๊ฐ•์ˆ˜์—…์€ ๋…ธ๋งˆ๋“œ์ฝ”๋”(NOMAD CODER)์˜ ๋‹ˆ์ฝœ๋ผ์Šค ์Œค์˜ ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๊ณต๋ถ€ํ•˜๊ณ  ์žˆ๊ณ , ์„œ๋ฌธ(ๆ›ธๆ–‡)์œผ๋กœ์˜ ๊ณต๋ถ€๋Š” ๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์‚ฌ์ดํŠธ๋ฅผ ํ†ตํ•ด์„œ ๊ณต๋ถ€ํ•˜๊ณ  ์žˆ๋‹ค.

์ด์™€์ค‘์— ๋‹ˆ์ฝœ๋ผ์Šค ์Œค ๋„ˆ๋ฌด ์ž˜์ƒ๊ธฐ์…จ๋‹ค...

๊ทธ๋Ÿผ ์‹œ์ž‘!

Chapter 01 - ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(JAVASCRIPT)๋ž€?

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ž€ HTML, CSS, JAVASCRIPT 3๊ฐ€์ง€ ๊ตฌ์„ฑ ์š”์†Œ์ค‘ ํ•œ ์ถ•์œผ๋กœ์จ HTML์€ ๋ฌธ์„œ์˜ ๊ตฌ์กฐ,ย CSS๋Š” ํ‘œํ˜„์„ ๋‹ด๋‹นํ•œ๋‹ค๋ฉดย JAVASCRIPT๋Š” ๋ฌธ์„œ์˜ ๋™์ž‘์„ ๋‹ด๋‹น์„ ๋งํ•  ์ˆ˜ ์žˆ๋‹ค.

์ด๋ฆ„์—ญํ• ์˜๋ฏธ
HTML๋ฌธ์„œ์˜ ๊ตฌ์„ฑ(๋ผˆ๋Œ€)๋‚ด์šฉ
CSS๋ฌธ์„œ์˜ ํ‘œํ˜„๋””์ž์ธ
JAVASCRIPT๋ฌธ์„œ์˜ ๋™์ž‘๋ชจ์…˜

๋ผ๊ณ ~์ •์˜๋Š” ์ด๋ ‡๊ฒŒ ์™ธ์›Œ๋’€๋‹ค. ํ˜„์žฌ ๊ฑฐ์ง„ 1๊ฐœ์›”? ์•„๋‹ˆ์•ผ 1๊ฐœ์›”๊นŒ์ง„ ์•„๋‹ˆ๊ณ  ๊ฐ€๊นŒ์›Œ์งˆ๋ ค๊ณ  ํ•˜๋Š”๋ฐ...NOMAD CORDER์˜ ๋‹ˆ์ฝœ๋ผ์“ฐ ์Œค ๊ฐ•์˜ ๋“ค์œผ๋ฉด์„œ ๊ณต๋ถ€์ค‘์— ์žˆ๋‹ค๋งŒ...์ ์  ์–ด๋ ค์›Œ์ง€๋Š”๊ฑด ๋ถˆ๊ฐ€ํ”ผํ•œ๊ฑฐ ๊ฐ™๋‹ค ใ… 

ํ•˜์ง€๋งŒ ํ™•์‹คํ•œ๊ฑด ์ˆซ์ž์™€, "๋ฌธ์ž"์˜ ํ‘œ๊ธฐ๋ฒ•๊ณผ, "๋ณ€์ˆ˜(variable)"์˜ ๊ฐœ๋…๊ณผ"๋ฐฐ์—ด(Array)", "Object(๊ฐ์ฒด)"์˜ ๊ฐœ๋…์€ ์–ด๋ ดํ’‹์ด ์žกํžŒ๊ฑฐ ๊ฐ™๋‹ฌ๊นŒ?

Chapter 02 - ๋ฌธ์ž์™€ ์ˆซ์ž, ๊ทธ๋ฆฌ๊ณ  ๋ณ€์ˆ˜(variable)

1์€ ์ˆซ์ž์ง€๋งŒ "1"์€ ๋ฌธ์ž๋กœ ์ธ์‹ํ•œ๋‹ค. ์—ฌ๋Ÿฌ๋‹จ์–ด๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ณ€์ˆ˜๋ฅผ ์ง€์ •ํ•  ๋•Œ์—๋Š”
๋‹จ์–ด ์ฒซ ๊ธ€์ž๋ฅผ ๋Œ€๋ฌธ์ž๋กœ ํ‘œ๊ธฐํ•˜์—ฌ ๋„์–ด์“ฐ๊ธฐ๋ฅผ ๋Œ€์‹ ํ•œ๋‹ค(?) ex)const MenuList = ["cake", "americano", "cookie","cafelatte"...]

  1. const(์ƒ์ˆ˜) - ๋ณ€ํ•  ์ˆ˜ ์—†๋Š” ๊ฐ’์„ ์ง€์ •ํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๋ณ€์ˆ˜.
    ex) const myBloodType = "B"; (๋‚˜๋Š” Bํ˜•์ด๋‹ˆ๊นŒ)
  2. let - const๊ณผ ๋น„์Šทํ•˜์ง€๋งŒย ์ฐจ์ด์ ์ด๋ผ๋ฉด ๋ณ€์ˆ˜ ๊ฐ’์„ ์—…๋ฐ์ดํŠธ ํ•  ์ˆ˜ ์žˆ๋‹ค.
    ex) let fruit = "apple";
    fruit = "banana"; ์ด๋•Œ ๋งจ ์ฒ˜์Œ์— ๊ธฐ์ž…ํ•œ ๋ณ€์ˆ˜ ๊ฐ’์€ ์—†์–ด์ง„๋‹ค.
  3. var - ์˜ค๋ž˜๋œ ๋ณ€์ˆ˜, let๊ณผ ๋น„์Šทํ•œ ์—ญํ• ์„ ํ•˜์ง€๋งŒ ์‚ฌ์šฉ๋นˆ๋„๊ฐ€ ์ค„๊ณ  ์žˆ์–ด ์ตœ๊ทผ์—” ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค.

์‚ฌ์šฉ๋นˆ๋„ : 1. const / 2. let / 3. var(๋‹ˆ์ฝ”์Œค ํ”ผ์…œ ๊ทธ๋ƒฅ ์‚ฌ์šฉํ•˜์ง€๋งˆ!)

Chapter 03 - True & False and null

true / false / null / NaN / underfine๋“ฑ Boolean(๋ถˆ๋ฆฌ์–ธ)์ด๋ผ๊ณ  ๋ถˆ๋ฆฌ๋ฉฐ, 1๊ณผ 0, on&off ์ฒ˜๋Ÿผ 2๊ฐ€์ง€์˜ ์˜ต์…˜์œผ๋กœ๋งŒ ๋‚˜ํƒ€๋‚ผ ์ˆ˜ ์žˆ๋‹ค.

null์€ ๋น„์–ด์žˆ์Œ์ด๋ž€ ๋œป์œผ๋กœ ๋‚ด๊ฐ€ ์ง์ ‘ ์ฝ”๋“œ ์•ˆ์—์„œ ์ž‘์„ฑ, variable์•ˆ์— ์•„๋ฌด๊ฒƒ๋„ ์—†๋‹ค๋Š”๊ฑธ ํ™•์‹ค์‹œ ํ•  ๊ฒฝ์šฐ
๋ณ€์ˆ˜์— ํ•ด๋‹น๋˜๋Š” ๊ฐ’, ๋ง ๊ทธ๋Œ€๋กœ ๋น„์–ด ์žˆ์Œ.

underfined๋Š” ๋ณ€์ˆ˜์— ๊ฐ’์„ ๋ถ€์—ฌํ•˜์ง€ ์•Š์€ ์ƒํƒœ
ex) let hello; console.log(hello);

Chapter 04 - Array(๋ฐฐ์—ด)

ํ•˜๋‚˜์˜ 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)๋ถ€ํ„ฐ๋Š” ๋‹ค์ŒํŽธ์—! ๊ทธ๋Ÿผ ์•ˆ๋…•...!

profile
๊ฐ€๋ฆฌ์ง€ ๋ง๊ณ  ํ•  ์ˆ˜ ์žˆ์œผ๋ฉด ์‹œ๋„๋Š” ํ•ด๋ณด์ž.

0๊ฐœ์˜ ๋Œ“๊ธ€