JavaScript

[ JS ] 이벤트 버블링 & 캡쳐링

[JS] 📚 브라우저 버블링 & 캡쳐링 정리 이벤트의 흐름 계층적 구조에 포함되어 있는 HTML 요소에 이벤트가 발생할 경우 연쇄적 반응이 일어난다. 즉, 이벤트가 전파(Event Propagation)되는데 전파 방향에 따라 버블링(Event Bubbling)과 캡처링(E inpa.tistory.com

[ JS ] LocalStorage, SessionStorage, Cookie 다루기

🔴 LocalStorage & SessionStorage [JS] 📚 LocalStorage / SessionStorage 정리 (vs 쿠키) LocalStorage / SessionStorage API 소개 html5에서는 좀 더 쉽고 간단한 저장소 제공을 위해 새로운 localStorage와 sessionStorage API를 제공한다. 둘 다 저장 공간으로 사용할 수 있는데 이 둘의 가장 큰 차.. inpa.tistory.com 🟠 Cookie [JS] 📚 쿠키(Cookie) 🍪 다루기 선행 학습 [WEB] 🌐 쿠키 / 세션 정리 비연결성(Connectionless)과 비상태성(Stateless) HTTP 프로토콜에는 비연결성(Connectionless)과 비상태성(Stateless)이라는 특징이 ..

[ JS ] Base64 / Blob / ArrayBuffer / File 다루기

[JS] 📚 Base64 / Blob / ArrayBuffer / File 다루기 - 이해하기 쉽게 설명 웹 개발을 진행하다 보면 이진 데이터를 다루어야 할 때를 간혹 마주칠 수 있다. 브라우저에선 주로 파일 생성, 업로드, 다운로드 또는 이미지 처리와 관련이 깊고, 서버 사이드인 node.js 에선 파 inpa.tistory.com

[ JS ] Generators and Maps

🔴 Generators const friends = ["Jeong", "Seung", "Ryong", "Hello", "World"]; function* friendTeller() { for (const friend of friends) { yield friend; } } const friendLooper = friendTeller(); > friendLooper.next() // { value: "Jeong", done: false } > friendLooper.next() // { value: "Sueng", done: false } > friendLooper.next() // { value: "Ryong", done: false } > friendLooper.next() // { value: "He..

[ JS ] Symbol, Set and Map

🔴 Symbols const user = { [Symbol("ryong")]: { age: 28 }, [Symbol("ryong")]: { age: 32 }, hello: "bye" }; console.log(Object.keys(user)); // ["hello"] console.log(Object.getOwnPropertySymbols(user)); // [Symbol(ryong), Symbol(ryong)] ⚪ symbol 내부에 description 파라미터가 서로 같더라도 서로 다른 symbol을 리턴한다. const numberArr = [1, 3, 3, 5, 7]; const objectArr = [ { name: 'Harry', age: 20 }, { name: 'Kim', age: 30 ..

[ JS ] Classes

🔴 Introduction to Classes class User { constructor(name) { this.username = name; } sayHello() { console.log(`Hello, my name is ${this.username}`); } } const myUser = new User("Ryong"); myUser.sayHello(); // Hello, my name is Ryong 🟠 Extending Classes class User { // this => User constructor(name, lastName, email, password) { this.username = name; this.lastName = lastName; this.email = email; thi..

[ JS ] Async / Await

🔴 Async Await // using then, catch const getMoviesPromise = () => { fetch("https://yts.am/api/v2/list_movies.json") .then(response => { console.log(response); return response.json(); }) .then(json => console.log(json)) .catch(error => console.log(error)); }; // using async, await const getMoviesAsync = async () => { // then => await const response = await fetch("https://yts.am/api/v2/list_movies..

[ JS ] Promises

🔴 Using Promises const test = new Promise((resolve, reject) => { // If Promise ends successfully, setTimeout(resolve, 2000, "Promise end successfully!"); // === resolve("Promise end successfully!"); // If Promise return error setTimeout(reject, 2000, "Promise return error!"); }); test.then(result => console.log(result)) // resolve => then❗ .catch(error => console.log(error)); // reject => catch❗..

[ JS ] For Loop

🔴 forEach ⚪ 반복되는 요소(iterable)의 각 요소들을 순서대로 item, index, array 등을 리턴한다. ⚪ 반복문을 중간에 멈출 수 없다. const friends = ["A", "B", "C", "D"]; const addHeart = (item, index, array) => console.log(item, index, array); /* A 0 ["A", "B", "C", "D"] B 1 ["A", "B", "C", "D"] C 2 ["A", "B", "C", "D"] D 3 ["A", "B", "C", "D"] */ friends.forEach(addHeart); 🟠 for ... of ⚪ 반복문을 조건에 따라 중간에 멈출 수 있다. const friends = ["A", ..

[ JS ] Rest And Spread

🔴 Introduction to Spread ⚪ spread는 변수를 가져가서 요소를 전개한다. const friends = [1, 2, 3, 4]; const family = ["a", "b", "c"]; console.log(friends); // [1, 2, 3, 4] => array console.log(...friends); // 1 2 3 4 => elements // spread merge console.log([friends, family]); // [ [1, 2, 3, 4], ["a", "b", "c"] ] console.log([...friends, ...family]); // [1, 2, 3, 4, "a", "b", "c"] 🟠 Spread Applications // spread a..