내 맘대로 정리정리

Data search를 위한 filter를 최적하기 위해 시도했던 내용을 정리한다. filter는 Mui의 Select component를 base로 만들어져 있으며 천개 정도의 menu item을 갖는다. menu popup을 여는데 약 2초 정도가 걸렸고 performance를 돌렸을 때 menu item들이 추가되며 render/commit 둘 다 많은 시간이 소요되는 것을 확인할 수 있었다. 1. 미리 DOM tree에 달아놓고 container의 css만 변경하여 popup을 연다. search filter가 render될 때 모든 item을 미리 함게 render 해놓고 items의 container를 display none으로 둔다. click event가 발생하면 item을 추가하는 것이 ..

1. use requestAnimationFrame for visual changes than setTimeout or setInterval 1-1. How to animate 브라우저는 보통 60FPS를 지원한다. 즉 1초에 60개의 frame을 찍어낼 수 있는데 이는 약 16ms(1000/60) 안에 하나의 frame을 찍어내야 한다는 말이다. 만약 하나의 frame을 찍는데 16ms가 넘어가게되면 그 다음 frame이 drop되고 FPS가 낮아져 사용자는 화면이 끊겨보인다고 느끼게된다. 애니메이션을 구현할 떄 주로 css의 transform이나 translate 등을 사용하지만 보다 복잡한 구현의 경우에는 JS를 사용하기도 한다. 이 경우에 사용할 수 있는 방법으로 두 가지가 있는데 1. setTi..

javascript에서 Date object를 다루다보면 헷갈릴 때가 있다. server와 client, 개발하는 local pc에 따라 timezone이 달라지고 그에 따른 시간 차이가 발생할 수 있기 때문이다. 컴퓨터의 시간 컴퓨터는 1970년 1월 1일 0시 0분 0초(UTC 기준)를 기준으로 흐른 시간을 초단위로 계산하여 저장한다(그 이전의 경우 음수로). 이를 Unix time이라고 부르며, 같은 순간에는 전 세계 어디에서 호출해도 같은 값을 갖게 된다. Date.now() // 1663752244577 new Date(Date.now()) // Wed Sep 21 2022 18:24:04 GMT+0900 (한국 표준시) Date는 왜 헷갈리나? Javascript의 Date class의 헷갈림..

// Function declaration function greet(who) { return `Hello, ${who}!`; } // Function expression const greet = function(who) { return `Hello, ${who}`; } // Arrow function const greet = (who) => { return `Hello, ${who}!`; } Function declaration과 function expression을 regular function이라고 칭하고 이들과 arrow function의 차이를 정리한다. 1. this value regular function 내부에서 this의 값은 dynamic하게 결정된다. 즉, 어떻게 함수가 호출되었는지에..

변수를 선언하는데 사용되는 세 가지 키워드(ES6이전에 사용하던 var와 ES6이후에 나온 let, const)에 대해 비교한다. 중복선언 var는 중복선언이 가능하지만 let, const는 불가능하다. var name = 'jaewoo' console.log(name) // jaewoo // redeclaration is possible var name = 'jaewoo2' console.log(name) // jaewoo2 let name = 'jaewoo' console.log(name) // jaewoo // no redeclaration let name = 'jaewoo2' // Uncaught SyntaxError: Identifier 'name' has already been declared..

실행 컨텍스트(Execution context) Javascript 코드블록이 실행되는 환경(무대)를 말한다. 코드 실행에 필요한 다양한 정보(변수, scope chain, this 등)를 담고 있으며 전역 코드, eval(), 함수를 실행하는 세가지 경우에 의해 생성된다. 실행 컨텍스트는 stack으로 쌓인다. Global execution context 코드가 실행되기 전에 생성되며 함수 내부에 존재하지 않는 모든 코드는 여기에 존재한다. 글로벌 실행 컨텍스트는 단 하나만 존재하며 js engine이 어떤 코드를 실행하는 모든 기간 동안 존재한다. Functional execution context Global execution context가 생성된 이후 함수가 실행될 때마다 생성되고, 함수가 종료..

const obj = { name: 'jaewoo', number: '010-000-0000' } // set prototype object Object.setPrototypeOf(obj, {protoProp: 'parent'}); // set non enumerable property Object.defineProperty(obj, 'gender', {enumerable: false}) obj 객체를 base로 Object.keys, for...in, getOwnPropertyNames를 비교한다. Object.keys // returns enumerable properties Object.keys(obj) // ['name', 'number'] Object.getOwnPropertyNames // r..

Javascript의 this 라는 값은 현재 실행되는 코드의 context(execution context)이다. 이 this라는 context가 실제로 어떤 것을 참조하는지에 대한 참고자료 참고로 module 및 ES6 부터는 default로 strict mode이다. https://jeonghwan-kim.github.io/2017/10/22/js-context-binding.html 자바스크립트 this 바인딩 우선순위 자바스크립의 컨텍스트(this) 바인딩은 헷갈릴 때가 많다. "이 정도면 이해할수 있겠군" 하다가도, 막상 코딩하다 보면 예상치 못한 상황에 부딪쳐 당황한적이 있지 않은가? 이 글은 자바스크립트 jeonghwan-kim.github.io https://medium.com/sjk57..

Lexical scope (static scope) function makeFunc() { var name = "Hello"; function displayName() { console.log(name); } displayName(); } makeFunc(); 위의 코드는 자연스럽게 "Hello"가 출력됨을 예상할 수 있다. Javascript는 lexical scope(선언된 위치를 기준(compile time)으로 scope를 정함, 상대되는 개념으로 호출된 시점(run time)을 기준으로 scope를 정하는 dynamic scope가 있다.)를 사용하여 내부 함수에서 외부함수의 변수에 접근할 수 있기 때문이다. Closure function makeFunc() { var name = "Hello"..

function object javascript에서 function은 객체이다. 아래의 두 줄의 코드는 기능상 동일하다. function Person(){} var Person = new Function(); Prototype 앞서 말한 것 처럼 function이 선언될 때 function 객체가 생성된다. 하지만 funciton 객체는 다른 객체와 달리 prototype이라는 객체와 함께 생성된다. 이 두 객체는 서로를 참조한다. (function object은 prototype property로, prototype object은 constructor property로) function object의 property function object로 생성된 object들의 prototype (__proto..