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

자바스크립트 실행 도구

https://nodejs.org/ko/

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

Made with Slides.com