JavaScript & Node.js
입문자를 위한 웹 프론트엔드 2
JavaScript?
멀티 패러다임 언어
스크립트 언어
ECMAScript
범용 스크립트 언어
ECMAScript
JavaScript in Browser
HTML
CSS
JS
Structure
Design
Action
JavaScript in Browser
Window
DOM
Document Object Model
BOM
Browser Object Model
JavaScript in Browser
document.body.append("text");
var p = document.createElement("p");
p.textContent = "text";
document.body.appendChild(p);
document.querySelector("p");
document.querySelectorAll("p");
Browser Rendering
Browser Rendering
Node.js
자바스크립트 실행 도구
JavaScript outside of Browser
NPM
// package.json
{
"name": "app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Task Runner
Compatibility
https://dontkry.com/posts/comics/roommates.html
Transpiler
Bunlder
var, let, const
var x = 0;const z = 0;let y = 0;function vs arrow function
function print(string) {
console.log(string);
}
print("hello");
const print = (string) => {
console.log(string);
};
print("hello");
lexical scoping
var x = "hello";
function log() {
console.log(x);
}
function main() {
x = "world";
log();
}
var x = "hello";
function log() {
console.log(x);
}
function main() {
var x = "world";
log();
}
callback, promise, async / await
callback(function () {
callback(function () {
callback(function () {
callback(function () {
// ...
});
});
});
});
const get = async () => {
const data = await fetch();
const ... = await ...();
};
promise()
.then((data) => {
// ...
})
.then((data) => {
// ...
})
.then((data) => {
// ...
})
.catch((error) => {
// ...
})
.finally(() => {
// ...
});
imperative vs declarative
const array = [];
for (let i = 0; i < 10; i++) {
array.push(i);
}
const array = Array(10).fill(0).map((v, i) => i);
console.log(array);
References
JavaScript & Node.js
By Dong-Young Kim
