Skip to content

JavaScript

자바스크립트(JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 사이트에서의 사용으로 많이 알려졌지만, 다른 응용프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 자바스크립트는 본래 넷스케이프 커뮤니케이션즈 코퍼레이션의 브렌던 아이크(Brendan Eich)가 처음에는 모카(Mocha)라는 이름으로, 나중에는 라이브스크립트(LiveScript)라는 이름으로 개발하였으며, 최종적으로 자바스크립트가 되었다. 자바스크립트가 썬 마이크로시스템즈의 자바와 구문(syntax)이 유사한 점도 있지만, 이는 사실 두 언어 모두 C 언어의 기본 구문을 바탕했기 때문이고, 자바와 자바스크립트는 직접적인 관련성이 없다. 이름과 구문 외에는 자바보다 셀프와 유사성이 많다.

2008년 현재, 가장 최근 버전은 자바스크립트 1.8이고, 파이어폭스 3에서 지원된다. 표준 ECMA-262 3판에 대응하는 자바스크립트 버전은 1.5이다. ECMA스크립트는 쉽게 말해 자바스크립트의 표준화된 버전이다. 모질라 1.8 베타 1이 나오면서 XML에 대응하는 확장 언어인 E4X(ECMA-357)를 부분 지원하게 되었다. 자바스크립트는 브라우저마다 지원되는 버전이 다르며, 가장 범용적으로 지원되는 버전은 1.5이다.

Categories

TypeScript

Web API

Java vs JavaScript vs JScript

라이브스크립트의 이름이 자바스크립트로 변경된 것은 대략 넷스케이프가 자사의 넷스케이프 네비게이터 웹 브라우저에 자바 기술에 대한 지원을 포함하기 시작할 즈음이다. 자바스크립트는 1995년 12월 출시된 넷스케이프 2.0B3에서부터 공개, 채택되었다. 자바스크립트라는 이름은 상당한 혼란을 가져왔다. 이것은 자바와 자바스크립트 간에는 구문이 유사하다는 점(양쪽 모두 C에 바탕을 두었기 때문에) 외에는 실제 관련성이 없었기 때문이다. 두 언어는 의미론적으로 매우 다르고, 특히 각각의 객체 모델은 관련성이 없는데다가 상당 부분이 호환되지 않는다.

웹 페이지 향상 언어로서 자바스크립트의 성공에 자극 받은 마이크로소프트는 J스크립트로 알려진 호환 언어를 개발하게 되었다. J스크립트는 1996년 8월에 출시된 인터넷 익스플로러 브라우저 3.0부터 지원 되기 시작했다. IE 브라우저에서의 자바스크립트 사용은 실제로는 J스크립트의 사용을 의미하는 것이었다. 이에 대한 표준화 요구는 ECMA스크립트에 대한 ECMA-262 표준의 기반이 되었으며, 1996년 11월 이후 세 번째 판까지 출판됐다. 자바스크립트와 함께 자주 쓰이는 용어인 DOM은 사실 ECMA스크립트 표준의 일부가 아니며, 그것은 자체로 하나의 표준이고 XML에 기반한다.

Echosystem

JavaScript는 웹 브라우저가 있는 모든 장치에서 작동하는 가장 널리 사용되는 프로그래밍 언어입니다. 지난 10년 동안 JavaScript를 중심으로 거대한 생태계가 구축되었습니다.

  • Webpack: 개발자는 여러 JavaScript 파일을 하나로 묶고 싶었습니다. (번들러)
  • Babel: 개발자들은 구형 브라우저를 지원하면서 최신 JavaScript를 작성하기를 원했습니다. (트랜스컴파일)
  • Terser: 개발자는 가능한 가장 작은 파일 크기를 생성하기를 원했습니다.
  • Prettier: 개발자들은 방금 작동한 독단적인 코드 포맷터를 원했습니다.
  • ESLint: 개발자는 배포하기 전에 코드에서 문제를 찾고 싶었습니다.

수백만 줄의 코드가 작성되었으며 더 많은 버그가 수정되어 오늘날 웹 애플리케이션을 제공하기 위한 기반이 되었습니다. 이 모든 도구는 JavaScript 또는 TypeScript로 작성되었습니다. 이것은 잘 작동했지만 JS로 최대 최적화에 도달했습니다. 이는 웹용 빌드 성능을 크게 향상시키도록 설계된 새로운 종류의 도구에 영감을 주었습니다.

ECMAScript

해당 항목 참조.

Curriculum

JavaScript:Basic 부터 시작.

라이브러리 만드는 방법

Tailwind Elements의 packages.json 참고 하자.

Syntax

Class prototype 

function Apple (type) {
    this.type = type;
    this.color = "red";
    this.getInfo = function() {
        return this.color + ' ' + this.type + ' apple';
    };
}

// Use:
var apple = new Apple('macintosh');
apple.color = "reddish";
alert(apple.getInfo());

class version: 

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}

