농부처럼 코딩하기

web에서 3d 작업을 하는 일이 많아졌다. 지금은 주로 threejs를 사용해서 작업을 하고 있지만 앞으로를 대비해서 webgpu를 사용해서 이것저것 해볼 생각이다. 먼저 webgpu sample 코드를 자세히 살펴보겠다. const meshRef = useRef(null); if (!navigator.gpu) { throw new Error("WebGPU is not supported"); } const adapter = await navigator.gpu.requestAdapter(); if (!adapter) { throw new Error("No appropriate GPUAdapter found"); ..

react three fiber(r3f) 사용 중 간헐적으로 메시가 나타나지 않으며 해당 에러가 나오는 상황 결론부터 이야기하면 r3f에서 Mesh에 geometry를 설정한 방법 때문에 발생한 문제였다. // before  // aftermeshRef.current.geometry = geometry  r3f 공식홈페이지에서도 before와 같은 방식의 예시 코드가 있어서 확실하지는 않지만 GPT에서는 JSX vs js style 에 대한 차이를 말해줬는데jsx 방식 사용 시 react의 재조정 단계에서 문제가 발생할 수 있다고 한다.다행히 해결된건지 코드 수정 이후 아직까진 에러가 발생하지 않았다.

border에 gradient color를 적용해보며 css mask에 대해 알아보자.  CSS Mask로 뭘 할 수 있는데??css mask를 사용하면 특정 요소를 그릴 때 source element와 destination element를 가지고 mask 속성값이 따라 무엇을 어떤식으로 그릴지에 대한 것을 정할 수 있다.  위 이미지의 경계선과 같은 효과를 주는 방법을 알아보자.  // 내부 내용 코드를 간단히 설명하면1. 먼저 최상위 element를 만들어 준다.2. 자식 요소를 absolute를 사용하여 부모와 같은 크기로 만들어준다. (Mask 속성이 적용될 gradation border ) 우리는 일단 2번 자식요소만 보면된다. CSS Mask 속성자식요소를 보면 중간에 co..

webpack api를 활용한 rspack 1.0이 릴리즈 되었다.마침 프로젝트 초기 셋팅할 기회가 생겼는데 번들러 설정을 처음부터 해볼 기회라 생각되어 rspack을 한번 찍어먹어 보기로 했다. 한 1주일 전부터 프로젝트를 시작한다는 사실은 알고 있어서 이것저것 사용할 기술스택들에 대해 알아보고 있었는데 막상 프로젝트 내용을 들어보니 그렇게 규모가 크지 않았고, 여러 HTML파일로 여러 페이지를 구현해야 했다. 그래서 리액트를 사용하지 않고 바닐라JS를 사용하고, typescript도 같이 사용하려는 라이브러리와 이슈가 좀 있어보여서 사용하지 않기로 결정했다.( 하면서 보니 리액트만 사용한다면 더 간단하게 설정을 할 수 있어 보였다. ) yarn create rsbuild@latest rsbuild는 ..

git을 사용하여 작업하던 도중 지금까지 작업한 커밋이 사라져 이를 해결한 방법을 공유한다.먼저 해당 문제가 생긴 원인을 말하자면 HEAD(현재 브랜치의 최상위 커밋)에서이 아닌 다른 커밋에 체크아웃을하고 내용을 수정하고 커밋을 하다가 다른 브랜치로 체크아웃 했을 때 해당 현상이 발생할 수 있다. 1. 문제상황 재현을 위해 HEAD가 아닌 커밋에 체크아웃을 하고 커밋 한개를 생성했다. 맨 오른쪽에 보이는 커밋ID(1ebb018f)를 기억하자.vscode의 extension인 git graph를 사용했는데 정상적인 상황이라면 커밋 왼쪽에 라벨로 현재 브랜치명이 표시되어야 하는데 아무것도 표시되지 않은 것을 확인할 수 있다. 이때 문제를 인지했어야 하는데.... 2. 그리고 다른 브랜치로 체크아웃한 모습이다..

기존에는 react나 next 프로젝트에 typescript를 사용했을 때는 프로젝트를 생성했을때 typescript 옵션을 추가해줬기 때문에 관련 설정을 하는데 특별한 어려움이 없었다. 이번에 WebGPU를 공부하기 시작하면서 기본적인 typescript 설정에도 어려움을 겪어 간단히 정리하였다. https://webgpufundamentals.org/webgpu/lessons/ko/webgpu-fundamentals.html WebGPU 기초WebGPU의 기초webgpufundamentals.org 해당 사이트에 있는 sample code가 js로 되어 있어 이를 ts로 변환하기로 했다. 1. 간단한 html 생성2. webgpu sample code(.js)를 .ts파일로 변경3. 실행해보기4. 안..

QueryFailedErrordocker image로 mysql 5.7을 사용하다 최신버전으로 업데이트 한 뒤 생긴 이슈들을 기록해본다. TypeORM의 querybuilder를 사용해서 db에서 데이터를 가져와 사용하고 있었는데버전업을 한 뒤에 QueryFailedError가 발생했다.  MySQL의 예약어를 db나 테이블에 사용한것이 문제를 일으킬 수 있다고 하여 살펴봤지만 마땅히 문제가 될만한 부분을 찾을 수 없었다. IN절을 사용한 부분이 문제였는데 데이터베이스나 테이블명이 아닌 operator로써 사용하였는데 문제가 발생해서 정확한 원인 파악은 어려웠다.IN -> where, orWhere 을 사용해서 처리했다. 단 query 성능이 저하될 수 있으므로 주의해야 한다.  프론트에서 POST요청 ..

windows11ec2(ubuntu 24) - docker destop 설치https://docs.docker.com/desktop/install/windows-install/ Install Docker Desktop on WindowsGet started with Docker for Windows. This guide covers system requirements, where to download, and instructions on how to install and update.docs.docker.com nest프로젝트 root 경로에 Dockerfile 생성 // Dockerfile// Node.js 20버전이 설치된 Alpine Linux를 기반 이미지로 사용FROM node:20-alpine..

서버 연결을 완료했다고 생각하고 프로젝트를 진행하고 있었는데... 동일한 요청에 대해서 말 그대로 대환장 파티가 일어나고 있었다.201.. 503.. CORS 일단 CORS에 대한 처리를 해줬다. origin을 확인하고.  OPTIONS 메서드로 들어오는 preflight 처리를 해주니 CORS에러는 사라졌지만 503은 그대로였다. 요청을 눌러보니 awsalb/2.0 이라는 에러가 떠서 검색해보니 https://docs.aws.amazon.com/ko_kr/elasticloadbalancing/latest/application/load-balancer-troubleshooting.html Application Load Balancer 문제 해결 - Elastic Load Balancing리소스 맵 내의 ..

// package.json "@testing-library/jest-dom": "^6.4.2", "@testing-library/react": "^15.0.4", "@types/jest": "^29.5.12", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", "ts-jest": "^29.1.2", // tsconfig.json"esModuleInterop": true, module.exports = { roots: ['/src'], testMatch: ['**/__tests__/**/*.+(ts|tsx|js)', '**/?(*.)+(spec|test).+(ts|tsx|js)'], transform: { ..