VamosDev의 개발 브이로그

[적용 상황]어떤 자식요소의 트리거를 위해 부모요소에서 특정 상태 또는 값을 업데이트 하니,다른 자식요소(형제요소)까지 불필요하게 리렌더링 되는 현상 발생= > 이를 해결하기 위해 "자식요소의 트리거를 자식요소 내부에서 선언하고 그 트리거만 외부로 전달하도록 함" [사용방법]1. 자식요소에서 컴포넌트를 forwardRef()로 감싼 후, props 옆에 ref를 넣는다. (ref는 임의의 명칭이 아니며, 다른 이름으로 바꿀 수 없다. 즉, 반드시 'ref'라고 기재해야 complile이 가능하다)2. useImperativeHandle을 이용하여 필요한 트리거 함수를 선언한다. ( useImperativeHandle: ref로 노출할 메서드나 값을 사용자 정의할 수 있게 해줌, 보통 ref를 붙이면..

[문제점]자식요소에서 부모요소에서 상태관리 중인 배열을 참조하고 있고,배열의 상태 조작 시(값 변경 시),해당 상태를 참조하고 있는 자식 요소 전체가 불필요하게 리렌더링 되는 상황이 발생함.(해당 원소를 참조하는 카드만 리렌더링되어야 함) 예)const ParentComponent = () => { const [list, setList] = usetate() // list의 원소 하나만 바뀌어도 모든 ChildrenCard가 리렌더링 됨. return ( {storeData.map((v: any, i: any) => ( )} )} [탐구과정] 1. Chat GPT에게 열심히 물어봤는데, 리액트는 값의 변화를 감지하기 때문에..

배열의 요소마다 async 적용 시, for ~ of 사용(.map과 비교) ✅ 핵심 차이 요약구분map(async) for...of + await 목적배열을 변환 (return 결과로 새 배열 생성)단순 반복비동기 제어await가 작동하지 않음 → 병렬 실행await 가능 → 순차 실행사용 추천 상황병렬 처리하고 .then() 또는 Promise.all로 처리할 때순차 실행이 필요할 때 (API 순서 중요 등)

취지 보안과 안정적 통신 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 파일 생성을 기본으로 하거나 명시..

1. main.js- 백엔드, 기능 구현 2. index.js- 프론트 엔드, dom 요소로 페이지를 직접 그리거나 router 등을 적용 1) .on('이벤트명', callBack함수) - 해당 이벤트명의 이벤트를 수신함. 수신되면 정해진 callBack 함수를 실행함. 2) .send('이벤트명', data) - 해당 이벤트명의 이벤트를 발신함. 발신 시 데이터를 보냄. 예) main.js > index.js >