const square = new Rectangle(10, 10);
console.log(square.area); // 100

프로퍼티가 포함되었는지 확인하는 방법

항목별 표준 객체

값 속성

아래 전역 속성은 간단한 값을 반환하며 속성이나 메서드를 가지고 있지 않습니다.

  • Infinity
  • NaN
  • undefined
  • null 리터럴
  • globalThis

함수 속성

객체에 붙지 않고 전역으로 호출하는 함수로, 반환 값을 호출자에게 바로 반환합니다.

  • eval()
  • uneval() - This API has not been standardized.
  • isFinite()
  • isNaN()
  • parseFloat()
  • parseInt()
  • encodeURI()
  • encodeURIComponent()
  • decodeURI()
  • decodeURIComponent()

Deprecated:

  • escape()
  • unescape()

기초 객체

다른 모든 객체의 기반이 되는 기초이자 기본 객체입니다. 일반 객체, 함수, 오류를 나타내는 객체를 포함합니다.

오류 객체

오류 객체는 기초 객체의 특별한 유형으로, 기본적인 Error 객체와 함께 특정 용도에 최적화된 오류 형태도 포함합니다.

  • Error
  • AggregateError
  • EvalError
  • InternalError
  • RangeError
  • ReferenceError
  • SyntaxError
  • TypeError
  • URIError

숫자 및 날짜

숫자, 날짜, 수학 계산을 나타내는 기본 객체입니다.

  • Number
  • BigInt
  • Math
  • Date

텍스트 처리

문자열을 나타내는 객체로 문자열을 조작할 방법도 제공합니다.

  • String
  • RegExp

인덱스 콜렉션

인덱스 값으로 정렬된 데이터의 콜렉션을 나타냅니다. 배열(형식배열 포함)과 배열형 객체를 포함합니다.

  • Array
  • Int8Array
  • Uint8Array
  • Uint8ClampedArray
  • Int16Array
  • Uint16Array
  • Int32Array
  • Uint32Array
  • Float32Array
  • Float64Array
  • BigInt64Array
  • BigUint64Array

키 콜렉션

키를 사용하는 콜렉션을 나타냅니다. Map, Set 등 순회 가능한 콜렉션은 요소를 삽입 순서대로 순회할 수 있습니다.

  • Map
  • Set
  • WeakMap
  • WeakSet

구조화된 데이터

구조화된 데이터 버퍼 및 JavaScript Object Notation(JSON)을 사용하여 작성한 데이터를 나타내고 상호작용합니다.

제어 추상화 객체

제어 추상화는 코드 구조화에 도움을 줍니다. 특히, 비동기 코드를 (예를 들어) 깊게 중첩된 콜백 함수 없이 작성할 수 있습니다.

리플렉션

  • Reflect
  • Proxy

국제화

ECMAScript 코어에 추가된 언어 구분 기능입니다.

  • Intl
  • Intl.Collator
  • Intl.DateTimeFormat
  • Intl.ListFormat
  • Intl.NumberFormat
  • Intl.PluralRules
  • Intl.RelativeTimeFormat
  • Intl.Locale

