농부처럼 코딩하기

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. 그리고 다른 브랜치로 체크아웃한 모습이다..

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. 그리고 다른 브랜치로 체크아웃한 모습이다..