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

[JS] ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ์ดˆ

by ํฌ๊ตฌ๋ฆฌ 2021. 1. 26.

๐Ÿ’ก ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ž€?

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(JavaScript)๋Š” ์›น ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋™์ž‘ํ•˜๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋กœ์„œ HTML, CSS์™€ ํ•จ๊ป˜ ๋™์  ์›น ํŽ˜์ด์ง€์˜ ์ค‘์š”ํ•œ ๊ตฌ์„ฑ ์š”์†Œ๋‹ค.

 

๐Ÿ’ก ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ

  • ๋ฌธ์ž, ์ˆซ์ž, ๋ฐฐ์—ด ๋“ฑ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค๋ฃฌ๋‹ค.
  • ๋‚ ์งœ์™€ ์‹œ๊ฐ„์„ ๋‹ค๋ฃฌ๋‹ค.
  • ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์กฐ์ž‘ํ•œ๋‹ค.
  • ์ด๋ฒคํŠธ๋ฅผ ์ฒ˜๋ฆฌํ•œ๋‹ค.
  • ํŽ˜์ด์ง€์˜ ๋ฐ์ดํ„ฐ ์š”์†Œ๋ฅผ ์กฐ์ž‘ํ•œ๋‹ค.
  • ํผ(Form)์„ ์กฐ์ž‘ํ•œ๋‹ค.
  • ์• ๋‹ˆ๋ฉ”์ด์…˜ ํšจ๊ณผ๋ฅผ ์ฒ˜๋ฆฌํ•œ๋‹ค.
  • ์ด๋ฏธ์ง€/์‚ฌ์šด๋“œ/์˜์ƒ์„ ๋‹ค๋ฃฌ๋‹ค.
  • ๋ฐ์ดํ„ฐ๋ฅผ ์†ก์ˆ˜์‹ ํ•œ๋‹ค.
  • ๋กœ์ปฌ ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค๋ฃฌ๋‹ค.

๐Ÿ’ก ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ‘œ์ค€

 

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ECMA International์—์„œ ์ •ํ•˜๋Š” ํ‘œ์ค€ ๊ทœ๊ฒฉ์ธ ECMAScript๋ฅผ ํ‘œ์ค€์œผ๋กœํ•œ๋‹ค.

 

์ตœ๊ทผ์—๋Š” 2015๋…„์— ๋ฐœํ‘œ๋œ 'ES2015(ECMAScript 2015, ES6)'๋ฅผ ํ†ตํ•ด ์ด์ „๊นŒ์ง€๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์— ์—†๋˜ ๊ธฐ๋Šฅ๋“ค์ด ์ถ”๊ฐ€๋˜์—ˆ๋‹ค.

ex) ํด๋ž˜์Šค(Class), ๋ธ”๋ก ์Šค์ฝ”ํ”„(Block Scope), ํ™”์‚ดํ‘œ ํ•จ์ˆ˜(Arrow Function), ๋ชจ๋“ˆ(Module) ๋“ฑ

 

๐Ÿ’ก ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ™œ์šฉ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์ฃผ๋กœ ์›น ๋ธŒ๋ผ์šฐ์ €์—์„œ ์‚ฌ์šฉ๋˜์ง€๋งŒ, 2010๋…„๋Œ€๋ถ€ํ„ฐ๋Š” ์„œ๋ฒ„์—์„œ๋„ ์‚ฌ์šฉํ•˜๋Š” ๊ธฐ์ˆ ์ด ๋๋‹ค. 

โ€ป์„œ๋ฒ„, ๊ฒŒ์ž„, ์Šค๋งˆํŠธํฐ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜, ๋ฐ์Šคํฌํ†ฑ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋“ฑ ๋‹ค์–‘ํ•œ ์ผ์„ ํ•  ์ˆ˜ ์žˆ๋‹ค.

ex) Node.js

  • ๋ผ์ด์–ธ ๋‹ฌ์ด CommonJS ํ‘œ์ค€๊ณผ V8 ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์„ ๊ธฐ๋ฐ˜์œผ๋กœ ๋งŒ๋“ค์—ˆ๋‹ค.
  • Node.js๋Š” ์ด๋ฒคํŠธ ๊ธฐ๋ฐ˜ ๋น„๋™๊ธฐ ๋ฐฉ์‹์œผ๋กœ ์ž‘๋™ํ•˜๊ธฐ์— ๋Œ€๊ทœ๋ชจ ๋„คํŠธ์›Œํฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•˜๋Š”๋ฐ ์ ํ•ฉํ•˜๋‹ค.
  • Node.js์˜ ๋“ฑ์žฅ์œผ๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ๋„ ์›น ์„œ๋ฒ„๋ฅผ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ํ”„๋ก ํŠธ์—”๋“œ, ๋ฐฑ์—”๋“œ์˜ ๊ตฌ๋ถ„ ์—†์ด ์–‘์ชฝ ๋ชจ๋‘์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.


1. ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ

<script> JS์ฝ”๋“œ </script>

2. ๋‹ค๋ฅธ ํŒŒ์ผ์—์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ถˆ๋Ÿฌ์˜ฌ ๋•Œ

<script src="JSํŒŒ์ผ ์ฃผ์†Œ" defer></script>

 

๋Œ“๊ธ€