DEV/Frontend23

• React Listener 메모리 누수 영어 버전 : [[Solving Memory Leaks with useEffect in React Applications]] React 애플리케이션에서 useEffect를 사용한 메모리 누수 해결하기 저는 개발 중인 Electron 앱의 뷰를 작업하는 동안 메모리 누수 경고를 만났습니다. 해당 경고를 보자마자 이 경고가 useEffect 훅에서 비롯된 것이라고 의심하였습니다. 왜냐하면 React의 useEffect는 컴포넌트의 생명주기 동안 부수 효과(side effects)를 관리하기 위해 사용되며, 이 훅을 잘못 사용하면 예상치 못한 방식으로 함수가 반복 실행될 수 있어 숨겨진 위험의 원천이 될 수 있기 때문입니다. 특히, 이벤트 리스너를 추가하고 제대로 청소하지 않을 경우 메모리 누수로 이어질 수 .. DEV/Frontend 2024. 2. 20.

• Electron 컴포넌트 link로 이동 시킨 후 캡처 안되는 이유 앱 전체를 아우르는 화면 캡처: Recoil 상태 관리의 힘 현대의 웹 애플리케이션 개발에서 상태 관리는 사용자 경험(UX)을 향상시키고, 앱의 동작을 예측 가능하게 만드는 중요한 역할을 합니다. 특히, ⚙️ React와 같은 모던 프런트엔드 라이브러리/프레임워크를 사용하는 경우, 전역 상태 관리는 앱의 다양한 부분에서 데이터를 쉽게 공유하고 업데이트할 수 있게 해줍니다. 본 블로그에서는 React 애플리케이션 내에서 전역적으로 화면 캡처 기능을 구현하기 위해 Recoil 상태 관리 라이브러리가 어떻게 필요했는지 탐구합니다. 상태 관리의 필요성 캡처 기능이 전역적으로 작동하려면, 어플리케이션의 모든 컴포넌트가 캡처된 데이터에 접근할 수 있어야 합니다. 왜냐하면, 캡처 기능은 전역적으로 어떤 뷰를 보여주든.. DEV/Frontend 2024. 2. 9.

• 리액트에서 Electorn API 메모리 누수 예방 Electron API에서 off 메서드 구현의 중요성 Electron 애플리케이션 개발 과정에서 이벤트 리스너의 관리는 앱의 성능과 안정성을 결정짓는 중요한 요소입니다. 특히, preload에서 정의한 electronAPI를 통해 렌더러 프로세스에서 메인 프로세스로의 이벤트 송수신을 처리할 때, 메모리 누수를 방지하기 위해 리스너를 적절히 제거하는 것이 필수적입니다. 이 글에서는 off 메서드를 구현한 이유와 리스너에서 발생하는 메모리 누수의 원인, 그리고 useEffect를 하나의 장소에 모으는 이유에 대해 설명합니다. off 메서드 구현의 이유 Electron에서 ipcRenderer를 사용하여 이벤트 리스너를 등록할 때, 이러한 리스너들은 특정 이벤트에 대해 반응하기 위해 메모리에 상주하게 됩니다.. DEV/Frontend 2024. 2. 9.

• MUI 적용 가이드 - React 프로젝트에 MUI 통합하기 MUI 적용 가이드: React 프로젝트에 MUI 통합하기 Material UI(MUI)는 React 기반 프로젝트에 멋진 UI 구성 요소를 손쉽게 추가할 수 있게 해주는 인기 있는 라이브러리입니다. 이 가이드에서는 MUI의 기본 개념부터 실제 React 프로젝트에 적용하는 방법까지 담백하고 핵심적인 내용을 다룹니다. MUI란 무엇인가? MUI는 Material Design 원칙을 기반으로 한 React 컴포넌트 라이브러리입니다. 개발자가 고품질의 UI를 빠르게 구축할 수 있도록 다양한 미리 만들어진 컴포넌트를 제공합니다. MUI를 사용하면 애플리케이션의 일관성과 접근성을 향상시키면서 개발 시간을 크게 단축시킬 수 있습니다. MUI의 작동 원리 MUI는 React의 구성 요소 기반 아키텍처를 활용하여, .. DEV/Frontend 2024. 2. 9.

