์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 

ํด๋ฆฐ์—… JavaScript: ์ ํ”„์—…!

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ตœ์ข… ์ฝ”์Šค! ES2025 ๊ธฐ์ค€ ์‹คํ–‰ ์ฝ˜ํ…์ŠคํŠธ ๊ตฌ์กฐ์™€ ๋ฐฉ๋ฒ•, Event Loop, ๋ฉ€ํ‹ฐ ์Šค๋ ˆ๋”ฉ์„ ๋‹ค๋ฃน๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์–ธ์–ด์— ๋‹ด๊ฒจ์ง„ ์–ธ์–ด ๋ฌธํ™”๋ฅผ ๋‹ค๋ฃน๋‹ˆ๋‹ค.

35๋ช… ์ด ์ˆ˜๊ฐ•ํ•˜๊ณ  ์žˆ์–ด์š”.

Thumbnail

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด, JavaScript] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ

  • ์‹คํ–‰ ์ฝ˜ํ…์ŠคํŠธ(ES2025 ๊ธฐ์ค€)

  • ๋™๊ธฐ, ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ

  • Event Loop

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ณ‘๋ ฌ ์ฒ˜๋ฆฌ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ตœ์ข… ์ฝ”์Šค! ES2025 ๊ธฐ์ค€ ์‹คํ–‰ ์ฝ˜ํ…์ŠคํŠธ ๊ตฌ์กฐ์™€ ๋ฐฉ๋ฒ•,
Event Loop, ๋ฉ€ํ‹ฐ์Šค๋ ˆ๋”ฉ์„ ๋‹ค๋ฃน๋‹ˆ๋‹ค.


์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๊ฐ•์˜ ๋‚ด์šฉ๋ณด๋‹ค ๋” ์–ด๋ ต๊ฑฐ๋‚˜ ๊นŠ์€ ๋‚ด์šฉ์€ ์—†์Šต๋‹ˆ๋‹ค.
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์–ธ์–ด์— ๋‹ด๊ฒจ์ง„ ์–ธ์–ด ๋ฌธํ™”๋ฅผ ๋‹ค๋ฃน๋‹ˆ๋‹ค.

ํด๋ฆฐ์—… ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์ƒ๊ฐ์„ ๋‹ค๋ฃน๋‹ˆ๋‹ค! ๐Ÿง 

  • ๊ฐ•์ขŒ์˜ ์ฃผ์ œ๊ฐ€ ์–ด๋ ต์ง€ ์•Š์ง€๋งŒ ๋„“๊ณ  ๊นŠ์œผ๋ฉด์„œ ์ž์„ธํ•˜๊ฒŒ ์ƒ๊ฐ์„ ๋งŽ์ด ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์•„๋ฆ„๋‹ค์›€์„ ์Œ๋ฏธํ•˜๊ณ  ์ƒ๊ฐํ•˜๋Š” ์‹œ๊ฐ„์ด ๋˜์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์–ธ์–ด์˜ ๋ถ€๋“œ๋Ÿฌ์›€์„ ๊ณฑ์”น์–ด ๋ณด๋Š” ์‹œ๊ฐ„์ด ๋˜์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค

  • ์šฉ์–ด ํ•˜๋‚˜, ๋ฌธ๋งฅ ํ•˜๋‚˜์— ๋‹ด๊ฒจ์ง„ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๊นŠ์ด, ๋„ˆ๋น„, ์ƒ์„ธ๋ฅผ ๊นจ๋—ํ•˜๊ฒŒ ์ •๋ฆฌ(ํด๋ฆฐ์—…)ํ•˜๋Š” ์‹œ๊ฐ„์ด ๋˜์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค

  • ์ƒ๊ฐ์„ ์œ„ํ•œ, ์Œ๋ฏธ๋ฅผ ์œ„ํ•œ, ๊นŠ์ด/๋„ˆ๋น„/์ƒ์„ธ๋ฅผ ํด๋ฆฐ์—…ํ•  ์ˆ˜ ์žˆ๋Š” ์ฃผ์ œ๋ฅผ ๊ฐ•์ขŒ์— ๋“ฌ๋ฟ ๋‹ด์•˜์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๋‚ด์šฉ์„ ๋ฐฐ์›Œ์š”!

ํด๋ž˜์Šค(Class)

