![]()
실행 컨텍스트의 동작 원리에 대해 간단히 알아봅시다. 실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있는 핵심 개념입니다. 실행 컨텍스트를 이해하게 되면 다음 3가지에 대 해 알 수 있게 됩니다. 호이스팅이 발생하는 이유 클로저 동작 방식. 스코프 비동기 처리 방식 실행 컨텍스트란? 실행 컨텍스트는 "실행할 코드에 대한 환경 정보들을 모아둔 객체"입니다. 즉, 함수가 실행되는 환경에 대한 정보를 갖고 있다고 생각하면 됩니다. 함수는 변수, 매개변수, 내장 함수, this에 대한 정보를 갖고 있죠? 이 정보를 갖고 있는 객체라고 생각하면 됩니다. 실행 컨텍스트 동작 방식 자바스크립트는 싱글 스레드로 되어 있으며, 해야 할 작업들을 하나의 스택에 쌓아 보관합니다. 이 스택을 자바스크립트에서는 콜 스택이라 ..
![]()
[Javascript] setInterval, clearInterval setInterval 은 일정 시간마다 반복적으로 무언가를 행할 때 사용되며, clearInterval은 이것을 중지할 때 사용한다. 한번만 실행할 것이라면 timeout을 사용하는 것이 좋다. 시간 단위: ms // 3초마다 "안녕" 문구 출력 const polling = setInterval(() => { console.log("안녕"); }, 3000); // 중지 clearInterval(polling) clearInterval : www.w3schools.com/jsref/met_win_clearinterval.asp setInterval : www.w3schools.com/jsref/met_win_setinterval.as..
![]()
[Error] Module parse failed: Unexpected token (28:51) File was processed with these loaders: * ./node_modules/babel-loader/lib/index.js 위 에러의 핵심은 ?? 이다. Nullish coalescing operator라고 불리는 ??은 ES2020에서 소개되었으며, null과 undefined인 경우 뒤의 값을 갖는 연산자이다. || 와 다른 점은 falsy값 (0 또는 '')일때는 앞에 값을 갖는 다는 것이다. const a = null ?? 'A'; // 결과: A const b = undefined ?? 'B'; // 결과: B const c = 0 ?? 'C'; // 결과: 0 const d ..
[Javascript] 호이스팅(hoisting) * 호이스팅? - '끌어올리다'라는 의미. - 변수 정보를 수집하는 과정을 더웃 이해하기 쉬운 방법으로 대체한 가상의 개념. > 출처: 도서 '코어자바스크립트' ⭐ 호이스팅 규칙: 함수 선언, 변수명을 위로 끌어올리고 할당과정은 원래 자리에 그대로 남겨둔다. ⭐ 아래 코드를 실행해보면 어떻게 될까? 한번 머릿속으로 예상해보자. var x = 1; console.log('x - (1): ', x); console.log('y - (1): ', y); console.log('a - (1): ', a); console.log('b - (1): ', b); console.log('c - (1): ', c); e(3); var y = 2; function a() ..
[Javascript] Javascript HTML5 Canvas Libraries HTML5 canvas를 쉽게 다룰 수 있게 해주는 다양한 라이브러리들. fabric.js : http://fabricjs.com/ TMI NHN Toast ui 의 Image editor도 이 라이브러리를 쓴다. (https://ui.toast.com/tui-image-editor) 장점 다양한 예제(Demo)가 있다. 사용하는 사람, 이걸 사용해서 개발된 프로젝트가 많다. 단점 Free Drawing(Pen)으로 그린 그림을 지우는 방법이 딱히 없다. issue에 방법이 하나 있긴 함 => https://github.com/fabricjs/fabric.js/issues/1225 하지만 위 방법을 사용하면 배경이 지워지..
❓ fabric.js - Javascript HTML5 canvas library - HTML5 canvas를 쉽게 다룰수 있게한 라이브러리로 canvas위에 그린 그림들을 "객체(object)"로 관리 합니다. - Demo : http://fabricjs.com/ - Documents : https://github.com/fabricjs/fabric.js/wiki 🌟 canvas 사이즈 변경 이벤트 - canvas는 width와 height를 100%로 설정하면 안된다(적용이 안됨). - fabricjs를 이용하면 canvas의 사이즈를 변경시, canvas위에 그린 배경과 요소들이 자동으로 크기가 변경된다. - window resize 이벤트 발생 시 처리 순서 1) 화면 변경 비율을 계산. 2) c..