WebAssembly

  • WebAssembly
  • WebAssembly.Module
  • WebAssembly.Instance
  • WebAssembly.Memory
  • WebAssembly.Table
  • WebAssembly.CompileError
  • WebAssembly.LinkError
  • WebAssembly.RuntimeError

기타

  • arguments

Events

이벤트의 종류와 의미: (이벤트핸들러는 이벤트 앞에 on을 붙여 준다)

  • blur 포커스를 다른곳으로 옮길 경우
  • click 링크나 폼의 구성원을 클릭할 때
  • change 선택값을 바꿀 경우
  • focus 포커스가 위치할 경우
  • mouseover 마우스가 올라올 경우
  • mouseout 마우스가 떠날 경우
  • mousedown 마우스를 누를 경우
  • mousemove 마우스를 움직일 경우
  • mouseup 마우스를 눌렀다 놓을 경우
  • select 입력양식의 하나가 선택될 때
  • submit 폼을 전송하는 경우
  • load 페이지,윈도우가 브라우져로 읽혀질 때
  • unload 현재의 브라우저,윈도우를 떠날 때
  • error 문서나 이미지에서 에러를 만났을 때
  • reset 리셋 버튼이 눌렸을 때
  • dbclick 더블클릭시
  • dragdrop 마우스 누르고 움직일 경우
  • keydown 키 입력시
  • keypress 키 누를 때
  • keyup 키를 누르고 놓았을 때
  • move 윈도우나 프레임을 움직일 때
  • resize 윈도우나 프레임 사이즈를 움직일 때

메서드:

  • blur() 입력 포커스를 다른 곳으로 이동시킴
  • click() 마우스 버튼이 눌러진 것처럼 해줌
  • focus() 입력 포커스를 준 것처럼 해줌
  • submit() 폼의 submit 버튼을 누른 것처럼 해줌
  • select() 메소드 폼의 특정 입력 필드를 선택함

속성:

  • event.keyCode 누른 키의 ASCII 정수 값
  • event.x 문서 기준 누른 좌표의 left
  • event.y 문서 기준 누른 좌표의 top
  • event.clientX 문서 기준 누른 좌표의 left
  • event.clientY 문서 기준 누른 좌표의 top
  • event.screenX 콘테이너 기준 누른 좌표의 left
  • event.screenY 콘테이너 기준 누른 좌표의 top

브라우저 객체별 이벤트 핸들러:

  • 선택 목록(SELECT) onBlur, onChange, onFocus
  • 문자 필드(TEXT) onBlur, onChange, onFocus, onSelect
  • 문자 영역(TEXTAREA) onBlur, onChange, onFocus, onSelect
  • 버튼(BUTTON) onClick
  • 체크박스(CHECKBOX) onClick
  • 라디오 버튼(RADID) onClick
  • 링크 onClick, onMouseover
  • RESET 버튼(RESET) onClick
  • SUBMIT 버튼(BUTTON) onClick
  • DOCUMENT onLoad, onUnload
  • WINDOW onLoad, onUnload
  • 폼(FORM) onSubmit

DOMContentLoaded/Load/BeforeUnload/Unload

HTML 문서의 생명주기엔 다음과 같은 3가지 주요 이벤트가 관여합니다.

  • DOMContentLoaded – 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생합니다. 이미지 파일(<img>)이나 스타일시트 등의 기타 자원은 기다리지 않습니다.
  • load – HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생합니다.
  • beforeunload/unload – 사용자가 페이지를 떠날 때 발생합니다.

세 이벤트는 다음과 같은 상황에서 활용할 수 있습니다.

  • DOMContentLoaded – DOM이 준비된 것을 확인한 후 원하는 DOM 노드를 찾아 핸들러를 등록해 인터페이스를 초기화할 때
  • load – 이미지 사이즈를 확인할 때 등. 외부 자원이 로드된 후이기 때문에 스타일이 적용된 상태이므로 화면에 뿌려지는 요소의 실제 크기를 확인할 수 있음
  • beforeunload – 사용자가 사이트를 떠나려 할 때, 변경되지 않은 사항들을 저장했는지 확인시켜줄 때
  • unload – 사용자가 진짜 떠나기 전에 사용자 분석 정보를 담은 통계자료를 전송하고자 할 때

