전체 글 (285) 썸네일형 리스트형 TIL 24.11.14 Prisma 전역 객체 선언 및 타입 지정 next.js 15 + react 19 에 대한 authenticaiton 강의를 들으면서 prisma 를 사용할 일이 생겼다.우선 db를 셋팅하기 전 Node.js 에서 prisma 를 사용할 때 개발환경에서는 PrismaClient 인스턴스를 전역으로 설정해서 성능을 최적화 시켜주어야 한다. 전역객체에 Prisma 인스턴스를 선언하는 이유 : 개발 환경에서는 코드가 변경될 때마다 서버가 재시작(hot-reload)되고, 이는 새로운 PrismaClient 인스턴스를 계속 생성하는 문제를 발생시킬 수 있다. 따라서 prisma 인스턴스를 전역 객체에 선언해서 node.js 의 전역범위에서 하나의 prisma 인스턴스를 재사용 할 수 있음. var로 선언한 변수는 전역 스코프에서 전역객체 (global .. TIL 24.11.11 React.Children.map() 함수 공통 컴포넌트를 작성하는중에, children 으로 받아온 자식요소에 대해서 index 를 주어야 할 일이 생겼다. 물론 사용하려고 불러오는 컴포넌트에서 다음처럼 index 값이나 id 를 개별적으로 넘겨주어도 되지만 map을 돌리지 않는 이상, 너무 귀찮은 일이라고 생각이 들었다. 그리고 나는 context로 accordion 컴포넌트에서 전역적으로 데이터를 관리하므로, item에서 받아온 정보를 또 props 로 넘겨주거나 개별 컴포넌트마다 id 를 뿌려주는 귀찮은 짓을 해야해서 사용자가 단순히 children 만 입력해도 기능이 동작하게 끔 최대한 기본컴포넌트에서 기능을 구현하고 싶었다. open1 content1 .. 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.. 이전 1 2 3 4 ··· 36 다음
