자바스크립트

본 문서는 https://react.dev/blog/2024/12/05/react-19 블로그 글을 ChatGPT를 통해 번역한 내용입니다. 번역에 오역 또는 의역이 있을 수 있습니다.본문을 확인하고 싶으신 분은 위 사이트를 접속하여 확인 하시기 바랍니다.React 19의 주요 개선 사항ref를 prop으로 사용React 19부터 함수 컴포넌트에서 ref를 prop으로 사용할 수 있습니다:function MyInput({ placeholder, ref }) { return ;}// 사용 예시;이점:새로운 함수형 컴포넌트에서는 더 이상 forwardRef가 필요하지 않습니다.변환 지원:기존의 forwardRef를 사용하는 컴포넌트를 새 방식으로 변환하는 코드를 자동으로 업데이트하는 codemod를 제공할..

본 문서는 https://react.dev/blog/2024/12/05/react-19 블로그 글을 ChatGPT를 통해 번역한 내용입니다. 번역에 오역 또는 의역이 있을 수 있습니다.본문을 확인하고 싶으신 분은 위 사이트를 접속하여 확인 하시기 바랍니다. React 19의 새로운 기능: ActionsReact 앱에서 자주 사용되는 시나리오 중 하나는 데이터를 변경하고 그에 따라 상태를 업데이트하는 것입니다. 예를 들어, 사용자가 이름을 변경하는 폼을 제출하면 API 요청을 수행한 후 응답을 처리해야 합니다. 이전에는 대기 상태, 오류 처리, 낙관적 업데이트(optimistic update), 순차적 요청 등을 수동으로 처리해야 했습니다.이전 방식: useState를 사용한 상태 관리아래는 useStat..

배경회사 개발 업무 중 ZeroMQ 를 무조건 사용해야하는 상황이 생겼다.협력사들이 다 이걸 쓰고 있다고 하니 맞춰야하는 상황이다. 대충보니 ZeroMQ는 아주 간단한 메세지  통신에 사용하기에 좋아 보였다. 사용법도 간단했다.근데 문제는 Electron Framework에 넣고 게다가 라즈베리파이 ( arm64) 환경에서 이 앱이 돌아가야 했기에.. 실행해봤다.하....AJavaScript error occurred in the main processUncaught Exception:Error: Failed to load zeromq.js addon.node: Error: ENOENT, node_modules/zeromq/build/linux/arm64/node not found in /tmp/.mou..

환경 세팅홈페이지 개발 사유입사 후 회사 홈페이지를 보니 난리도 이런 난리가 없었다.기존 홈페이지는 외주를 통해 구현된 워드프레스 기반 사이트였는데, 사이트를 접속하면 바로 성인 사이트 광고가 나오고 있었다. 이걸 제대로 디버깅하고 싶어도, 악성 스크립트가 매번 발생되는게 아니라 간헐적으로 어쩌다가 발생되도록 되어있다 보니 잡긴 쉽지 않았다. 뭐 현상을 보고나서 바로 알 수 있던 건  전형적인 워드프레스 보안 취약점 공격이라는 것이었다.확인해 보니 악성 스크립트 코드를 포함시킨 이미지로 교체되어 있었고 해당 이미지가 로드되는 순간 브라우저에서 악성 스크립트가 발생되도록 처리되어 있음을 확인했다.당연히 관리자 비밀번호도 넘어가도록 키로그처럼 아주 잘해놓은 것으로 보였다. 사내 확인 결과, 워드프레스를 기반..

이슈Window NSIS 빌드 후 윈도우에서 실행시 위 사진과 같은 경고창과 함께 설치가 불가한 이슈 발생 {프로그램명} cannot be closed. Please close it manually and click retry to continue. (무한 다시시도)발생 버전Electron Builder 25.1.7테스트 시행 결과22.14 버전에선 이슈가 없음.Github Issue 서치 결과 문자열의 길이가 길어서 발생한 이슈라고들 하지만, C:\ 로 설치폴더를 지정하고 최대한 글을 짧게 해도 발생됨을 확인 해결 방안 (총 3가지)CRC Check Off 처리 node_modules/app-builder-lib/templates/nsis/common.nsh 에서 맨 마지막 줄 CRCCheck off ..

ESM 지원 CommonJS로만 개발되던 많은 프로그램들이 ESM을 지원하는 경우가 점점 늘고 있다. 대표적인 예로 몇 가지를 들어보면 google Lighthouse, Express.js , Mongoose (MongoDB ODM)등을 들 수 있다. 국내에서는 카카오테크에서 작성한 CommonJS에서 ESM으로 전환하기를 보면 다음의 문장을 확인할 수 있다. 구글의 Lighthouse 10 버전은 모듈 시스템이 CommonJS에서 ESM으로 전환되었기 때문에 CommonJS의 require() 함수로는 ESM 시스템의 모듈을 불러올 수 없게 되어있다 CommonJS에서 ESM으로 전환하기 안녕하세요, FE플랫폼팀에서 FE 개발자를 위한 개발을 담당하는 Ethan입니다. 이 글에서는 운영 중인 서비스에서..

에러 $ C:\Test\node_modules\.bin\electron-builder --config ./buildConfig.json --win --x64 -p always • electron-builder version=24.9.1 os=10.0.22631 • loaded configuration file=C:\Test\buildConfig.json • writing effective config file=C:\build\builder-effective-config.yaml • packaging platform=win32 arch=x64 electron=28.2.0 appOutDir=C:\build\win-unpacked • downloading url=https://github.com/electro..

Next.js 14 Jotai latest 버전으로 업데이트 후 아래와 같은 메시지를 마주했다.Detected multiple Jotai instances. It may cause unexpected behavior with the default store. https://github.com/pmndrs/jotai/discussions/2044원인Jotai 를 사용하는 다른 Npm을 사용하는 경우 다양한 라이브러리에서 Jotai가 사용되어 생기는 경우일 가능성이 높다.즉, 여러 Jotai 인스턴스들이 default store에 동시다발적으로 접근하는 경우에 발생하는 이슈. 배경Next JS App router 기반으로 구현하고 별다른 라이브러리는 깔지 않았는데도 이런 이슈가 발생했다.Root Layout..

위 사례처럼 고정포트를 내부 로컬서버에서 사용해야하는 경우를 비롯해 중복으로 켜지면 곤란한 상황에는 무조건 하나의 인스턴스만 켜질 수 있도록 아래의 코드를 추가한다. // only one instance const insLock = app.requestSingleInstanceLock(); if (!insLock) { app.quit(); }

Electron Framework 를 VsCode에서 개발진행하는 경우 디버깅을 하기 위해서는 설정이 필요하다. 다음 그림과 같이 내부 .vscode 폴더를 만든 후 launch.json 파일을 만들어준다. launch.json 내용은 다음과 같다. { "version": "0.1.0", "configurations": [ { "name": "Debug Main Process", "type": "node", "request": "launch", "cwd": "${workspaceFolder}", "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron", "windows": { "runtimeExecutable": "${workspaceFo..