Tip

기본적으로 디버깅은 아래 함수를 사용하면 된다. 

console.log(...);
console.error(...);
console.info(...);
console.warn(...);

for...of vs for...in

for...of
반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성합니다.

: 

const array1 = ['a', 'b', 'c'];
for (const element of array1) {
  console.log(element);
}

// "a"
// "b"
// "c"
for...in
상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다. (Symbol로 키가 지정된 속성은 무시합니다.)

: 

const array1 = ['a', 'b', 'c'];
for (const element in array1) {
  console.log(element);
}

// "0"
// "1"
// "2"

Remove element in array 

array.splice(index, 1);

Number sort

sort() 메서드는 배열의 요소를 In-Place에서 정렬하고 정렬된 배열을 반환합니다. 기본 정렬 순서는 오름차순이며 요소를 문자열로 변환한 다음 UTF-16 코드 단위 값의 시퀀스를 비교합니다.

정렬의 시간 및 공간 복잡성은 구현에 따라 달라지므로 보장할 수 없습니다. 

var score = [4, 11, 2, 10, 3, 1]; 

/* 오류 */
score.sort(); // 1, 10, 11, 2, 3, 4 
              // ASCII 문자 순서로 정렬되어 숫자의 크기대로 나오지 않음

/* 정상 동작 */
score.sort(function(a, b) { // 오름차순
    return a - b;
    // 1, 2, 3, 4, 10, 11
});

score.sort(function(a, b) { // 내림차순
    return b - a;
    // 11, 10, 4, 3, 2, 1
});

module.exports vs exports

require 키워드는 object 를 반환합니다. 그리고 module.exports 와 exports 는 Call by reference 로 동일한 객체를 바라보고 있고, 리턴되는 값은 항상 module.exports 입니다.

모듈은 기본적으로 객체이고, 이 객체를 module.exports, exports 모두 바라보고 있는데, 최종적으로 Return 되는 것은 무조건 module.exports 라는 것입니다. 

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res) {
    res.render('index', { title: 'Express' });
});

module.exports = router;

위의 소스는 다음과 같이 해석할 수 있습니다. express.Router() 가 리턴한 "객체"에 일부 프로퍼티를 수정한 뒤, 이 객체 자체를 모듈로 리턴한 것입니다.

'use strict'

strict 모드는 ES5(ECMA Script 5)에 추가된 키워드입니다.

strict 모드는 자바스크립트가 묵인했던 에러들의 에러 메시지를 발생시킵니다. 엄격하게 문법 검사를 하겠다.. 로 이해하면 될 것 같습니다.

스크립트의 시작 혹은 함수의 시작 부분에 "use strict"(또는 'use strict')를 선언하면 strict 모드로 코드를 작성 할 수 있습니다.

with keyword

비유하면, C++의 namespace와 같은 의미로 사용할 수 있다.

Import에 있는 @ 심볼

config.json과 같은 파일에서 치환되는 문자열로 사용될 수 있다. 

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
    '@': path.join(__dirname, '..', dir)
    }
},

모바일 기기의 onClick

모바일에서는 이벤트 등에 javascript를 반드시 기술해야 한다. 

<!-- ... -->
<a href="javascript:funcBoo()">클릭</a>
<!-- ... -->
<span onclick="javascript:funcBoo()">클릭</span>
<!-- ... -->

Equal to(==) vs Strict equal(===)

typeof vs instanceof

typeof는 리턴 값으로는 해당하는 변수의 primitive 타입을 문자열로 준다. 돌려주는 primitive 타입의 종류는 아래와 같다.

  • 'undefined'
  • 'boolean'
  • 'number'
  • 'string'
  • 'object'
  • 'function'

위의 기본 형식 중 하나를 스트링 형태로 리턴하기 때문에 어떠한 형인지 스트링으로 구분을 하면 된다. 즉, typeof를 사용해서 object인지 아닌지를 판별하는 경우 아래와 같이 하면 된다. 

