VamosDev의 개발 브이로그

ts project에 .js 형식 파일이 있을 경우tsconfig.json의 첫번째 꺽쇠에서 아래와 같은 오류가 .js 파일 개수만큼 발생.dev 모드 실행은 정상적으로 되나 build는 안되는 상황.(VS Code에서 확인함) 오류 메시지>Cannot write file {경로} because it would overwrite input file. 오류 해석 >"내가 변환한 결과물을 src/index.js에 덮어쓰려 했는데, 이건 입력 파일이라 위험해서 안 돼" 🔍 언제 발생하나요?이 오류는 보통 아래 경우에서 발생합니다:Babel, TypeScript, Webpack, tsc 등 빌드 도구가 src 폴더를 직접 덮어쓰려 할 때예를 들어 tsc 명령어로 TypeScript를 컴파일할 때 outD..

[문제 상황]리스트의 값을 .map()하여 자식 요소를 여러개 렌더링함.리스트의 값을 하나만 변경해도 해당 원소가 아닌 다른 원소를 참조하는 모든 값,즉, 그 리스트를 참조하는 모든 자식 요소가 리렌더링 되는 상황 발생.memo도 적용되지 않음. [원인]'자식 요소'는 '부모 요소' 안에서 선언되어 있었고, useSate()로 관리되는 변화가 있는 '부모 요소'의 값을 직접 사용하였다.그대로 '부모 요소' 안에 선언해둔 채로 직접 '부모 요소'의 값을 사용하지 않고 props로 받도록 수정하였는데 그래도 의미가 없었다. [문제 해결]1 .자식요소를 별도의 파일로 만들어 컴포넌트화 함.2. 부모요소에서 해당 자식 요소를 import 함3. 필요한 모든 부모의 값들을 props로 자식요소에 전달=> 즉, 자..

[적용 상황]어떤 자식요소의 트리거를 위해 부모요소에서 특정 상태 또는 값을 업데이트 하니,다른 자식요소(형제요소)까지 불필요하게 리렌더링 되는 현상 발생= > 이를 해결하기 위해 "자식요소의 트리거를 자식요소 내부에서 선언하고 그 트리거만 외부로 전달하도록 함" [사용방법]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 순서 중요 등)