• React Naviation 추가하는 방법 React 프로젝트에 네비게이션 바 추가하기: 고도화된 가이드 React를 활용한 ⚙️ SPA(Single Page Application) 구축은 개발자들 사이에서 인기를 끌고 있습니다. 특히 네비게이션 바는 앱 내에서 사용자가 다른 페이지로 손쉽게 이동할 수 있게 하는 핵심 요소입니다. 본 문서는 React 프로젝트에 네비게이션 바를 전역적으로 통합하는 방법을 단계별로 설명합니다. 기술 정의 전역 라우팅의 이해: App.tsx에서 BrowserRouter를 사용해 설정하면, 전체 앱에 걸쳐 단일 페이지 어플리케이션이 구현됩니다. 이는 앱 전체에서 페이지를 전역적으로 렌더링하는 기능을 수행합니다. SPA의 매력: React를 통한 SPA 구현은 페이지 로딩 없이 콘텐츠를 동적으로 렌더링할 수 있게 하여 .. DEV/Frontend 2024. 2. 9.

• 드래그 영역 시각화 및 깜박임 방지 드래그 영역 시각화 향상 및 깜빡임 방지 사용자의 드래그 작업을 시각적으로 나타내고 드래그 작업 중 깜빡임을 방지하여 웹 페이지에서 매끄러운 사용자 경험을 제공하려면 HTML, CSS 및 JavaScript에 대한 심층적인 이해가 필요합니다. 이 문서에서는 깜빡임이 없는 드래그 앤 드롭 상호작용을 구현하기 위한 고급 기술을 탐색하며, 깜빡임의 원인을 파악하고 이를 완화하는 솔루션을 제공합니다. 또한 성능과 사용자 경험에 중점을 둔 드래그 영역 시각화를 구현하는 방법에 대해 논의하겠습니다. 드래그 작업에서 깜빡임 이해 드래그 작업 중의 깜빡임은 종종 브라우저의 기본 드래그 앤 드롭 작업 처리에서 발생합니다. 사용자가 웹 페이지 요소에서 드래그 작업을 시작하면 브라우저는 네이티브 드래그 앤 드롭 기능의 일환.. DEV/Frontend 2024. 2. 6.

• Invariant failed You should not use <Route> outside a <Router> Invariant Failed You Should Not Use Outside a 문제 상황 개발 중, 리액트 애플리케이션에 react-router-dom을 사용하여 페이지 라우팅을 구현하려고 할 때 아래와 같은 에러 메시지가 발생했습니다. 에러 메시지 Error: Invariant failed: You should not use outside a 이 메시지는 컴포넌트가 컴포넌트의 외부에서 사용되었을 때 나타납니다. 원인 분석 컴포넌트는 반드시 컴포넌트(예: , )의 내부에 위치해야 합니다. 이 규칙이 지켜지지 않으면 라우팅이 제대로 작동하지 않습니다. 프로젝트 구조상 컴포넌트의 포함이 누락되었거나, 잘못된 위치에 배치된 경우가 있을 수 있습니다. 해결책 1. 컴포넌트 확인 모든 컴포넌트가 안에 존재하는.. DEV/Frontend 2024. 2. 4.

• React 프로젝트가 로딩 되기 전에 Electron이 구동 되어 버릴 때 해결 방법 React 프로젝트가 로딩 되기 전에 Electron이 구동 되어 버릴 때 해결 방법 React 개발 서버가 완전히 준비된 후 Electron 앱이 시작되도록 설정하기 위해 wait-on 도구를 사용할 수 있습니다. wait-on은 특정 URL, 파일, 또는 포트가 사용 가능해질 때까지 기다리는 데 사용되는 유틸리티입니다. 이를 통해 Electron 앱이 React 개발 서버가 완전히 준비된 후에 시작되도록 구성할 수 있습니다. wait-on 설치 먼저 wait-on을 설치해야 합니다. 프로젝트의 루트 디렉토리에서 다음 명령어를 실행하세요: npm install --save-dev wait-on 또는 yarn을 사용하는 경우: yarn add --dev wait-on 설치가 완료되면, package.js.. DEV/Frontend 2024. 1. 26.

