๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐Ÿ’ป Deep Wide Programming/Javascript & Vanila JS

[๋…ธ๋งˆ๋“œ์ฝ”๋”] ๋ฐ”๋‹๋ผ JS 1~ 1-10

728x90
๋ฐ˜์‘ํ˜•

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ.. ๋„ˆ....Super Cool!

๋‹ˆ์ฝœ๋ผ์Šค์˜ ๋ฐ”๋‹๋ผ JS ์‹œ๋ฆฌ์ฆˆ๋ฅผ ์‹œ์ž‘ํ–ˆ๋‹ค. ๊ทธ๋žฌ๋”๋‹ˆ, ์ƒํ™œ์ฝ”๋”ฉ์˜ js๋ฅผ ๋ฐฐ์šธ ๋•Œ์™€๋Š” ๋˜ ๋‹ค๋ฅธ ์„ธ๊ณ„๊ฐ€ ์—ด๋ ธ๋‹ค! ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์ด๋ ‡๊ฒŒ ๋ฉ‹์ง€๊ณ  ์ฟจํ•œ ๊ฒƒ๋“ค์„ ํ•  ์ˆ˜ ์žˆ๋‹ค๋‹ˆ!! ๊ทธ๋ฆฌ๊ณ  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๊ทธ ์–ด๋– ํ•œ ๋‹ค๋ฅธ ์–ธ์–ด๋กœ๋„ ๋Œ€์ฒดํ•  ์ˆ˜ ์—†๋Š” ๊ฐ•๋ ฅํ•œ ์–ธ์–ด์˜€๋‹ค๋‹ˆ!! ์•„๋ž˜์˜ ์‚ฌ์ดํŠธ์—๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๋งŒ๋“  ๊ฒŒ์ž„๋“ค์ด ์žˆ๋‹ค. ๋ฉ‹์ง€๋‹ค......๋‚˜๋„ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•ด์„œ ์šฐ๋ฆฌ ์šฐ๋ด‰์ด๋กœ ๊ฒŒ์ž„ ๋งŒ๋“ค์–ด์•ผ์ง€!!!  

 

https://impactjs.com/games

 

Impact Games

 

impactjs.com


๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ž€?

์•ž์„œ์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๊ณต๋ถ€ํ•  ๋•Œ ๊ทธ๋Ÿฐ ์˜๋ฌธ์ด ์žˆ์—ˆ๋‹ค. ๊ตฌ๊ธ€์— ๊ฒ€์ƒ‰ํ•ด๋ณด๋ฉด, ์–ด๋–ค ๋ช…๋ น์„ ์œ„ํ•ด ์“ฐ์ด๋Š” ์ฝ”๋“œ๊ฐ€ ํฌ์ŠคํŒ…๋งˆ๋‹ค ์กฐ๊ธˆ์”ฉ ๋‹ค๋ฅธ๊ฑฐ๋‹ค. ๋‚˜๋Š” ์ƒํ™œ ์ฝ”๋”ฉ์—์„œ document.id ์™€ ๊ฐ™์€ ํ˜•์‹์˜ ์ฝ”๋“œ๋กœ ๊ตฌํ˜„ํ•˜๊ณ  ์žˆ์—ˆ๋Š”๋ฐ, ์–ด๋–ค ํฌ์ŠคํŒ…์—์„œ๋Š” document.getElementById ์™€ ๊ฐ™์€ ์ฝ”๋“œ๋ฅผ ์“ด๋‹ค๊ฑฐ๋‚˜ ํ•˜๋Š” ๊ฑธ ๋ณด๋ฉด์„œ ๋„๋Œ€์ฒด ์™œ ๊ฐ™์€ ๋ช…๋ น์ธ๋ฐ ์ €๋งˆ๋‹ค ๋‹ค๋ฅด๊ฒŒ ์“ฐ๋Š”๊ฑฐ์ง€? ํ˜ผ๋ž€์Šค๋Ÿฌ์› ์—ˆ๋‹ค. ์—ฌ๊ธฐ์„œ ์˜๋ฌธ์ด ํ’€๋ ธ๋‹ค. 

 