๊ฐ์ฒด ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ฐœ์š”
Class์™€ prototype, Class ์ƒ์† ํ”Œ๋กœ์šฐ
Class ์ƒ์† ๊ตฌ์กฐ, prototype chain

this ์ฐธ์กฐ

์Šค์ฝ”ํ”„ ๋ชฉ์ , Object์™€ this ์ฐธ์กฐ
ํ•จ์ˆ˜์—์„œ this ์ฐธ์กฐ, Class์™€ this ์ฐธ์กฐ
this ์ฐธ์กฐ ๋ฐ”์ธ๋”ฉ: bind(), ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ, ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ
this ์ฐธ์กฐ ๋ณ€๊ฒฝ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ OOP
OOP ํŠน์„ฑ๊ณผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ: ์ถ”์ƒํ™”, ์ƒ์†, ๋‹คํ˜•์„ฑ, ์บก์Аํ™”
์ธ์Šคํ„ด์Šค ๋ชฉ์ 

Function Object

Function Object ๊ตฌ์„ฑ
[[SourceText]], [[ECMAScriptCode]] ์Šฌ๋กฏ
[[FormalParameters]], [[Environment]], [[ThisMode]] ์Šฌ๋กฏ

์‹คํ–‰ ์ฝ˜ํ…์ŠคํŠธ

์ƒํƒœ ์ปดํฌ๋„ŒํŠธ, ํด๋กœ์ €
Environment Record, Declarative Environment Record
scope chain๊ณผ ์‹๋ณ„์ž ํ•ด๊ฒฐ, ์‹๋ณ„์ž ํ•ด๊ฒฐ ๋ฉ”์ปค๋‹ˆ์ฆ˜

๋™๊ธฐ, ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ

๋™๊ธฐ ์ฒ˜๋ฆฌ ํ˜•ํƒœ์™€ ์„ค๋ช…
๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ๋ชฉ์ , Ajax ๋ชฉ์ 
๋น„๋™๊ธฐ ํ†ต์‹ /์ทจ์†Œ ํ˜•ํƒœ์™€ ์„ค๋ช…, ํ†ต์‹  ์ฝ”๋“œ ๋ฆฌํŒฉํ„ฐ๋ง

Promise Object

Promise ์ฒ˜๋ฆฌ ์ˆœ์„œ, Promise Object ํŠน์ง•, ๋น„๋™๊ธฐ๋กœ ์‹คํ–‰ํ•˜๋Š” ์ด์œ 
withResolvers() ํ•จ์ˆ˜, withResolvers()์™€ Class
Promise์™€ fetch()

Event Loop

์ฝœ๋ฐฑ ํ•จ์ˆ˜ ์‹คํ–‰ ์ˆœ์„œ
User Agent, Agent ๊ฐœ๋…
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Agent(์Šค๋ ˆ๋“œ) ๊ตฌ์„ฑ, ์›น ํ”Œ๋žซํผ์˜ Agent(์Šค๋ ˆ๋“œ) ํƒ€์ž…
Event Loop, Task Queue
Microtask Queue, queueMicrotask()

Number ์ฒ˜๋ฆฌ ๋ฐฉ๋ฒ•

Number Object, BigInt Object
TypedArray Object, ArrayBuffer Object, ArrayBuffer View
TypedArray Object ํ™œ์šฉ
DataView Object

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ณ‘๋ ฌ ์ฒ˜๋ฆฌ

SharedArrayBuffer Object, SharedArrayBuffer ํ”Œ๋กœ์šฐ
SharedArrayBuffer ๊ณ ๋ ค์‚ฌํ•ญ
Atomics Object
Atomic wait ํ”Œ๋กœ์šฐ, Atomic notify ํ”Œ๋กœ์šฐ

์ˆ˜๊ฐ• ์ „ ์ฐธ๊ณ  ์‚ฌํ•ญ

์‹ค์Šต ํ™˜๊ฒฝ

  • ํฌ๋กฌ ๋ธŒ๋ผ์šฐ์ €, VS Code

ํ•™์Šต ์ž๋ฃŒ

  • ๊ฐ•์ขŒ์—์„œ ์„ค๋ช…ํ•˜๋Š” ์†Œ์Šค ํŒŒ์ผ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค

  • ๊ฐ•์˜ ์ž๋ฃŒ๋Š” ์ œ๊ณตํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค

