정원

🚨문제PrimeReact DataTable에서 *가상 스크롤(virtualScrollerOptions)*을 사용할 때,사이드바를 열고 특정 항목을 클릭하면 해당 인덱스로 잘 이동된다.하지만 사이드바를 닫았다가 다시 열면,화면이 맨 위로 올라갔다가 선택된 인덱스로 스크롤되는 문제가 발생했다. 👩‍🌾 원인 기존에는 사이드바 콘텐츠를 으로 숨기고 있었음display: none이 되면 내부 컴포넌트가 언마운트됨다시 열었을 때 새로 마운트되므로, 스크롤 위치가 초기화됨 →항상 1번부터 다시 렌더된 뒤 스크롤로 이동하는 버그 발생 ✒️ 해결 방법❌ 기존 방식display: active ? "flex" : "none"→ 렌더링 자체를 중단시켜 버리기 때문에 문제가 생김✅ 수정한 방식style={{ posit..

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 =..

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..

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..

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..

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- 여..

three.js journey강의를 듣고 작성합니다. Three.js 구현하기위한 기본구성 5가지 import * as THREE from 'three';import gsap from 'gsap'const canvas = document.querySelector('canvas.webgl')//sceneconst scene = new THREE.Scene()//objectconst geometry = new THREE.BoxGeometry(1,1,1) //BoxGeometry(width, height, depth)const material = new THREE.MeshBasicMaterial({color:0xff0000})const mesh = new THREE.Mesh(geometry, material)..

이직을 한지 어언 5개월 참 좋은 회사였지만. . . 팀도 좋았지만 . . 내년 사업이 없다며 계약만료되었다. .😂이 프로젝트를 유지보수하게 될 남은 팀원들을 위해 인수인계서를 작성해보았어요  우선 목차를 잡고 디렉토리구조디렉토리 구조를 마크다운으로 작성하여 한눈에 파악하기 싶도록 작성하였다파일설명이 컴포넌트들의 역할이 무엇인지, 유의점 작성 데이터흐름차트 컴포넌트가 많기에 차트 데이터가 어떻게 흘러가는지에 대해 작성하였다.차트 레이아웃차트 레이아웃은 분석팀에서 원했던 구조가 꽤 까다로워서 이 형식을 벗어나지말라는 코멘트도 남겼다. 데이터 구조에는 두가지 방식이 있어서 어떤 경우에 해당 데이터구조로 들어와야하는지 여기서 생길수 있는 주의점을 적어두었다차트 종류가 다양하여 쓰고있는 타입명, 컴포넌트, 유..

넥스트를 공부하기로 한 나. . .어렴풋이 알고있던 SSR CSR SSG ISR 과 마주하다 이것 뭐예요 ?  CSR client side rendering 렌더링하는 주체자가 클라이언트(브라우저) 웹사이트에 접속시 서버에게 요청 보냄 -> 서버가 텅텅빈 html보내줌-> js 다 다운받아야 볼 수 있음 주로 리액트에 사용한다! 장점단점한번 로딩되면 빠른 ux 제공페이지 로딩시간(ttv)이 길다서버의 부하가 작음자바스크립트 활성화 필수 seo 최적화가 힘들고, 보안에 취약하다 CDN에 캐시가 안됨  SSG staric site generation 렌더링하는 주체자가 서버, 언제 렌더링 되나요? 빌드할때 됩니다!웹사이트 접속시 정적인 HTML 파일 받아옴(프리렌더링) -> 사용자 즉각 볼수 있음 -> 사용..

Class App extends Component { render() { return ( hi ); } } app이란 클래스를 만들고 리액트 컴포넌트클래스를 상속해서 새로운 클래스를 만드는 것 렌더라는 메소드를 가지고있다 props와 state Class App extends Component { constructor(props){ super(props); this.state= { subject:{title:'web', sub:'www'} } }//컴포넌트가 실행될때 렌더보다 먼저 실행되면서 초기화을 담당 render() { return (