์–ด๋– ํ•œ library๋„ framework๋„ ๋„์›€๋ฐ›์ง€ ์•Š์€ ๋‚ ๊ฒƒ์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ผ๊ณ  ํ•˜๋Š”๋ฐ, ์ด ์›์ดˆ์ ์ธ ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์ฝ”๋“œ๋Š” ๋Œ€์ฒด๋ถˆ๊ฐ€๋Šฅํ•˜๋ฉฐ, ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋‹ค๋ฅธ ํ”„๋กœ๊ทธ๋žจ์—์„œ ์‹คํ–‰ํ•˜๊ธฐ ์œ„ํ•œ ๋ณ€ํ˜•๋œ ๋ฒ„์ „์˜ ์ฝ”๋“œ๋“ค์ด ์กด์žฌํ–ˆ๋˜ ๊ฒƒ์ด๋‹ค. ๋‚˜๋Š” ์ด๊ณ ์ž‰์Œค๊ณผ ํ•จ๊ป˜ ์•„๋งˆ๋„, MooTools์˜ ์ฝ”๋“œ๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ•™์Šตํ•œ ๋“ฏ ์‹ถ๋‹ค. ๋ฐ”๋‹๋ผ ์ž๋ฐ”์ŠคํŠธ๋ฆฝํŠธ๋ฅผ ํ•  ์ค„ ์•Œ๋ฉด, ๋ฆฌ์•กํŠธ(์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ค‘ ํ•˜๋‚˜) ๋“ฑ๋“ฑ ๋‹ค๋ฅธ ์–ธ์–ด๋กœ, ๋‹ค๋ฅธ ๋ชจ๋“  ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ํ”„๋ ˆ์ž„์›Œํฌ๋กœ jumpํ•  ๋•Œ๋„ ๋ฌธ์ œ๊ฐ€ ์—†๊ฒŒ ๋œ๋‹ค๊ณ  ํ•œ๋‹ค. ์™œ๋ƒ? ๋ฐ”๋‹๋ผ js๋ฅผ ํ•  ์ค„ ์•ˆ๋‹ค๋Š” ๊ฒƒ์€, ๋ชจ๋“  ์›น์˜ ๋ฒ ์ด์Šค๊ฐ€ ๋˜๋Š” ์–ธ์–ด๋ฅผ ์ดํ•ดํ•œ๋‹ค๋Š” ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค!


๊ทธ๋ฆฌ๊ณ  ์ด์ œ ๋ณธ๊ฒฉ์ ์œผ๋กœ ๋‹ˆ๊ผด๋ผ์Šค๊ฐ€ JS ์ˆ˜์—…์— ์ง„์ž…ํ–ˆ๋‹ค! ๊ทธ๋ฆฌ๊ณ  ๋‚˜๋Š” ์ถฉ๊ฒฉ์ ์ธ ์žฅ๋ฉด์„ ๋งˆ์ฃผํ•˜๋Š”๋ฐ..

์ƒํ™œ์ฝ”๋”ฉ์—์„œ๋Š” js src๋ฅผ head์—๋‹ค๊ฐ€ ์‚ฝ์ž…ํ–ˆ๋˜ ๊ฒƒ ๊ฐ™์€๋ฐ, js ํŒŒ์ผ์€ ํ•ญ์ƒ body์˜ ๋งจ ๋์— ์™€์•ผํ•œ๋‹ค๊ณ  ํ–ˆ๋‹ค. 


 

1. let

๋ณ€์ˆ˜๋ฅผ ์ง€์ •ํ•ด์ค„ ๋•Œ๋Š” ๋งจ ๋จผ์ € let(=์ดˆ๊ธฐํ™” ์ž‘์—…)์„ ์จ์ค€๋‹ค!
2๋ฒˆ์งธ ์ค„์—์„œ a ์•ž์—๋Š” let์„ ์จ์ค„ ํ•„์š”๊ฐ€ ์—†๋‹ค. 

 

3๋ฒˆ์งธ ์ค„์—์„œ a ๋Š” ๊ทธ ๊ฐ’์ด ์ดˆ๊ธฐํ™”๋˜์ง€ ์•Š๊ณ , ์—…๋ฐ์ดํŠธ ๋˜์—ˆ์„ ๋ฟ์ด๋‹ค!

๋”ฐ๋ผ์„œ ๋งˆ์ง€๋ง‰์—์„œ ์ถœ๋ ฅ๋˜๋Š” ๊ฐ’์ด 216, 4๋ผ๊ณ  ๋‚˜์˜จ ๊ฒƒ์ด๋‹ค.


