Frontend (290) 썸네일형 리스트형 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... TIL 24.04.24 System limit for number of file watchers reached 에러 1. 문제점 이번에도 기능 구현 후 빌드를 했다. 빌드과정에서 문제는 없어보였는데 배포한 사이트에 접속해보니 502 bad gateway 가 떴음. 이번에는 무슨 일인가 싶어 서버로그를 확인했는데 Error: System limit for number of file watchers reached ... 에러가 발생하였다. 이후에 파일경로가 있길래 그 파일은 건드리지도 않고 빌드했는데 대체 무슨문제인가 해서 구글 검색을 해보았다. 2. 해결방안 React 처럼 프론트엔드 개발환경에서는 많은 수의 파일감시자가 필요한데, 이 한도를 초과했기 때문에 발생하는 에러라고 한다. 개발을 너무 열심히 하다보면 날 수있다는 에러인데 정말인가 https://github.com/gatsbyjs/gatsby/issues/11.. 이전 1 2 3 4 5 ··· 37 다음
