Language/Javascript (7) 썸네일형 리스트형 [ES6+] ES7 ~ ES13 추가 기능 ES6+ES6+는 이전 포스팅에서도 언급했지만, ECMAScript2015(ES6) 이후의 버전들을 묶어서 부르는 것 ES7 (ECMAScript 2016)Array.prototype.includes배열에 특정 요소가 포함되어 있는 지 확인하는 메서드[1, 2, 3].includes(2); // true[1, 2, 3].includes(4); // false 지수 연산자Math.pow()를 더 간결한 문법으로 제공2 ** 3; // 8 == (2^3) == Math.pow(2,3) ES7 (ECMAScript 2016) async와 await 비동기 프로그래밍을 더 간결하게 처리할 수 있는 키워드async function fetchData() { const response = await fetch('h.. [개념] ES6이란? ES6이란? 자바스크립트 표준 사양인 ECMAScript의 6번째 버전→ 기존 자바스크립트의 단점을 보완하고 코드 작성의 생산성과 가독성을 크게 향상시킨 표준ECMAScript 2015로 알려져 있으며 ES6으로 불림2009년에 표준화된 ES5 이후 2015년에 자바스크립트의 대규모 업데이트가 이루어진 것이 ES6ECMAScript는 ES6이후 매년 새로운 버전을 발표하였으며 버전 이름은 발표 연도로 정해지지만, ES6 이후의 버전들은 ES6+로 불림Ex) ES7(2016), ES8(2017), ES9(2018), ES10(2019), ES11(2020), ES12(2021), ES13(2022) ES6 문법const와 letES6에서 새로 등장한 키워드const는 상수 선언이기 때문에 값의 재할당 불가.. [Javascript] DOM 렌더링 시점 DOM 렌더링브라우저가 HTML 문서를 파싱하여 DOM 트리를 생성하고 이를 기반으로 화면에 문서를 그리는 과정을 의미HTML 문서의 생명주기엔 다음과 같은 3가지 주요 이벤트가 관여DOMContentLoaded 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생이미지 파일()이나 스타일시트 등의 기타 자원은 기다리지 않음단, HTML 문서에 DOMContentLoaded와 scripts브라우저는 HTML 문서를 처리하는 도중에 DOMContentLoaded와 styles외부 스타일시트는 DOM에 영향을 주지 않기 때문에 DOMContentLoaded는 외부 스타일시트가 로드되기를 기다리지 않지만 한 가지 예외가 존재스타일.. [Javascript] DOM (Document Object Model)의 개념 DOM (Document Object Model)HTML 문서를 Javascript로 조작하기 위한 모델HTML, XML 문서의 프로그래밍 인터페이스이며, 문서의 구조를 계층적인 노드로 나타냄W3C(World Wide Web Consortium) 표준 DOM의 구성 요소 문서 노드 (Document) : 최상위 노드로 HTML 문서 전체를 대표요소 노드 (Element) : HTML 태그를 나타냄속성 노드 (Attribute) : 요소의 속성을 나타냄텍스트 노드 (Text) : 요소 안의 텍스트를 나타냄주석 노드 (Comment) : HTML 주석을 나타냄 DOM의 특징트리 구조부모-자식 관계로 구성된 계층적 구조이며, 이를 DOM 트리라고 함부모, 자식, 형제 노드 간의 관계를 통해 문서를 탐색하거나.. [Javascript] 비동기 프로그래밍 [Callback, Promise, async/await] Callback의 개념동기적 콜백콜백 함수가 즉시 호출되어 실행 결과를 기다린 뒤 이후 명령이 수행되는 방식호출한 함수가 끝나기 전에 콜백이 실행되고 종료비동기적 콜백콜백 함수가 호출한 함수의 실행이 완전히 끝난 뒤, 또는 특정 시점 이후 실행되는 방식주로 타이머, 이벤트 핸들러, 네트워크 요청과 같은 비동기 작업에서 사용호출한 함수는 콜백의 실행 결과를 기다리지 않고 다음 명령을 바로 수행코드를 통해 명시적으로 호출하는 함수가 아니라, 함수를 등록해놓은 후 어떠한 이벤트가 발생(addEventListener 등)했거나 특정 시점(setTimeout 등)에 도달했을 때 시스템에서 호출하는 함수를 의미파라미터로 함수를 전달받아 함수의 내부에서 실행동기적 콜백function greet(name, callba.. [Javascript] Javascript 동작 원리 [동기, 비동기] Javascript 동작 원리싱글 스레드로 동작하는 언어자바스크립트의 V8 엔진은 싱글 스레드를 가지고 있어 단 하나의 stack을 가짐V8 엔진 자바스크립트 코드를 실행하는 엔진으로 싱글 스레드에서 동작자바스크립트 코드를 바이트코드로 컴파일한 후 실행→ Java의 JVM과 비슷한 역할콜 스택과 메모리 힙을 이용해 코드 실행을 관리 싱글 스레드 하나의 스레드만을 사용해 코드가 실행된다는 의미이 스레드는 메인 스레드라 불리며, 하나의 콜 스택(call stack)에서 실행 단일 호출 스택 (Call Stack)자바스크립트 엔진은 하나의 메모리 힙과 단일 호출 스택을 가짐 → 즉, 엔진 구조 상 하나의 함수만 동기적으로 실행 가능 자바스크립트 엔진이 실행하는 코드는 콜스택에 쌓이고 콜스택은 Stack과 같.. [Javascript] 객체(Object)와 배열(Array) 객체 (Object)중괄호( { } )로 묶어서 표현var zero = { firstName: 'Zero', lastName: 'Cho'}; 속성 (Property)객체의 속성은 Java의 Map처럼 Key와 Value로 이루어짐Key(속성의 이름) → firstName, lastNameValue(속성의 값) → Zero, ChoKey는 문자열 또는 심볼만 가능하며, 따옴표('')로 감싸주지 않아도 됨단, Key 값에 공백(띄어쓰기)가 들어간 경우에는 따옴표로 감싸주어야 함Value 값은 문자열, 정수, 객체, 함수 무엇이든 상관 없음var wrap = { 'ex ample': 'wrap' }; 속성 접근 방법위의 zero 변수(객체) 안의 속성에 접근하기 위해서는 온점( . ) 또는 대괄호( [ ].. 이전 1 다음