if(typeof yourVariable === 'object') {
    /* 오브젝트 처리 */
}

instanceof는 prototype으로 "비교"한다.

Default condition check

조건문에 그냥 넣었을 때 (if (statements) { ... }) 어떻게 되는지 알고는 있자. 비교 테이블:

Statements

Result

undefined

false

null

false

Empty Array object (e.g. new Array<string>())

true

Empty Map object (e.g. new Map<string, string>())

true

Empty String object (e.g. new String())

true

Empty object (e.g. {})

true

Empty string (e.g. "")

false

0

false

var, let, const

각각의 차이점은 다음과 같다:

  • var: Function scoped, mutable
  • let: Block scoped, mutable
  • const: Block scoped, immutable

(function(global){...})(this)

The function is immediately executed, you do not execute it by calling it. 

(function(global) {
    // the function code comes here
})(this);

소수점 이하 제거

아래와 같이 비트연산으로 제거할 수 있다. 

console.log(0.5 | 0); // 0
console.log(-1 | 0);  // -1
console.log(1 | 0);   // 1

fmt 스타일의 포맷팅 문자열 

console.log(`This is ${soMany} times easier!`);

To JSON String

JSON.stringify() 메소드(method)는 자바스크립트 값을 JSON 문자열로 변환하고, 리플레이서(replacer) 함수가 지정되어있을 때 선택적으로 바꾸거나, 리플레이서 배열이 지정되어있을 때 지정된 속성만 선택적으로 포함할 수 있다. 

JSON.stringify(obj);

숫자 3자리(천단위) 마다 콤마 찍는 방법

정규식(Regular Expression) 이용하기: 

const n1 = 12345.6789;
const n2 = -12345.6789;

const cn1 = n1.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ","); // 12,345.6789
const cn2 = n2.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ","); // -12,345.6789

toLocaleString 함수 사용. 

const n1 = 12345.6789;
const n2 = -12345.6789;

const cn1 = n1.toLocaleString('ko-KR'); // 12,345.679
const cn2 = n2.toLocaleString('ko-KR'); // -12,345.679

Select content 

function selectText(containerid) {
    if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(containerid));
        range.select();
    } else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(document.getElementById(containerid));
        window.getSelection().addRange(range);
    }
}

Style animation Property 

// Code for Safari 4.0 - 8.0
document.getElementById("myDIV").style.WebkitAnimation = "mynewmove 4s 2";

// Standard syntax
document.getElementById("myDIV").style.animation = "mynewmove 4s 2";

XMLHttpRequest send 

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <script>
    function onLoad() {
        var oReq = new XMLHttpRequest();
        oReq.addEventListener("load", function() {
            console.log('Response Text:');
            console.log(this.responseText);
        });
        oReq.open("GET", "test2.html");
        oReq.send();
    }
    </script>
</head>
<body onload='onLoad()'>
</body>
</html>

Errors

