FrontEnd
-
JS엔진이 일을 처리하는 방법FrontEnd/JavaScript 2023. 1. 21. 03:42
우리가 작성한 JS파일에 있는 함수들은 어떻게 동작할까? JS엔진이 동작할때 Stack과 Que가 사용된다. 자료구조에서 흔히 들어봤을법 한데 Stack은 나중에 들어온 일이 먼저 처리된다.(Last In First Out) Que는 반대로 먼저 들어온 일이 가장 먼저 처리된다.(First In First Out) JS엔진에서 우리가 작성한 코드를 천천히 한 줄씩 읽어나간다. 그리고 함수를 호출하면 그 함수를 stack에 쌓게 된다. stack에 처리해야할 일이 쌓이면 JS엔진은 call Stack에 쌓인 일들을 하나하나 처리해나간다. 하지만 우리가 브라우저를 이용하면서 js에서 처리해야할 일 뿐만 아니라 render나 Web APIs에서 처리해야할 일들도 있는데 이를 도와주는 게 바로 event loo..
-
React 비용 계산하기 - React Profiler APIFrontEnd/React 2023. 1. 8. 10:28
https://ko.reactjs.org/docs/profiler.html Profiler API – React A JavaScript library for building user interfaces ko.reactjs.org 리액트를 활용하여 애플리케이션을 만든 후에 비용을 어떻게 계산할 수 있을까? 리액트는 업데이트된 부분만 리렌더링하는 특징이 있다. 이를 위해서 렌더링할 필요가 없는 부분은 memo함수를 이용하여 메모이제이션하는 등 여러 방법을 취하고 있다. 그럼 이게 잘 동작하는지, 최악의 비용은 어느 정도인지 계산할 수 있는 API가 바로 Profiler API이다. 코드는 아래와 같다. render( ); 예를 들어 Navigation을 profile하기 위해서 profiler로 감싸준다. ..
-
TypeScript로 STACK QUE 구현해보기FrontEnd/TypeScript 2023. 1. 3. 14:54
공부한 내용으로 Stack과 Que를 만들어봤다. 코드부터 바로 봐보자 interface Stack { readonly size: number; push(value: A): void; pop(): A; } type StackNode = { readonly value: A; readonly next?: StackNode; }; class StackImpl implements Stack { private _size: number = 0; private head?: StackNode; constructor(private capacity: number) {} get size() { return this._size; } push(value:A) { if (this.size === this.capacity) { t..
-
React 성능을 최적화 해보자!FrontEnd/React 2023. 1. 2. 23:22
https://ko.reactjs.org/docs/optimizing-performance.html 성능 최적화 – React A JavaScript library for building user interfaces ko.reactjs.org 여기 공식 문서에서 제안하는 방법들이 있는데 그 중 몇 가지를 살펴보자! 긴 목록 가상화 하기 앱 내에서 긴 목록(채팅리스트, 트윗, 메시지 등)을 불러와야 하는 경우에 전체를 다 불러오는 것보다 부분 목록만 렌더링함으로써 걸리는 시간과 생성된 DOM의 갯수를 현저히 줄일 수 있다. 이게 무슨 말일까? UI상에 메세지 목록이라는 박스에 필요한 메세지 목록 데이터가 만약 수천개라고 해보자. 하지만 사용자가 보는 화면에 수천개를 한 번에 띄우는 일은 어렵고, 기껏해야 ..