JavaScript[JS]25 [ReactFlow] 에러 해결 방법 [React Flow]: The React Flow parent container needs a width and a height to render the graph. Help: https://reactflow.dev/error#004 이와 같은 에러가 계속 발생 1. width 값 설정 import { useState, useCallback } from "react"; import ReactFlow, { Controls, Background, applyNodeChanges, applyEdgeChanges, } from "reactflow"; import "reactflow/dist/style.css"; const initialNodes = [ { id: "1", data: { label.. 2024. 3. 18. [React] React hook의 useCallback 이란? useCallback메모이제이션 기법으로 컴포넌트 성능을 최적화 시켜주는 도구 💡 메모이제이션 이란?이전에 계산한 값을 메모리에 저장해두고, 동일하게 다시 사용할 수 있는 곳에서 재사용하여 반복적으로 발생하는 계산의 리소스를 줄이는 기법useMemo() : 자주 쓰이는 값을 메모이제이션 즉 캐싱해주는 것, 그리고 그 값이 필요할 때 다시 계산하는 것이 아닌 useMemo를 통해 캐싱을 한 값을 메모리에서 꺼내와서 재사용하고 인자로 콜백함수를 넣어주면 함수가 리턴하는 값을 메모이제이션 하는 것useCallback() : 인자로 전달한 콜백 함수 그 자체를 메모이제이션하는 것, 첫번째 인자로 넘어온 함수를 두번째 인자로 넘어온 배열 내의 값이 변경될 때까지 정장해놓고 재사용할 수 있게 함 📝 useCal.. 2024. 3. 18. [React 공식문서 이해하기] Managing State Choosing the State Structure ✅ Avoid deeply nested state 깊게 중첩된 state는 피하기 handleComplete 함수 해석 - 완료버튼을 클릭할 때 발생되는 함수로 nextParent에 클릭한 childId가 제외된 childIds가 새로 들어감 - 새로 만들어진 배열이 setPlan에 들어가 화면에 보여지게 됨 - .filter(id => id!==childId) : id들이 childId와 같지 않은 것만 childIds에 넣어주도록 함 --> 클릭한 childId가 2일 경우 [1,2,3,4,5] 가 있다면 filter 비교하여 [1,3,4,5]만 childIds에 들어가게 됨 Sharing State Between Components ✅ Liftin.. 2024. 2. 13. [React] CRA (Create React App) 기초 정리 Create React App 란? - 리액트 프로젝트를 시작하는데 필요한 개발환경을 세팅해주는 도구(개발환경을 쉽게 구축해줌) 꼭 필요한가? - React(JS 라이브러리) 는 UI 기능만 제공하므로 개발자가 직접 구축 해야하는게 많다는 단점이 있음 - But, CRA를 이용하면 하나의 명령어로 리액트 개발환경 구축이 가능하므로 개발자 입장에서 편리함 CRA 설치 - React npx create-react-app 폴더이름 - React + Typescript npx create-react-app 폴더이름 --template typescript - React + Next.js + Typescript npx create-next-app@latest --typescript CRA 설치 후 초기 파일 ① n.. 2023. 3. 23. [JS] 비동기 처리란?( +Promise, async&await ) 비동기 특정 코드의 연산이 끝날 때까지 코드의 실행이 멈추지 않고, 다음 코드를 먼저 실행하는 JS의 특성 Q. 비동기 객체를 사용하는 이유는? A. 화면에서 서버로 데이터를 요청했을 때 서버가 언제 그 요청에 답을 줄지 모르는데 계속 기다릴 수는 없음! 예를 들어 50개의 요청을 보내는 경우 동기 처리를 하게되면 코드를 "실행하고 기다리고" 과정이 반복되어 웹 애플리케이션 실행에 수십분이 걸리게 됨 Q. 동기와 비동기 특징은? A. 동기 는 동시에 여러 작업을 수행할 수 없음! 그러나 흐름을 예측하기 쉽고, 먼저 수행되고 나중에 수행되는 것들이 명확함 비동기 는 동시에 여러 작업을 수행할 수 있음! 그러나 흐름을 예측하기 어려움, 즉 무엇이 먼저 완료될 지 보장할 수 없음 흔한 비동기 사례 1. 제이쿼.. 2023. 3. 22. [React] 타입스크립트 오류 해결 💍Type 'string' is not assignable to type 'MouseEventHandler'. 오류해결 이벤트 핸들러란? 특정 요소에서 발생하는 이벤트를 처리하기 위해 사용하는 함수 이벤트 핸들러가 연결된 특정 요소에서 지정된 타입의 이벤트가 발생하면, 웹 브라우저는 연결된 이벤트 핸들러를 실행 onClick 마우스 클릭 시 ondbClick 마우스 더블클릭 시 onmousedown 마우스 버튼 누를 시 onmouseup 마우스 버튼에서 손 뗄 시 onmouseout 마우스 포인터가 요소를 벗어날 시 onmousemove 마우스 포인터가 요소 위에서 움직일 시 onmouseover 마우스 포인터가 요소 위에 올라왔을 시 onkeydown 키보드 누를 시 onkeypress 키보드를 누르고.. 2023. 3. 9. [TypeScript] "as HTMLElement" 오류 해결 아래와 같은 오류가 타입스크립트를 쓰다보면 종종 발생한다. 오류의 해결방법은 간단하다. getElementsById 혹은 getElementsByClassName 을 통해 받아오는 객체의 type을 지정해주면 된다! Property 'style' does not exist on type 'Element'. Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element | DocumentFragment'. Type 'null' is not assignable to type 'Element | DocumentFragment'. 수정된 코드는 아래와 같다! 핵심은 "as HTMLElement" 2023. 2. 24. [React] useNavigate()와 useLocation()으로 데이터 주고받기 보호되어 있는 글 입니다. 2023. 2. 15. [React] 이벤트에서 함수 호출 화살표함수 사용하여 호출- 클릭 시 실행(onClick), 변화 있을 때 실행(onChange) - 값을 넘겨야할 경우(=값이 있는 경우) - 렌더링 시 실행 X - () 안에 파라메타가 필요한 경우 넣어줘도 되고 없다면 안넣어줘도 됨 - 위 사진처럼 고정된 값을 넣어 불러올 수도 있음 - 함수에 파라메타 적용(고정값) 그냥 사용- 렌더링 시 실행X, 필요 시 호출 ( ) 사용 - 바로 호출시킬 때 - 함수 안의 속성값을 가져올 때 ( ex)getCurrentSelectedAttrValues의 attValue값을 가져오는 경우 ) - 렌더링 될 때마다 실행 2023. 1. 18. 이전 1 2 3 다음
