본문 바로가기

공부107

[React] Windowing으로 렌더링 성능 최적화하기 최근 렌더링 이슈를 경험했었다. 수 천개쯤 되는 다수의 데이터를 한 번에 렌더링했기에 발생하는 이슈였다. 이 이슈를 통해 알게 된 Windowing 기법과, 이를 구현할 수 있게 해주는 라이브러리에 대해 기록한다.Windowing 기법이란?  React 공식 페이지에서도 소개하고 있는 Windowing 기법이란, 간단히 말해 전체 목록의 일부만 렌더링하는 기법이다.   수백, 혹은 수천개의 항목을 한 번에 렌더링 하는 건 큰 부하를 일으킬 뿐더러, 페이지에 보이지 않는 요소까지 렌더링하는 경우가 많기 때문에 비효율적이다. 따라서 Windowing 기법은 화면에 보이지 않는 요소들을 렌더링에서 제외하고 일부만 렌더링함으로써 성능을 최적화할 수 있게 해준다.   사실 이 개념은 아주 어렴풋하게 알고 있었는데.. 2024. 6. 2.
[Electron] input이 focus되지 않는 이슈 해결하기 (+ IPC 통신을 곁들여서) 최근에 잠깐 Electron을 써볼 기회가 있었는데, 그 때 접한 이슈 해결방법에 대해 기록한다.  최근 Electron을 사용해 개발을 하던 중 이상한 이슈에 부딪혔다. 그것은 돌연히 input 태그가 먹통이 되면서 아무런 입력이 되지 않는 문제였다. 이 현상은 Electron에서 크롬 개발자 모드를 열거나 잠시 Electron 프로그램 창을 최소화 후 여는 것으로 해결이 되었지만, 매번 이와 같은 문제가 일어났을 때 개발자 모드를 열 수도 없는 노릇이었기에... 원인을 찾아 나섰다. 원인 - window.alert()의 호출  알고 보니 이 이슈는 꽤 오래된 이슈였다.(관련 GitHub 이슈) the input-box lose focus after call window.alert('...') · Is.. 2024. 5. 6.
Monotonic Stack에 대하여 알고리즘 문제를 풀다가 처음 마주하는 개념을 알게 되었다. 이름을 알게 된 김에 가볍게 내용을 정리해보았다. Monotonic Stack이란 : 스택 내의 요소들이 단조적으로(Monotonic) 증가/감소하는 스택을 말한다. 아래와 같은 특징을 갖는다고 한다. 한 번 pop된 요소는 다시는 재사용 되지 않는다. 요소를 스택에 추가할 때마나 단조성을 유지한다. → 이러한 특징 때문에 주로 다음/이전의 최소값/최대값(Next/Previous smaller/larger Problem)을 구하는 문제에서 잘 쓰인다. Monotonic Stack의 구현 Monotonic Stack의 구현에는 아래의 과정을 거친다. 아래는 감소하는(Decreasing) 스택을 구하는 과정이다. 기본적으로, 주어진 숫자 목록을 순회.. 2024. 4. 14.
React-Query 찍어먹기 최근 React-Query를 쓰는 회사들이 꽤 많음을 짐작할 수 있었다. 마침 종종 참고하던 강의에 React-Query 내용이 있어, 강의를 듣고 간단히 써본 것을 정리한다. 강의는 Udemy의 React - The Complete Guide 2024를 시청했다. React-Query(Tanstack-query) : HTTP 요청을 보내고, 백엔드 데이터와 프론트엔드의 UI를 동기화하게 해주는 서버 상태 관리 라이브러리. 서버에 요청을 보내는 것은 굳이 이 라이브러리를 쓰지 않아도 가능하지만, React-query를 사용하면 간편함과 다양한 이점을 얻을 수 있음. ex) 코드 길이 감소, 데이터 변경 시 자동으로 새 데이터 fetch, 데이터 캐싱 등... React-Query에서 직접 HTTP 요청을.. 2024. 3. 4.
[Javascript] 프로토타입 알아보기 - 2 지난 글에 이어서, 코어 자바스크립트를 읽고 프로토타입에 대해 공부한 내용을 정리한다. 메서드 오버라이드(Method Override) : 부모 역할을 하는 객체에 정의된 메서드를 재정의하는 것. var Foo = function (bar) { this.bar = bar; }; Foo.prototype.getBar = function () { return this.bar; }; var foo = new Foo('hello'); foo.getBar = function () { console.log(this.bar + ', World!'); }; foo.getBar(); // hello, World! 가 출력된다 생성자 Foo의 프로토타입에 getBar라는 메서드를 정의한다. 따라서 생성자 Foo 로 만들어.. 2024. 2. 2.
[피그마] 피그마 기능들 정리하기 지난 블로그 글에서, 피그마에서 개인적으로 유용하게 쓰는 기능들을 정리해보겠다고 언급했었다. 피그마를 많이 다뤄보진 않았지만, 다른 사람의 참고가 되었음 하는 마음에 몇 가지를 정리해본다. 컴포넌트(Component) 기능 다양한 곳에서 여러 번 사용되는 컴포넌트를 만들 때 사용된다. 하나의 컴포넌트로 묶으려는 요소들을 모두 선택한 후, 마우스 오른쪽 클릭하여 나오는 메뉴를 통해 컴포넌트를 만드는 것이 가능하다(혹은 맥 기준 Option + Command + K). '중복되는 요소는 그냥 복사 + 붙여넣기로 사용하면 되지 않나?' 라고 생각할 수 있지만, 그럴 경우 컴포넌트의 디자인을 수정해야 할 때 골치아플 수 있다. 복붙한 모든 컴포넌트의 디자인을 수정하던가, 하나를 수정하고 다른 자리의 컴포넌트들 .. 2024. 1. 28.

티스토리툴바