javascript 에서 자주 접하는 에러 목록이다:

  • Uncaught TypeError: Cannot read property - ...
  • TypeError: 'undefined'is not an object (evaluating - ...
  • TypeError: null is not an object (evaluating - ...
  • (unknown): Script error - ...
  • TypeError: Object doesn't support property - ...
  • Type Error: 'undefined' is not a function - ...
  • Uncaught RangeError: Maximum call stack - ...
  • TypeError: Cannot read property 'length' - ...
  • Uncaught TypeError: Cannot set property - ...
  • ReferenceError: event is not defined - ...

빌드 시스템 없이 자바스크립트 라이브러리를 사용하는 방법

빌드 시스템 없이 자바스크립트를 작성하려면 라이브러리를 가져오는 과정이 복잡할 수 있음. 많은 라이브러리가 설정 방법에 대해 빌드 시스템 사용을 전제로 작성하기 때문.

  • 자바스크립트 라이브러리가 제공하는 세 가지 주요 파일 형식
  • 라이브러리의 빌드 파일에서 파일 형식을 확인하는 방법
  • 각 파일 형식을 가져오는 방법

Example

Javascript 예제코드를 정리한다.

Hello world 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
    <title>자바스크립트 페이지</title>
    <script type="text/javascript">
        document.write("<p>Hello World!</p>");
    </script>
</head>
<body>
    <noscript> 
    <p>브라우저가 자바스크립트 기능을 지원하지 않거나 자바스크립트 기능이 꺼져 있습니다.</p>
    </noscript>
</body>
</html>

SPA 라우팅 시스템 구현

async function 

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  const result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: "resolved"
}

asyncCall();

월의 마지막 날 구하기 

// 3월 1일
let date = new Date(2019, 2, 1);
document.write(date.toLocaleString()  + '<br>');

// 2월 28일(말일)
let lastDate = new Date(2019, 2, 0);
document.write(lastDate.toLocaleString()  + '<br>');
document.write(lastDate.getDate() + '<br>');

// 2월 27일
let lastDateBefore = new Date(2019, 2, -1);
document.write(lastDateBefore.toLocaleString()  + '<br>');

RGB to HEX convert 

function componentToHex(c: number) {
  const hex = c.toString(16);
  return hex.length == 1 ? '0' + hex : hex;
}

function rgbToHex(r: number, g: number, b: number) {
  return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

function hexToRgb(hex: string) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16),
  } : undefined;
}

Video PlayList Autoplay 

let videoSource = new Array();
videoSource[0] = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4';
videoSource[1] = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4';
let i = 0; // global
const videoCount = videoSource.length;
const element = document.getElementById("videoPlayer");

function videoPlay(videoNum) {
    element.setAttribute("src", videoSource[videoNum]);
    element.autoplay = true;
    element.load();
}
document.getElementById('videoPlayer').addEventListener('ended', myHandler, false);

videoPlay(0); // load the first video
ensureVideoPlays(); // play the video automatically

function myHandler() {
    i++;
    if (i == videoCount) {
        i = 0;
        videoPlay(i);
    } else {
        videoPlay(i);
    }
}

function ensureVideoPlays() {
    const video = document.getElementById('videoPlayer');

    if(!video) return;

    const promise = video.play();
    if(promise !== undefined){
        promise.then(() => {
            // Autoplay started
        }).catch(error => {
            // Autoplay was prevented.
            video.muted = true;
            video.play();
        });
    }
}

Documentation

JavaScript - The Good Parts
http://bdcampbell.net/javascript/book/javascript_the_good_parts.pdf
Javascript_the_good_parts.pdf

Troubleshooting

앱 배포 후 브라우저 캐시를 클리어하지 않으면 최신버전으로 갱신되지 않는 현상

Cache Busting 항목 참조.

See also

Favorite site

Tutorials

Guide

문제

Debugging

Article

References

  1. JavaScript:Libraries, JavaScript:Library, Node.js:Libraries, Npm:Libraries, Node:Libraries, TypeScript:Libraries, CSS:Libraries, HTML:Libraries, WebProgramming:Libraries, Frontend:Libraries 모두 동일한 페이지로 링크된다. ↩

  2. Looah_-_How_it_feels_to_learn_JavaScript_in_2016.pdf ↩

  3. Vanilla_JS_-spa_route_tutorial-_Dev_DY.pdf ↩

  4. JavaScript_Garden.pdf ↩

  5. Deadfire_hihome_com.7z ↩

  6. Math88_com_ne_kr-computer-js-JSmanual.zip ↩

  7. A_Study_Plan_To_Cure_JavaScript_Fatigue_-_ko.pdf ↩

  8. Meetup_TOAST_Cloud_-_JavaScript_and_Event_Loop.pdf ↩

  9. Create_the_latest_JavaScript_web_frontend_development_environment_with_Webpack_and_Babel.pdf ↩

  10. Looah_-_How_it_feels_to_learn_JavaScript_in_2016.pdf ↩

  11. Javascript-audio-effectors-practice_-_Evans_Library.pdf ↩