공부78 [Electron] Electron에서 코드 변경사항 빠르게 적용하기 (feat. electron-reload) Electron을 사용하며 불편했던 것 중 하나는, 웹 개발을 하던 때와 달리 자동으로 변경사항이 적용되지 않는다는 것이었다. 때문에 코드를 고치고, 이미 열려있는 Electron 창을 닫고, 커맨드 창에서 다시 Electron을 실행하는 불편함이 있었다.이를 개선하기 위한 방법을 알아보고, 실제 적용해본 내용을 공유한다.electron-reload 적용하기 Electron에 자동 리로드를 추가할 때 자주 거론되는 방법. 공식 문서에서 설명하는 사용방법도 비교적 간단하다. 간단하다면 간단한데, 나는 프로젝트에서 타입스크립트를 사용하고 있어서 이런 저런 추가 설정을 더했고, 만족스럽지 못한 부분이 있다. // 설치npm install electron-reload npm 등으로 라이브러리를 설치하면 e.. 2024. 6. 30. [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. 이전 1 2 3 4 ··· 13 다음
