javascript

클로저란함수와 함수가 선언된 렉시컬 환경의 조합선언된 렉시컬 환경 : 변수가 코드 내부에서 어디서 선언됐는지를 의미 스코프전역 스코프전역 스코프에서 선언된 변수는 어디서든 호출 가능함window, global함수 스코프자바스크립트는 기본적으로 함수 레벨 스코프를 따름 ( {} 블록이 스코프 범위를 결정하지 않음) 클로저의 활용자바스크립트는 함수 레벨 스코프를 가지고 있고, 스코프는 동적으로 결정됨클로저를 활용하면 한 변수나 상태 값을 별도로 관리하는 클로저 내부에서만 접근 가능함function Counter() { var cnt = 0 return { increase : function () { return cnt++ }, decrease : f..

클래스란자바스크립트의 클래스란 특정한 객체를 만들기 위한 일종의 템플릿클래스를 활용하면 객체를 만드는 데 필요한 데이터나 이를 조작하는 코드를 추상화해 객체 생성을 더욱 편리하게 할 수 있음class Car { // 생성자 constructor(name) { this.name = name; } // 메서드 hook() { console.log('경적을 울립니다'); } // 정적 메서드 static hello() { console.log('안녕, 자동차야!'); } // setter set age(value) { this.carAge = value } //getter get age()..

함수란작업을 수행하거나 값을 계산하는 등의 과정을 표현하고 이를 하나의 블록으로 감싸서 실행 단위로 만들어 놓은 것리액트에서 컴포넌트를 만드는 함수도 자바스크립트 함수의 기초적인 형태를 따름자바스크립트에서 함수는 다른 함수의 매개변수가 될 수 있고, 반환값이 될 수 있으며, 할당도 가능하므로 일급 객체임   함수를 정의하는 방법함수 선언문가장 일반적으로 사용하는 방식표현식이 아닌 일반 문으로 분류됨function add(a,b) { return a + b;}함수 표현식함수를 변수에 할당해 표현하는 방식할당하려는 함수의 이름을 생략하는 것이 일방적const sum = function (a,b) { return a + b;}sum(10, 24) 함수 선언문함수 표현식호이스팅으로 인해 함수 선언문은 먼저 메모..

모듈애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각모듈은 기능을 기준으로 파일 단위로 분리함모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 함모듈의 자산(모듈에 포함되어 있는 변수, 함수, 객체 등)은 기본적으로 캡슐화되어 다른 모듈에서 접근할 수 없음하지만 모듈은 애플리케이션이나 다른 모듈에 의해 재사용되어야 의미가 있기 때문에 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능함 => export 라고 함공개된 모듈 자산은 다른 모듈에서 재사용할 수 있음모듈 사용자 : 공개된 모듈의 자산을 사용하는 모듈모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용 가능함 => import 라고 함모듈을 사용하면 코드의 단위를 명..

프로미스ES6부터 도입된 비동기 처리를 위한 패턴전통적인 콜백 패턴이 가진 단점을 보완하여 비동기 처리 시점을 명확하게 표현할 수 있다는 장점을 가짐  비동기 처리를 위한 콜백 패턴의 단점const get = url => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(); xhr.onload = () => { if(xhr.status == 200) { console.log(JSON.parse(xhr.response)); } else { console.error(`${xhr.status} ${xhr.statusText}`)}; } }}ge..

호출 스케줄링함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출하도록 호출을 예약하려면 타이머 함수를 사용해야 함자바스크립트는 타이머 생성 함수 setTimeout, setInterval, 타이머 제거 함수 clearTimeout, clearInterval 함수를 제공함타이머 함수는 일정 시간이 경과된 후 콜백 함수가 호출되도록 타이머를 생성함setTimeout 함수는 생성한 타이머가 단 한 번만 동작setInterval 함수는 생성한 타이머가 반복 동작타이머 함수는 비동기 처리 방식으로 동작함  타이머 함수setTimeout두 번째 인수로 전달받은 시간(ms, 1/1000초)으로 단 한 번 동작하는 타이머를 생성타이머가 만료되면 첫 번째 인수로 전달받은 콜백 함수가 호출됨콜백 함수에 전달해..

동기 처리와 비동기 처리함수가 호출된 순서대로 순차적으로 실행되는 이유는 함수가 호출된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되기 때문함수의 실행 순서는 실행 컨텍스트 스택으로 관리함자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖음 => 싱글 스레드 방식싱글 스레드 방식은 한 번에 하나의 태스크만 실행할 수 있기 때문에 처리에 시간이 걸리는 태스크를 실행할 경우 블로깅(작업 중단)이 발생함동기 처리현재 실행중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식실행 순서가 보장됨앞선 태스크가 종료할 때까지 이후 태스크들이 블로킹되는 단점비동기 처리현재 실행 중인 태스크가 종료 되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식블로킹이 발생하지 않음태스크의 실행 순..

브라우저의 렌더링 과정브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받음브라우저의 렌더링 엔진은 서버로부터 응답된 HTML, CSS를 파싱해 DOM과 CSSOM을 생성하고 이들을 결합해 렌더 트리를 생성함브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱해 AST(Abstract Syntax Tree)를 생성하고 바이트코드로 변환해 실행함. 이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있음. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합됨렌더 트리를 기반으로 HTML 요소의 레이아웃(위치와 크기)를 계산하고 브라우저 화면에 HTML 요소를 페인팅함 파싱 : 프로그래밍 언어의 문법에..