본문 바로가기

전체 글43

사이드바 닫으면 스크롤이 맨 위로 올라가는 버그 해결기 (PrimeReact + Virtual Scroller) 🚨문제PrimeReact DataTable에서 *가상 스크롤(virtualScrollerOptions)*을 사용할 때,사이드바를 열고 특정 항목을 클릭하면 해당 인덱스로 잘 이동된다.하지만 사이드바를 닫았다가 다시 열면,화면이 맨 위로 올라갔다가 선택된 인덱스로 스크롤되는 문제가 발생했다. 👩‍🌾 원인 기존에는 사이드바 콘텐츠를 으로 숨기고 있었음display: none이 되면 내부 컴포넌트가 언마운트됨다시 열었을 때 새로 마운트되므로, 스크롤 위치가 초기화됨 →항상 1번부터 다시 렌더된 뒤 스크롤로 이동하는 버그 발생 ✒️ 해결 방법❌ 기존 방식display: active ? "flex" : "none"→ 렌더링 자체를 중단시켜 버리기 때문에 문제가 생김✅ 수정한 방식style={{ posit.. 2025. 3. 24.
Redux Toolkit Redux의 역할프로젝트 내 전역 상태 관리사용 중인 패턴Redux Toolkit을 사용한 slice 기반 상태 관리 (createSlice 사용)Ducks 패턴을 따르며, 한 파일에 state, reducers, actions 포함redux 사용 시1️⃣ 스토어 작성2️⃣ provider적용3️⃣ slice에서 액션, 리듀서 정의 : createSlice 사용해서 redux상태,액션을 한번에 정의4️⃣ selector 함수 생성 : redux상태를 가져오는 로직을 분리해 재 사용할 수 있도록 도와줌5️⃣ 컴포넌트에서 useAppSelector로 상태 가져오거나 useDispatch 사용해 상태 변경하며 사용한다 storeconfigureStore : redux 스토어를 쉽게 설정const store =.. 2025. 3. 19.
react-three/drei three.js journey강의를 듣고 작성합니다.OrbitControls✏️  마우스로 3d씬을 줌, 이동할 수 있도록 해주는 카메라 컨트롤러three.js 의 OrbitControls.js를 쉽게 사용할 수 있도록 한 버전 enableZoom줌 활성화 여부trueenableRotate회전 활성화 여부trueenablePan이동(Pan) 활성화 여부trueminDistance카메라 최소 줌 거리0maxDistance카메라 최대 줌 거리InfinityminPolarAngle아래쪽 회전 제한 (0이면 하단 완전 제한)0maxPolarAngle위쪽 회전 제한 (Math.PI이면 상단 완전 제한)Math.PItarget카메라가 바라볼 중심점[0, 0, 0]     makeDefaultorbitcontrols.. 2025. 2. 5.
R3F : react three fiber three.js journey강의를 듣고 작성합니다. 리액트 스크립트로 하려니까 계속 에러가 났음vite로 하니까 빠르고 잘된다 import {Canvas} from "@react-three/fiber";import Three from "./Three.jsx";function App() { return ( )}export default App 컴포넌트 호출하듯이 사용하면 된다부모 Canvas로 감싸주고 그안에 three라는 컴포넌트 호출함 아래는 three 컴포넌트 코드이다 import { extend, useFrame, useThree} from "@react-three/fiber";import { useRef} from "react";impor.. 2025. 2. 4.
Geometry three.js journey강의를 듣고 작성합니다. Three.js는 정점(Vertex)과 삼각형(Face)으로 Mesh를 만든다.3개의 정점(Vertex)으로 삼각형을 만들고, 이를 여러 개 이어서 객체를 구성한다.BoxGeometry6개의 매개변수가 있음width, height, depth, widthSegments, heightsegments, depthsegments   BufferGeometryattribute 기반 구조를 사용해 float32array:형식화된 배열 , float만 저장할 수 있음 , 고정된 길이 가지고있음모든값을 넣어야하는 1차원 배열const positionsArray = new Float32Array([ 0,0,0, 0,1,0, 1,0,0])const p.. 2025. 2. 3.
애니메이션과 카메라 three.js journey강의를 듣고 작성합니다. AnimationRequestAnimationFramejs에서 제공하는 메서드매 프레임마다 호출되어 다음 프레임에 호출할 애니메이션을 지정하고 이를 호출하는 메서드/** * Animate */const tick = () =>{ // Update objects mesh.rotation.y += 0.01 // Render renderer.render(scene, camera) // Call tick again on the next frame window.requestAnimationFrame(tick)}tick() data data.nowclock (three.js 내장 메서드)gasp cameraArrayCamera- 여.. 2025. 2. 3.

티스토리툴바