전체 글 (283) 썸네일형 리스트형 TIL 24.11.06 className, style 등 기본 props type 지정 typescirpt 를 할 때, 기본적으로 props 를 받아오게 되는데 그 밖에도 className 이나 style 과 같은 기본 props 를 주고 싶은 경우가 있다. 예를들어, 나는 공통컴포넌트를 만드느라고 다음과 같이 DialogHeader 를 만들었다. const DialogHeader = ({ children, ...props }: DialogProps) => ( {children} ); 다음과 같이 스타일을 지정할 때, type error 가 나는 경우가 있다. 그렇다면 style, className 기타 등등 모든 요소를 하나하나 type에 담을수가 없는데 어떤식으로 타입을 줘야하는걸까 Heading Text This i.. TIL 24.10.28 react-draggable positionOffset, bounds 위치 문제 해결 1. 문제점 공용 컴포넌트를 직접 만들고 있는데 dialog 를 제작할 때 화면의 정 가운데에 가게 하도록 컨테이너의 기본 css 는 다음처럼 했다. top: 50%; left: 50%; transform: translate(-50%, -50%); 그러나 드래그 가능한 컴포넌트를 만들기위해 react-draggable로 해당 컴포넌트를 감싸게 되면 자꾸 살짝 오른쪽 밑으로 기울어있는 것이다. (정가운데가 아님) 그래서 개발자도구를 켜서 추가적인 css 속성이 들어가나 확인해봤더니, 다음처럼 transform: translate 속성이 0px, 0px 로 바뀌어있었음. 2. 시도해본것 그래서 stackoverflow 에서 나와 같은 문제를 겪고있는 사람들의 글을 서치해 봤는데, Draggable 에.. TIL 24.08.28 Another git process seems to be running in this repository 에러 문제점 git commit 을 진행하던 도중에 다음과 같은 에러가 발생하였다. 이 오류 메시지는 Git이 특정 작업을 수행하려고 할 때, 다른 Git 프로세스가 이미 실행 중이거나 이전에 실행 중이었던 프로세스가 비정상적으로 종료된 경우에 발생한다. 이러한 상황에서는 Git이 충돌을 방지하기 위해 현재 작업을 차단한다. 해결방안 windowdel .git\index.lock 그 외rm -f .git/index.lock 이와같이 index.lock 을 삭제하여 문제를 해결할 수 있다. object3D 개념 object3D 를 상속받아서 position, scale, rotation 변환이 가능한 것들 - Scene (가장 큰 group) - Group (scene 안에 그룹이 여러개 있을 수 있음, group 안에 mesh 가 있음) 아래와같이 한 그룹안에 mesh 3개가 있는 형태 1) world 좌표계 전체 기준으로 중심좌표2) local 좌표 blue mesh 를 기준으로 한 로컬좌표 - Mesh geometry, material 은 object3D 가 아니기 때문에 position, scale, rotation 변환이 불가능하다. => 오브젝트를 이동, 크기변환, 회전 할때는 Mesh 를 이용해 변경해주어야 한다. Three.js/ R3F 구성요소 기존에 JavaScript THREE.js로 회전하는 카드효과, 스크롤 이펙트와 같은 interactive web 개발을 했으나 React 로 넘어오게 되면서 React three fiber 일명 (R3F)로 작업을 해야할 일이 생겼다. 1. Scene촬영장의 세트장이라고 생각하면 편하다. 여러개가 될 수도 있음, 찍히는 대상 1) Mesh: geometry + material 를 감싸는 영역 2) geometry: 모양, 구조로 three.js에서 다양한 geometry를 볼 수 있음https://threejs.org/docs/index.html#api/en/geometries/BoxGeometry three.js docs threejs.org 3. material: 텍스쳐, 색상으로 기본적으로.. About convention & refactoring After the meeting with the public health center, I've decided to restructure and refactor our project.There are plenty of useless files in my project, and I'm not confident that the new worker, who I have to pass down the project to, will easily understand what I've coded so far.I SHOULD HAVE DONE this 6 months ago, but at that time, I was still a junior, so I couldn't do it.I know it will be ha.. TIL 24.06.14 react-dropzone & FormData 데이터 전송 구현 기능내가 구현해야 할 기능은 드래그앤 드롭으로 사진을 첨부하는 기능과 이 사진데이터들을 서버로 보내주는 기능이었다. 드래그앤 드롭 사진첨부 기능- 이미지 파일 업로드- 무슨 이미지를 올렸는지 확인할 수 있는 thumbnail- 올리는 이미지 갯수 제한- 올리는 이미지 용량 제한 formData 형태로 서버에 전송하는 기능- 업로드 된 이미지를 formData 형태로 변경하기- content-type을 설정해주고 서버로 데이터 알맞게 전송하기 1. 드래그앤 드롭 사진첨부 기능 이미지 파일 업로드이 기능은 javascript 에서 구현해본 경험이 있었다. 그당시에는 라이브러리를 사용하지 않고 구현했는데, react 에서 제공하는 react-dropzone 을 사용해보기로 하였다. 우선 라이브러리를.. TIL 24.05.14 react-query refetchOnWindowFocus 옵션 https://tanstack.com/query/v4/docs/framework/react/guides/window-focus-refetching Window Focus Refetching | TanStack Query React DocsIf a user leaves your application and returns and the query data is stale, TanStack Query automatically requests fresh data for you in the background. You can disable this globally or per-query using the refetchOnWindowFocus option: Disabling Globally // ctanstack... 이전 1 2 3 4 ··· 36 다음
