exhibitlove

에러 메시지:Invariant Violation: Expected drag drop context이 에러는 React DnD(Droppable/Draggable) 혹은 react-beautiful-dnd와 같은 라이브러리를 사용할 때, Draggable 또는 Droppable 컴포넌트가 반드시 상위에 DragDropContext로 감싸져 있어야 하는데, 그것이 없거나 올바르게 감싸지지 않았을 때 발생합니다.✅ 확인해야 할 사항1. DragDropContext로 감싸져 있는가?react-beautiful-dnd를 사용하는 경우 기본 구조는 다음과 같아야 합니다:import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'; ..

아주 중요한 질문입니다.✅ 정리하자면:React 클라이언트가 백엔드에서 Set-Cookie로 준 쿠키를 자동으로 저장하고 읽으려면,보안 설정 + CORS 설정이 정확히 맞아야 합니다.✅ 기본 전제: 클라이언트가 백엔드에서 준 쿠키를 저장하고 사용하는 조건요구 조건 설명1. 백엔드에서 Set-Cookie 헤더 전송예: Set-Cookie: SESSION=abc123; HttpOnly; SameSite=None; Secure2. 프론트 요청에 credentials: 'include' 지정fetch, axios, XMLHttpRequest 등3. 백엔드가 CORS 응답에 Access-Control-Allow-Credentials: true 포함그렇지 않으면 쿠키 무시됨4. SameSite 설정SameSite=..

Web Worker는 JavaScript의 멀티스레딩을 가능하게 해주는 브라우저 API입니다. 즉, 무거운 작업을 메인 스레드(UI 스레드)와 분리해서 실행할 수 있도록 해줍니다.🔧 1. 왜 필요한가?JavaScript는 단일 스레드(single-threaded) 언어입니다.그래서 긴 루프, 대용량 계산, 데이터 파싱 등 무거운 작업을 실행하면 UI가 멈추거나 렌더링이 지연됩니다.📌 이때 Web Worker를 사용하면:무거운 연산을 백그라운드 스레드에서 처리UI는 끊김 없이 반응성 유지🧠 2. 어떻게 작동하나?Web Worker는 별도의 파일을 만들어서 사용하는 방식입니다.main.js는 UI 스레드, worker.js는 백그라운드 스레드로 실행됩니다.예시:🔸 worker.js// worker.j..

출처 : https://velog.io/@integer/React.memo%EC%99%80-useMemo Memoization이란?메모이제이션은 비용이 많이 드는 함수 호출의 결과를 저장하고 동일한 입력이 다시 발생할 때 캐시된 결과를 반환하여 컴퓨터 프로그램의 속도를 높이는데 주로 사용되는 최적화 기술이다.https://www.inflearn.com/course/따라하는-리액트/dashboard React.memoReact.memo란?React.memo는 고차 컴포넌트(Higher Order Component)입니다.컴포넌트가 동일한 props로 동일한 결과를 렌더링해낸다면, React.memo를 호출하고 결과를 메모이징(Memoizing)하도록 래핑하여 경우에 따라 성능 향상을 누릴 수 있습니다. 즉..

해주신 TypeScript 코드는 **폼 입력값을 처리하는 함수(handleInputChange)**로, 특정 섹션의 특정 인덱스 항목의 특정 필드를 수정한 뒤 상태(state)를 업데이트하는 기능을 합니다. 문법과 구조를 단계별로 설명드릴게요.🔷 함수 전체 구조export const handleInputChange = ( section: string, index: number, field: string, value: string, dataMap: { [key: string]: { data: { year: string; type: string }[]; setData: React.Dispatch>; }; }) => { ... };✅ 함수 이름 및 exportexpo..

출처 : https://inpa.tistory.com/entry/JS-%F0%9F%9A%80-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%B5%9C%EC%8B%A0-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC-ES6-ES12 const obj1 = { key: 'key1' }; const obj2 = { key: 'key2' }; const array = [obj1, obj2]; // array copy const arrayCopy = [...array]; console.log(arrayCopy); // [ { key: 'key1' }, { key: 'key2' } ]  const arrayCopy2 = [...array..

출처 : https://velog.io/@kimhyesu-_-/JavaScript-%EB%B9%84%EA%B5%AC%EC%A1%B0%ED%99%94-%ED%95%A0%EB%8B%B9%EA%B5%AC%EC%A1%B0%EB%B6%84%ED%95%B4%ED%95%A0%EB%8B%B9 let fruit = ['Apple','Banana', 'Peach'];let Apple = fruit[0];let Banana  = fruit[1];let Peach = fruit[2]; ==> 대신 아래와 같이 한줄로 변수를 할당할 수 있다. let fruits = ['apple','banana','peach'];let [apple, banana, peach] = fruits; console.log(apple);console...

[attribute]$("[name]")속성 name을 갖고있는 요소출처: https://inpa.tistory.com/entry/jQuery-📚-제이쿼리-선택자-Selector-💯-정리#속성_선택자_attribute [Inpa Dev 👨‍💻:티스토리]