React로 개발하다 보면, 분명히 useEffect에 한 번만 API를 넣었는데… API 요청 로그가 두 번씩 찍히는 현상을 경험하신 적 있으신가요? 저도 Electron + React 기반 사내 프로젝트를 하다가, “어? 내 코드가 잘못된 건가? 서버가 중

Electron + Vite로 개발하면서 VM 환경에서 패키징을 하다 보면,“같은 코드, 같은 설정인데 엔진이 안 열린다”는 이상한 상황을 겪는 경우가 있습니다.처음에는 단순한 VM(가상머신) 속도 문제겠거니 하고 넘어갔지만,문제는 하루이틀이 아니라 빌드할 때마다 가끔

프론트엔드 개발자라면 누구나 한 번쯤 console.log("확인")을 찍어본 경험이 있을 겁니다. 저도 그랬습니다.디버깅의 든든한 친구, 언제 어디서나 호출하면 나타나는 log 친구.하지만 Electron 프로젝트에선 이 친구가 성능 병목의 주범이 될 수도 있습니다.

안녕하세요! 프론트엔드 개발자 연지입니다. 정신없이 달리다 보니 벌써 2025년 반이 지나갔네요. 지난 6개월은 정말 제 커리어에서 다이내믹하고 가장 진심이 담긴 시기였어요. 처음으로 프로젝트를 리딩했고, 처음으로 데스크탑 앱을 만들었고, 처음으로 스스로 부

시스템 커널 단에 접근하거나 드라이버를 후킹하고, 보안 모듈을 붙이는 작업을 진행하다 보면 이런 생각이 듭니다.“이 작업, 잘못 붙였다간 블루스크린(BSOD) 뜨는 거 아닌가요?”실제로 커널 단 작업은 단 하나의 실수만으로도 시스템이 멈추거나 부팅이 불가능해질 수 있습

Electron 앱을 개발하다가 .env 파일로 API 주소 같은 환경변수를 넣고 싶어서 이렇게 작성했어요.Node 환경에서 이 방식은 너무 당연하잖아요?그런데 Electron에서는… 왜 이게 안 될까요?Electron의 메인 프로세스(Main Process)는 실제로

프론트엔드 개발을 하다 보면 코드 리뷰에서 이런 말을 자주 듣게 됩니다.“이거 구조분해 안 했어?”“props에서 구조분해 해주세요”“store 값 구조분해해서 써주세요”그렇다면 이 구조분해란 정확히 무엇일까요?그리고 왜 쓰는 게 좋고, 언제 쓰면 오히려 독이 되는 걸

프론트엔드 프로젝트를 하다 보면 함수 이름 앞에 \_(언더스코어)가 붙은 코드를 종종 보게 됩니다.예를 들면 \_getUser, \_registerLeader 같은 함수들이죠.처음엔 단순한 스타일 차이 정도로 생각하기 쉽지만,실제로는 이 방식이 실무에서 꽤 널리 쓰이는

웹소켓 기반 애플리케이션을 운영하다 보면 가장 많이 마주치는 이슈가 바로👉 "연결이 끊겼는데도 UI는 멀쩡해 보이는 문제"입니다.특히 절전모드(슬립)나 노트북 덮기, 탭 전환 후 장시간 방치 같은 상황에서는브라우저가 웹소켓을 끊었음에도 readyState === OP

보안 기능을 만들면서 실행 파일 감지를 하는데,생각보다 이런 경로가 많이 튀어나왔다:“어? EXE가 아니고 LNK네?”맞다. 대부분의 사용자는 프로그램을 직접 실행하는 게 아니라 시작메뉴 / 바탕화면 바로가기를 클릭한다.결국 .lnk 파일을 열어서 실제 실행 대상(EX

"개발 모드에선 100% 완벽하게 작동했는데요?"그 말, 배포 환경 앞에선 무력하다는 걸 여러분도 아시죠?이번엔 정말 ‘작동’은 했지만 데이터는 안 왔던 미스터리.그래서 무려 반나절 동안 머리 싸매고 추적한 로그 로그 로그…결론부터 말하자면?엔드포인트 오타 + 개발 모

로컬에서는 잘 되던 Engine.exe가배포만 하면…🥶 "엔진 파이프에 연결되어 있지 않습니다."Electron으로 만든 데스크탑 앱을 .exe로 패키징해서 배포했을 때 있었던 실제 사건입니다.분명 개발 중에는 아무 문제 없었습니다.엔진 잘 뜨고Named Pipe도

Electron으로 앱을 개발하고 있었습니다.기능도 제법 잘 돌아가고, UI도 다듬어지고, "이제 좀 완성 느낌 난다" 싶은 그 타이밍.그런데요.누군가 아주 가볍게,정말 아무렇지도 않게 말하더군요."설치파일 주세요~ 😊"...머릿속으로 이렇게 외쳤습니다:“드… 드린다

💡 결론 먼저 말하자면: > ❌ Node.js만으로는 사용자의 파일 선택 창을 띄우고 제어할 수 없습니다. > > > ✅ Electron은 Chromium + Node.js 조합이라서 그게 가능한 거예요. > 🔍 왜 Node.js는 파일 선택을 못 하는가? N

“사용자한테 .exe만 고르게 하고 싶습니다.다른 거? .zip? .txt? 고르지도 못하게 해주세요. 클릭도 못 하게요.”처음엔 정말 그게... 쉬울 줄 알았어요.React로 프로젝트를 짜다 보면 파일 선택이 필요하잖아요?저는 이걸 썼습니다.그리고 자신만만하게 .ex

처음엔 모든 게 좋았습니다.패널 레이아웃은 깔끔했고,리스트도 알맞게 스크롤됐고,헤더와 푸터도 착하게 자리잡고 있었어요.그런데... 어느 날부터"패널 내용이 화면을 뚫고 나온다" 😱리스트가 무한정 길어지고,스크롤은 안 생기고,푸터는 눌리고,화면은 무너지고..."아니,

프론트엔드 개발을 하다 보면 회원가입, 로그인, 프로필 수정 같은 화면을 정말 많이 만들게 됩니다.그리고 매번 반복해서 고민하게 되죠.❓ "이 입력값은 필수인가요?"❓ "비밀번호는 8자 이상이어야 하나요?"❓ "이메일 형식이 맞는지 어떻게 확인하죠?"이런 고민을 덜어주

React 프로젝트를 하다 보면 모달은 정말 자주 쓰입니다.그런데, 단순히 "모달 UI"만 있다고 해서 진짜 '모달답게' 동작하는 건 아니더라고요.최근 제가 겪었던 사례를 공유드리며,React Portal이 왜 필요한지, 그리고 기존 방식에서 어떤 문제가 있었는지 정리

“Vite와 Webpack, 둘 다 프론트엔드 빌드 툴인데 대체 뭐가 다르고 언제 써야 할까?” 궁금하신 분들을 위해 더 자세하게, 재밌게, 그리고 정의(What is…)까지 콕 집어 정리해 보았습니다. 🚀프론트엔드 개발을 하다 보면 “번들러(bundler)”를 한

Zustand, Recoil, Redux 등 상태 관리 라이브러리를 사용하다 보면 "selector" 라는 개념을 자주 접하게 됩니다.처음에는 “굳이 이걸 왜 써야 하지?” 싶은 생각이 들 수 있지만, 실제 프로젝트가 커질수록 selector의 필요성과 효율성을 체감하