VamosDev의 개발 브이로그

취지 보안과 안정적 통신 preload.js의 역할 1. 보안을 유지하면서 Node.js 기능 사용 가능 Electron에서는 렌더러 프로세스(브라우저 환경)에서 require, fs, path 등 Node API를 직접 사용하는 건 매우 위험해요 (XSS, remote code injection 등의 보안 위협).그래서 일반적으로 nodeIntegration: false, contextIsolation: true로 설정함➡ 이때 preload.js는 Node.js와 브라우저의 중간 지점 역할// preload.jsconst { contextBridge, ipcRenderer } = require('electron');// 렌더러에서 electron 객체를 사용할 수 있게 함contextBridge.e..

1. 정의- 미래에 완료될 비동기 작업의 최종 완료 또는 실패 결과를 나타내는 객체 2. 왜 사용하는가?Javascript는 싱글 스레드에서 돌아가기 때문에, 시간이 오래 걸리는 비동기 작업(예: API 요청, 타이머, 파일 읽기 등)에 대해 결과가 오기까지 기다릴 수 있도록 하는 방법이 필요함. (기존에는 콜백 함수 구조를 이용했지만, '콜백지옥'이 발생할 수 있는데, Promise는 이를 해결해줌) 3. Promise의 상태 1) pending : 아직 완료되지 않음 2) fullfilled : resolve()가 호출됨 – 성공 3) rejected : reject()가 호출됨 – 실패 4. new Promise()의 형태로 사용하는 이유 - Promise는 클래스임. - 즉, Promi..

1. .on() - 기본적인 이벤트 리스너 - 이벤트를 수신하기 위해 대기 상태로 유지되기 때문에 불필요한 메모리 소모가 발생할 수 있음 - removeAllListener를 return 하여 이벤트 리스너를 정리해주는 것이 좋음 2. .once()- 호출 시 이벤트 수신 기능이 작동하면 1회 수신 시 Electron이 알아서 리스너를 정리함.- removeAllListener를 따로 return 할 필요가 없음 * 참고- 비동기 이벤트의 return 값을 return하기 위해서는 반드시 Promise 객체를 생성해야 함.

1. 동기 / 비동기 1) 동기- 코드가 같은 회기에 실행됨. 즉 한 회기에 모든 코드가 위에서 아래로 순차적으로 실행됨- 작업의 시작 시점이 순차적이라는 뜻임. 2) 비동기 - 코드가 같은 회기 안에 실행되지 않음. 즉 한 회기에 모든 코드가 순차 실행되지 않음. - 시간이 오래 걸리는 작업은 "나중에 처리" 하고 다음 코드부터 실행 ex ) setTimeout, fetch, 이벤트리스너 등 2. async / await 1) await 는 비동기 작업이 끝날 때까지 기다리는 키워드, await가 있으면 해당 줄에서 잠깐 멈췄다가, 완료되면 다음 줄 실행2) await는 async 함수 안에서만 사용 가능3) 기본적으로 모든 코드들은 위에서부터 순차적(동기적)으로 실행되는데, 작업의 시작 시점은 ..

Typescript가 해당 이미지의 확장자를 타입으로 인식하지 못하기 때문에 발생한 문제.따로 타입을 선언해주면 됨.아래는 타입을 선언하는 방법. 1. src > type > image.d.ts 파일 생성( 경로나 파일명은 src/types.d.ts 또는 src/@types/custom.d.ts 등이어도 무관함) declare module "*.png" { const value: string; export default value; } declare module "*.svg" { const value: string; export default value; } 2. tsconfig.json에 타입 선언 경로가 포함되도록 설정{ "compilerOptions": { "typ..

[생성 원인] 🔹 .css 파일SCSS는 브라우저가 직접 읽을 수 없기 때문에, 브라우저가 이해할 수 있는 CSS로 컴파일해줘야 해. 이때 생성된 결과물이 .css 파일이야.예:style.scss → style.css 🔹 .css.map 파일 (소스맵)이건 소스맵 파일로, 디버깅할 때 사용돼.개발자 도구에서 스타일이 적용된 부분을 확인할 때, 실제로 컴파일된 .css 파일이 아닌 원래의 .scss 파일의 몇 번째 줄에서 왔는지 추적할 수 있게 도와줘.예:Chrome 개발자 도구에서 .scss 파일의 줄 수를 기준으로 스타일을 추적 가능함. ✨ 왜 생성되냐면?SCSS를 컴파일할 때 사용하는 도구(Sass CLI, Webpack, Vite, etc.)나 설정에서 .map 파일 생성을 기본으로 하거나 명시..