2. const (=constant, ์ƒ์ˆ˜, ๋ณ€ํ•˜์ง€ ์•Š๋Š” ํ•ญ์„ ์˜๋ฏธํ•œ๋‹ค)

๋ณ€์ˆ˜๋ฅผ ์ง€์ •ํ• ๋•Œ, 

3๋…„ ์ „์ธ๊ฐ€๋งŒํ•ด๋„, var๋งŒ ์“ธ ์ˆ˜ ์žˆ์—ˆ๋Š”๋ฐ ์ƒˆ๋กญ๊ฒŒ ์ƒ๊ธด๊ฑฐ๋ผ๊ณ  ํ•œ๋‹ค!


๊ทธ ๋‹ค์Œ์—๋Š” , ๋ฌธ์ž์—ด๊ณผ ์ˆซ์ž์—ด์„ ๋ณธ ๋‹ค์Œ, ์ƒˆ๋กœ ๋ณด๋Š” ๊ฐœ๋…์ด ๋“ฑ์žฅํ–ˆ๋‹ค.

์†Œ์ˆ˜๋ฅผ ์“ฐ๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค!


Camelcase

๊ฐ„๋‹จํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฌธ๋ฒ• ๊ทœ์น™! camelcase๋กœ ์ ์–ด์ค€๋‹ค.

๊ทธ ์˜๋ฏธ๋Š”, ํ•ญ์ƒ ์†Œ๋ฌธ์ž๋กœ ์‹œ์ž‘ํ•˜๊ณ  ์ŠคํŽ˜์ด์Šค๊ฐ€ ํ•„์š”ํ•˜๋ฉด ๋‹ค์Œ ๋‹จ์–ด์— ๋Œ€๋ฌธ์ž๋ฅผ ๋„ฃ์–ด์ฃผ๋Š” ๊ฒƒ์ด๋‹ค. ๋„์–ด์“ฐ๊ธฐ๊ฐ€ ๋ถˆ๊ฐ€๋Šฅํ•ด์„œ ๋‚˜์˜จ ๋ฐฉ๋ฒ•์ธ๋ฐ, ๋‚™ํƒ€์˜ ๊ตฌ๋ถˆ๊ตฌ๋ถˆํ•œ ๋“ฑ ๋ชจ์–‘๊ฐ™๋‹ค๊ณ  ํ•ด์„œ camelcase๋ผ๋Š” ์ด๋ฆ„์ด ๋ถ™์—ฌ์กŒ๋‹ค๊ณ  ํ•œ๋‹ค. 


List์™€ Object

๊ทธ๋ƒฅ list๋ฅผ ๋งŒ๋“ค์–ด์ค„ ๋•Œ๋Š” []๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋˜๊ณ , 

๋ฆฌ์ŠคํŠธ ์•ˆ์— ๊ตฌ๋ถ„๋œ ์ •๋ณด๋„ ํ•จ๊ป˜ ๋„ฃ์–ด์ฃผ๊ณ  ์‹ถ์„ ๋•Œ๋Š” ์˜ค๋ธŒ์ ํŠธ {}๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค!

์˜ค๋ธŒ์ ํŠธ๋Š” ๊ทธ๋ƒฅ ๋ฆฌ์ŠคํŠธ๋ž‘์€ ์ž‘์„ฑ๋ฒ•์ด ์กฐ๊ธˆ ๋‹ค๋ฅด๋‹ค.

๋ฐ”๋กœ ์š”๋ ‡๊ฒŒ.

๊ทธ๋Ÿฌ๋ฉด ์ด๋ ‡๊ฒŒ ์ถœ๋ ฅ๋œ๋‹ค.

๋ถ€๋ถ„ ์ •๋ณด๋งŒ์€ ์ด๋ ‡๊ฒŒ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. 

nicoInfo ๋Š” ์˜ค๋ธŒ์ ํŠธ, name, age, gender, ishandsome์€ key
์ด๋Ÿฐ์‹์œผ๋กœ ์˜ค๋ธŒ์ ํŠธ ์•ˆ์— list๋ฅผ ๋„ฃ์„ ์ˆ˜๋„ ์žˆ๋‹ค!
object ์•ˆ์— list ์•ˆ์— object๊นŒ์ง€..! ๊ฐ€๋Šฅ!

 

728x90
๋ฐ˜์‘ํ˜•