์„ ์ˆ˜ ์ง€์‹ ๋ฐ ์œ ์˜์‚ฌํ•ญ

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ์ดˆ ๋ฌธ๋ฒ•


์—ฐ๊ด€ ๊ฐ•์˜ ๋กœ๋“œ๋งต์„
ํ•จ๊ป˜ ํ•™์Šตํ•ด๋ณด์„ธ์š”.


์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ค‘๊ณ ๊ธ‰ ๋‚ด์šฉ์„ ๊นŠ๊ณ  ๋„“๊ฒŒ ์ •๋ฆฌํ•˜๋ ค๋Š” ๊ฐœ๋ฐœ์ž

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์•„๋Š” ๊ฒƒ ๊ฐ™์€๋ฐ, ๋ฐ”ํƒ•์ด ์•ฝํ•˜๋‹ค๊ณ  ์ƒ๊ฐ์ด ๋“œ๋Š” ๊ฐœ๋ฐœ์ž

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ดˆ๊ธ‰ ์ด์ƒ

  • ํด๋ฆฐ์—… JavaScript: ๋ฒ ์ด์Šค ๋นŒ๋“œ์—…์˜ ์—ฐ์† ๊ฐ•์ขŒ์ž…๋‹ˆ๋‹ค

์•ˆ๋…•ํ•˜์„ธ์š”
๊น€์˜๋ณด์ž…๋‹ˆ๋‹ค.

9,511

๋ช…

์ˆ˜๊ฐ•์ƒ

369

๊ฐœ

์ˆ˜๊ฐ•ํ‰

336

๊ฐœ

๋‹ต๋ณ€

4.8

์ 

๊ฐ•์˜ ํ‰์ 

12

๊ฐœ

๊ฐ•์˜

์†Œํ”„ํŠธ์›จ์–ด ๊ฐœ๋ฐœ์„ ์ข‹์•„ํ•˜๋Š” ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค.

๋ฉ”์ผ: tonextday@gmail.com

๋™์˜์ƒ: 12๊ฐœ
ํด๋ฆฐ์—… ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ: ์ ํ”„์—…
ํด๋ฆฐ์—… ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ: ๋ฒ ์ด์Šค ๋นŒ๋“œ์—…
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋น„๊ธฐ๋„ˆ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ค‘๊ณ ๊ธ‰
๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(ES6+) ๊ธฐ๋ณธ, ๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(ES6+) ์‹ฌํ™”
DOM ๊ธฐ๋ณธ, DOM ์ธํ„ฐ๋ž™์…˜
React ๋น„๊ธฐ๋„ˆ, React ์™„์ „ ๋๋‚ด๊ธฐ
์š”๊ตฌ๋ถ„์„ ๊ตฌํ˜„ ๋ฐฉ๋ฒ•
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋จธ์‹ ๋Ÿฌ๋‹ TensorFlow.js

์ €์„œ: 9๊ถŒ
๋ชฐ์ž…! ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ
ECMAScript 6
HTML5
DOM ์Šคํฌ๋ฆฝํŒ…
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ •๊ทœํ‘œํ˜„์‹
์š”๊ตฌ๋ถ„์„์„ ์œ„ํ•œ Event Process ๋ชจ๋ธ๋ง
๋จธ์‹ ๋Ÿฌ๋‹ TensorFlow.js,
Ajax ํ™œ์šฉ, prototype.js ์™„์ „๋ถ„์„  
9๊ถŒ ์ค‘์—์„œ 8๊ถŒ์€ ๊ตญ๋‚ด ์ตœ์ดˆ ์ €์ž์ž…๋‹ˆ๋‹ค.
ํŠนํžˆ, "๋จธ์‹ ๋Ÿฌ๋‹ TensorFlow.js JavaScript"๋Š” ์ถœํŒํ•˜๋Š” ์‹œ์ ์— amazon.com์— ๊ด€๋ จ๋œ ์ฑ…์ด ์—†์—ˆ์Šต๋‹ˆ๋‹ค.

 

 

๋”๋ณด๊ธฐ

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

69๊ฐœ โˆ™ (4์‹œ๊ฐ„ 34๋ถ„)

ํ•ด๋‹น ๊ฐ•์˜์—์„œ ์ œ๊ณต:

์ˆ˜์—…์ž๋ฃŒ
๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!