본문 바로가기

전체 글

(281)
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..
TIL 24.04.23 TAR_ENTRY_INVALID checksum 에러 1. 문제점 여느날과 같이 npm install 패키지 해서 다운받으려고 보니까 갑자기 에러남. 그냥 라이브러리 에러인줄 알고 별일 아니겠거니 하고 무시했음. 근데 이러고 product 에 올렸는데 빌드중에 에러가 나는 것임 퇴근 10분전에 난 에러라서 더 당황스러웠음 2. 시도해본 것 일단 빌드중에 난 에러라 여기 찍힌거 다 해봤음 npm 다시 최신버전으로도 설치해보고 npm install@latest 캐시가 꼬인 문제라서 캐시를 삭제하면 된다고 하길래 캐시도 지워봄 npm cache verify 다 안됨 3. 해결방안 백엔드분께서 로그확인 해보라고 하셨는데 정답은 생각보다 간단했음 ... 네이버 api 써본다고 프론트단에서 임시로 proxy 를 package.json 에 추가했었는데 그 다음줄에 추가..