Honsal's Dailylife

Next.js Turbopack dev에서 렌더링이 두 번씩 될 때 dev 실행 시 렌더링/이펙트가 두 번 실행된다? React Strict Mode 리액트의 StrictMode 는 디버그를 위한 몇 가지 기능을 제공해 준다. 그 중에는 이펙트나 렌더링 단계의 버그를 잡기 위해 실행되는 다음과 같은 기능이 이런 문제를 만든다. 렌더링 단계에서 발생하는 문제를 찾기 위해 컴포넌트가 한 번 더 렌더링 된다. 이펙트 정리 누락으로 발생하는 문제를 찾기 위해 이펙트가 재실행 된다. Deprecated된 API 사용을 탐지한다. 이 중 1번과 2번 때문에 이펙트/렌더링이 두 번씩 실행되는 문제가 발생하게 된다. 발생할 수 있는 문제? StrictMode는 디버그 단계에서 매우 유용하지만, 간단한 예시로 다음과 같은 코드에서 문제가 발생할 수 있다. "use client" import { ReactNode , useEffect , useState } from "react" ; export default function ClientComp ( { children } : { children : ReactNode } ) { const [ count , setCount ] = useState ( 0 ) ; useEffect ( ( ) => { setInterval ( ( ) => { setCount ( count => count + 1 ) ; } , 1000 ) ; } , [ ] ) ; return < div > < h1 > Hello , Next . js ! ! ! { count } < / h1 > { children } < / div

JetBrains WebStorm에서 electron-vite 디버그하기 (렌더러 메인 모두) electron-vite electron-vite 는 Electron 을 ViteJS 위에서 돌리기 위한 프리셋을 제공해주는 도구이다. vite Vite는 Webpack 에 비해 어마무시할 정도로 빠른 퍼포먼스를 자랑하기 때문에 내가 최근 들어 애용하기 시작했는데 아무래도 웹팩에 비해 후발 주자라서 갖는 단점 1 이 있긴 하지만, 그것을 압도하는 빠른 성능 때문에 안 쓸래야 안 쓸 수가 없게 되었다. electron 일렉트론은 웹앱을 데스크탑 응용 프로그램으로 제작하는 용도로 쓰인다. 다시 말해, 웹 사이트를 구축하듯이 디자인 및 프로그래밍을 하되 OS에서 제공하는 API들 역시 이용할 수 있게 해준다는 의미로 받아들이면 얼추 맞다. JetBrains WebStorm에서 electron-vite 디버그 그렇다면 electron-vite 디버그는 어떻게 해야 할까? 결론부터 말하자면 그냥 electron을 디버그하는 것과 크게 다르지 않다. npm dev 수정 일단 npm run dev 를 실행하는 기본 구성 파일을 수정한다. 2 Arguments 에 --sourcemap 을 추가해주고 Environment 에 REMOTE_DEBUGGING_PORT={디버그 포트} 를 추가한다. 난 공식 사이트 를 따라 9222 로 지정하였다. 위 프로젝트 설정은 해당 Run/Debug 설정으로 Run/Debug할 때 소스맵을 제공하면서 디버그 포트를 적용시켜 후술할 Attach 기능이 작동할 수 있도록 한다. Attach to Node.js/Chrome 설정 생성 이제 디버그 포트가 열린 채로 켜진 일렉트론 렌더러를 디버그하기 위해 렌더러 프로세스에 부착할 디버거 설정을 진행할 차례이다. Electron은 크로미움 기반 브라우저 위에서 돌아가기 때문에, CEF 프로그램 또는 크로미움 기반 브라우

Visual Studio Code의 탐색기 항목 indent 조정하기 VSCode 탐색기 들여쓰기 조정하기 탐색기 들여쓰기 다른 IDE를 쓰다가 VSCode를 사용하면 불편한 점이 몇 가지 있지만 가장 눈에 띄는 불편함은 바로 탐색기 트리의 들여쓰기 너비이다. 8픽셀짜리 좁아터진 indent 내 시력이 나쁜 편이 아닌 데도 불구하고 VSCode의 탐색기 화면만 보면 눈이 아파온다. 특히 피곤할 때는 더. Explorer Indent 너비 조정 VSCode의 불편한 점은 대개 두 가지 방법으로 해결할 수 있는데, 한 개는 확장 프로그램 설치, 다른 한 개는 설정 조정이다. 이번 문제는 설정 변경 으로 해결할 수 있었다. Workspace 설정 변경 VSCode의 설정은 여러 방법으로 변경할 수 있는데, 주로 IDE 내에서 텍스트 또는 UI로 변경하게 된다. 당연히 이 설정 역시 두 가지 방법을 사용해 변경할 수 있으므로 하나씩 알려주도록 하겠다. UI로 변경 Ctrl + Shift + P 또는 <F1> 키를 눌러 Preferences: Open Settings (UI) 항목을 연다. 1 Workbench - Appearance 항목으로 이동해 Tree: Indent 섹션의 값을 적절히 변경한다. JSON으로 변경 Ctrl + Shift + P 또는 <F1> 키를 눌러 Preferences: Open User Settings (JSON) 항목을 연다. "workbench.tree.indent": 숫자 를 입력해 너비를 조정한다. 저장하면 바로 반영된다. 결과 기본 단축키: Ctrl + , . Workspace 가 아닌 User 탭에서 진행해야 모든 워크스페이스에 설정이 적용된다. ↩︎

Vite + Electron + React 환경에서 svgr 사용하기 electron-vite Vite를 한 번 쓴 뒤로는 Webpack으로 돌아가지 못하는 몸이 되었다. 압도적인 빌드 및 HMR 속도를 한 번 겪어보니 도저히 돌아갈 엄두가 나지 않는다. 이번에 진행하고 있는 프로젝트에서 처음에는 닷넷/WPF로 작성하려다가 이것 저것 조건을 따져보니 일렉트론을 쓰는 게 낫다 판단되어 일렉트론으로 전환하였고, 기본 일렉트론 가이드대로 따라보니 웹팩의 느려터진 빌드 속도가 짜증나서 electron-vite 를 사용하게 되었다. SVG Component 이번 프로젝트에는 마치 포토샵마냥 도구 툴바를 구현해야 하는 부분이 있다. 대부분은 heroicons 이나 @mui/icons-material 로 해결이 되었지만 안 되는 부분 역시 있었기에 이러한 부분은 직접 제작한 SVG나 무료 라이센스의 SVG를 받아서 쓰려 했다. 문제는, SVG 컴포넌트를 사용하려 하니 자꾸 에러가 났다는 것이다. vite-plugin-svgr SVG 컴포넌트를 사용하기 위해 vite-plugin-svgr 을 패키지에 추가했다. 설정하라는 대로 env.d.ts도 수정하고, electron.vite.config.ts도 수정했지만 정상적으로 작동하지 않았다. SyntaxError : The requested module '/[CENSORED]/move-arrows.svg?t=1699422381493&import' does not provide an export named 'ReactComponent' ( at [ CENSORED ] . tsx ? t = 1699422908031 : 26 : 10 ) import문은 다음과 같다. import { ReactComponent as MoveArrows } from "@assets/move-arrows.svg" ; 문제 파