• Electron Browser Window 숨기는 방법 Electron Browser Window 숨기는 방법 방법 : mainWindow?.hide();, mainWindow?.show(); 목적 Electron 앱이 캡처 과정에 직접 개입하지 않도록 하여, 보다 정확한 화면 캡처를 가능하게 합니다. 😄 캡처 지연: 화면 캡처를 시작하기 전에 약간의 지연 시간(예: 1-2초)을 두어 Electron 앱 창을 최소화하거나 숨길 시간을 제공합니다. 이렇게 하면 desktopCapturer가 Electron 창을 제외한 나머지 화면을 캡처할 수 있습니다. ipcMain.on("capture-screen", async (event) => { // 창을 숨기거나 최소화 mainWindow?.hide(); // 약간의 지연 후 캡처 setTimeout(() => { .. DEV/Frontend 2024. 1. 24.

• Electron 개발환경에서 캡처가 되지 않았던 이유 Electron 개발환경에서 캡처가 되지 않았던 이유 Electron에서 desktopCapturer API를 사용하여 화면을 캡처할 때, 다른 애플리케이션이 보이지 않고 오직 빈 배경화면만 나타나는 문제가 있었습니다. 여러 다른 라이브러리를 사용해 보았지만, 동일한 문제가 지속되었고, 이는 권한 문제로 의심되었습니다. 이에 대한 문제 해결 과정을 아래에 기록합니다. MacOS의 보안 정책 MacOS Catalina(10.15) 이상 버전에서는 새로운 보안 및 개인 정보 보호 기능들이 도입되었습니다. 특히 ‘화면 녹화’ 권한이 중요한 부분 중 하나입니다. Electron 앱이 화면을 캡처하려면 사용자로부터 명시적인 허가가 필요합니다. 이 권한 없이는 Electron 앱이 빈 화면이나 배경화면만을 캡처할 .. DEV/Frontend 2024. 1. 24.

• Base64 Base64 Base64는 바이너리 데이터를 ASCII 문자열로 변환하는 인코딩 방식입니다. 이 방식은 바이너리 데이터를 텍스트 형식으로 안전하게 전송하거나 저장할 수 있게 해줍니다. Base64는 주로 이메일 메시지의 첨부파일, 웹에서 이미지 데이터를 전송하거나, 복잡한 정보를 URL 안에 인코딩하는 데 사용됩니다. Base64 인코딩은 바이너리 데이터를 6비트 단위로 잘라서 64개의 인코딩된 문자 중 하나를 대응시킵니다. 만약 입력 데이터의 길이가 6비트가 안되어 공백을 채워야 한다면, 패딩 문자 '='가 추가됩니다. 예제 : Base64를 HTML 소스로 바로 입력해보자 Base64 Encoded Image An image from Base64 data: img 태그의 src 속성에서 "data:i.. DEV/Frontend 2023. 5. 13.

• React Rout로 Login Redirect 하는 방법 Intro. 무슨 문제가 있었는가 Login을 하지 않고, 바로 회원 등록 페이지인 register로 리다이렉팅 되는 것을 구현하던 중 발생한 문제 해결 방법이다. if (googleAuth == null || googleAuth?.status == "REGISTER") { navigate("/"); } Hook을 써서 유저를 판단하고 페이지 접근을 제어하는 모듈이 따로 존재하기에, 위의 코드처럼 register 페이지에 navigate(“/”)를 붙였더니 에러가 발생 했다. Can’t perform a React state update on a component that hasn’t mounted yet 에러인데, 요약하면, 렌더링하는 동안 state에 접근하면 안된다는 것이다. 내가 작성한 코드 흐름.. DEV/Frontend 2023. 2. 15.