lil.dev
Published on

๐ŸŽ‰ JS(1)-๋“œ๋ฆผ์ฝ”๋”ฉ ๊ฐ•์˜ ์ •๋ฆฌ

๊ธ€์“ด์ด

    ๐Ÿ“Œ ๋ชฉ์ฐจ

    Welcome

    โœจ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ์ดˆ ๊ฐ•์˜ (ES5+): ๊ฐ™์ด ๋…ธํŠธ๋ฅผ ์ž‘์„ฑํ•˜๋ฉฐ ๋ฐฐ์›Œ์š” ๐Ÿ“’

    ๐Ÿ’๐Ÿป

    1. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์—ญ์‚ฌ์™€ ๋ชฉ์  ๋ฐ ๋™ํ–ฅ
    2. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋™์ž‘์›๋ฆฌ

    1. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์—ญ์‚ฌ(1๊ฐ•)

    ์ƒˆ๋กœ์šด ์–ธ์–ด๋ฅผ ๋ฐฐ์šธ ๋•Œ๋Š” ๋ฐ”๋กœ ๋ฌธ๋ฒ•์— ์ „๋…ํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค
    ๊ทธ ์–ธ์–ด์˜ ํƒ„์ƒ๋ฐฐ๊ฒฝ์— ๋Œ€ํ•ด ์ดํ•ดํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•˜๋‹ค

    • ์–ด๋–ป๊ฒŒ ํƒ„์ƒํ–ˆ์œผ๋ฉฐ
    • ์–ด๋–ค ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ๋งŒ๋“ค์–ด์กŒ์œผ๋ฉฐ
    • ์ด ์–ธ์–ด๋ฅผ ์—ฐ๋งˆํ–ˆ์„ ๋•Œ ์–ด๋–ค ๋ถ„์•ผ์— ๋” ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋Š”์ง€, ์ด์ต์€ ๋ฌด์—‡์ธ์ง€ ๋ฅผ ์ดํ•ดํ•ด์•ผ ๊ณต๋ถ€๋ฐฉ๋ฒ•์ด ๋ช…ํ™•ํ•ด์ง„๋‹ค.
    1.  ๋งˆํฌ ์•ค๋”์Šจ์ด ์ •์ ์ธ ์›น์‚ฌ์ดํŠธ์—์„œ ์ข€ ๋” ๋™์ ์ธ ์›น์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด
        Scripting ์–ธ์–ด๋ฅผ ์ถ”๊ฐ€ํ•˜๊ธฐ๋กœ ๊ฒฐ์‹ฌ
    
    2.  ๋ธŒ๋žœ๋“  ์•„์ดํฌ์˜ ์Šคํ‚ด ์Šคํฌ๋ฆฝํŠธ ์–ธ์–ด์˜ ์ปจ์…‰์„ ๊ฐ€์ ธ์˜ค๋˜ ๋ฌธ๋ฒ•์€ ์ž๋ฐ”์Šคํƒ€์ผ๋กœ
        ์Šคํฌ๋ฆฝํŠธ ์–ธ์–ด๋ฅผ ๋งŒ๋“ค๊ธฐ๋กœ ํ–ˆ๊ณ  1994๋…„์— ๋ผ์ด๋ธŒ์Šคํฌ๋ฆฝํŠธ ์–ธ์–ด๊ฐ€ ์ถœ์‹œ๋จ.
        ๋ผ์ด๋ธŒ์Šคํฌ๋ฆฝํŠธ์˜ ์ธ๊ธฐ๋ฅผ ๋Œ๊ธฐ์œ„ํ•ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์ด๋ฆ„์„ ๋ณ€๊ฒฝํ•ด์„œ 1995๋…„ ์ถœ์‹œ.
        ๋งˆ์ดํฌ๋กœ์†Œํ”„ํŠธ์‚ฌ๊ฐ€ ๋„ท์Šค์ผ€์ดํ”„์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ Reverse Engineeringํ•ด์„œ
        ์ฝ”๋“œ๋ฅผ ๊ณ ๋Œ€๋กœ ๋ฒ ๊ปด์™€ Jscript๋ฅผ ์ถœ์‹œํ•จ.
    
    3.  ๋‘ ์–ธ์–ด๊ฐ€ ๊ฒฝ์Ÿ์„ ํ•˜๋‹ค๊ฐ€ ์ฐธ๋‹ค๋ชปํ•œ ๋„ท์Šค์ผ€์ดํ”„๋Š” ECMA๋ฅผ ์ฐพ์•„๊ฐ€
        1997๋…„ ์ฒซ๋ฒˆ์งธ ECMAScript ์–ธ์–ด ์ •์˜ ๋ฌธ์„œ๊ฐ€ ๋‚˜์™”๊ณ 
        ๊ทธ๋’ค๋กœ ๊ณ„์† ๋ฒ„์ „์ด ์—…๋ฐ์ดํŠธ ๋˜๊ณ  ์žˆ์Œ
        ๊ทธ๋ž˜์„œ ๋งˆ์ดํฌ๋กœ์†Œํ”„ํŠธ๋Š” ์ด ํ‘œ์ค€ํ™”์— ๋งž์ถ”์ง€ ์•Š๊ณ  ๋–จ์–ด์ ธ๋‚˜์˜ค๊ฒŒ ๋˜๋Š”๋ฐ
        2004๋…„ ๋ชจ์งˆ๋ผ์˜ Firefox๊ฐ€ ECMA์— ๋งž์ถฐ ๋‹ค์‹œ ํ‘œ์ค€ํ™”๋ฅผ ์‹œ๋„ํ•˜๊ฒŒ ๋œ๋‹ค.
    
    4.  2004๋…„ ์ œ์‹œ ์ œ์ž„์Šค๊ฐ€ AJAX(๋น„๋™๊ธฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ)์„ ๋‚ด๋†“๊ณ 
        ์‹œ์žฅ์— ๋‹ค๋ฅธ ๋ธŒ๋ผ์šฐ์ €๋“ค๋„ ๋‚˜์˜ค๊ฒŒ ๋˜๋ฉด์„œ
        ์›น ์‹œ์žฅ์ด ์ปค์ง€๊ณ , ๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ๊ฐ€ ์ƒ๊ฒจ๋‚˜๋ฉฐ ์ ์  ์ปค์ง€๊ฒŒ ๋œ๋‹ค.
        ์ด๋“ค์„ ์œ„ํ•œ API ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ(jQuery, dojo,mooTools)๊ฐ™์€๊ฒŒ ๋‚˜์˜ค๊ฒŒ ๋˜๋ฉด์„œ
        ๊ฐœ๋ฐœ์ž๋“ค์€ ํ‘œ์ค€ํ™” ๊ฑฑ์ •์—†์ด API๋ฅผ ํ†ตํ•ด ๊ฐœ๋ฐœ์„ ํ•  ์ˆ˜ ์žˆ๊ฒŒ๋˜์—ˆ๋‹ค.
    
    5.  2008๋…„ ๊ตฌ๊ธ€์—์„œ ํฌ๋กฌ์ด๋ผ๋Š” ๋ธŒ๋ผ์šฐ์ €๋ฅผ ๋งŒ๋“ค๊ฒŒ ๋˜๋ฉด์„œ
        JIT(just-in-time compilation)๋ผ๋Š” ์ •๋ง ๊ฐ•๋ ฅํ•œ ์—”์ง„์ด ํฌํ•จ๋œ
        ๋ธŒ๋ผ์šฐ์ €๋ฅผ ๋‚ด๋†“์Œ -> ๋‹ค๋ฅธ ๋ธŒ๋ผ์šฐ์ €๋“ค์ด ์œ„๊ธฐ์˜์‹์„ ๋Š๋‚Œ
        ๊ทธ๋ž˜์„œ ๋“œ๋””์–ด 2008๋…„ 7์›”์— ์—ฌ๋Ÿฌ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋ญ‰์ณ ํ‘œ์ค€ํ™”๋ฅผ ์˜๋…ผํ•˜๊ฒŒ ๋จ.
        2009๋…„ ECMAScript5 / 2015๋…„ ECMAScript6๊ฐ€ ๋‚˜์˜ด
    
    6.  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์ด์ œ ์ž˜ ์ •์ฐฉ๋œ ์–ธ์–ด๋กœ ๋‹ค๋ฅธ ๋ธŒ๋ผ์šฐ์ €๋„ ํ‘œ์ค€ํ™”๋ฅผ ์ž˜ ๋”ฐ๋ผ๊ฐ€๋ฏ€๋กœ
        ์ด์ œ jQuery๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์—†์ด ๋ฐ”๋กœ API๋ฅผ ํ†ตํ•ด
        ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ž˜ ๋™์ž‘ํ•˜๋Š” ์›น์„ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค.
    
    7.  ๋ธŒ๋ผ์šฐ์ €์—๋Š” ๋‹ค์–‘ํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„๋“ค์ด ์žˆ๋Š”๋ฐ
        V8์„ ํฌ๋กฌ์ด ๋‚ด๋†“์œผ๋ฉด์„œ node์™€ ELECTRON ๋ฐ ๋งˆ์ดํฌ๋กœ์†Œํ”„ํŠธ๊ฐ€ ์ด ์—”์ง„์„ ์ด์šฉํ•œ๋‹ค.
    
    8.  ์ตœ์‹ ๋ฒ„์ „์˜ ECMAScript6๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๊ฐœ๋ฐœํ›„ Babel ์ปดํŒŒ์ผ๋Ÿฌ๋ฅผ ํ†ตํ•ด ๋ณ€ํ™˜ํ•œ๋‹ค.
    

    ์š”์ฆ˜์˜ ๋™ํ–ฅ

    SPA(Single Page Application)

    ํ•˜๋‚˜์˜ ํŽ˜์ด์ง€ ์•ˆ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์™€์„œ ํ•„์š”ํ•œ ๋ถ€๋ถ„๋งŒ ๋ถ€๋ถ„์ ์œผ๋กœ ์—…๋ฐ์ดํŠธํ•˜๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ด๋ฅผ ๋” ์‰ฝ๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด React,Vue,Angular,Backbone๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ,ํ”„๋ ˆ์ž„์›Œํฌ๋“ค์ด ๋‚˜์˜ด

    node.js

    V8 ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์„ ์ด์šฉํ•ด ๋ฐฑ์—”๋“œ์—์„œ ์„œ๋น„์Šค๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“  ๋„๊ตฌ

    WA(Web Assembly)

    ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋™์ž‘ํ•  ์ˆ˜ ์žˆ๋Š” ์–ธ์–ด๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์œ ์ผํ–ˆ๋Š”๋ฐ ์š”์ฆ˜์—” WA๋ผ๋Š” ์–ธ์–ด๊ฐ€ ๋‚˜์™€์„œ Rust,C,C# ๋“ฑ์„ ํ†ตํ•ด ์›น์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“œ๋Š”๊ฒŒ ๊ฐ€๋Šฅํ•ด์กŒ๋‹ค.