MutationObserver 레거시한 코드들을 유지보수 해야 하는 도중, dom 상태를 관측하여 특정 함수들을 실행시키고 싶은 경우가 생겼다. observer 패턴을 이용하여 react 에서의 getState 처럼, 특정 값이 변경 되었을 때 코드를 실행하고 싶었는데, js에서 MutationObserver 라는걸 지원해 주는 것을 확인 했다. https://developer.mozilla.org/ko/docs/Web/API/MutationObserver MutationObserver - Web API | MDN MutationObserver 인터페이스는 DOM 트리의 변경을 감지하는 기능을 제공합니다. DOM3 이벤트 명세의 일부였던 Mutation Events (en-US)를 대체합니다. devel..
모듈 참조 nest 에서는 내부 공급자 목록을 탐색하고, 동적으로 인스턴스화 하는 방법을 제공해 줍니다. ModuleRef를 이용하여 클래스에 주입할 수 있습니다. 먼저 다음과 같은 파일 구조를 가지고 있다고 가정하겠습니다. 각 모듈의 코드를 살펴 보겠습니다. AuthModule import { Module } from '@nestjs/common'; import { AuthController } from './auth.controller'; import { AuthService } from './auth.service'; import { TestService } from './test/test.service'; @Module({ imports: [], controllers: [AuthController..
심플한 정적 모듈 바인딩 구현 순환 종속성을 설명하기 전, 먼저 심플한 정적 모듈 바인딩을 구현해 보도록 하겠습니다. 다음과 같이, auth service, user service를 만들었다고 가정하겠습니다. 그 다음, 정적 모듈 바인딩을 위하여 user module에서 user service를 export 시켜주고 auth service 에서는 user module을 import 한 뒤 각 서비스에서 간단한 함수를 만들어서 정적 모듈 바인딩을 구현합니다. UsersModule import { Module } from '@nestjs/common'; import { UsersController } from './users.controller'; import { UsersService } from './u..
각 셀에 색을 지정해보자! 지난번에는 일단 그리드를 그렸지만 빨간 단색으로 채워졌었다. 해당 부분을 조금 변경하여서, 색을 다채롭게 칠해보자. @fragment fn fragmentMain() -> @location(0) vec4f { return vec4f(1, 0, 0, 1); } 위 코드에서 각 프레그먼트에 반환되는 컬라값으로 #FF0000를 넘기고 있기 때문에 전부 빨간 사각형으로 채워졌었다. 색을 다채롭게 하기 위해서는 생각보다 간단하다고 하는데, @vertex 부분에서 렌더링 중인 셀을 알고있으므로 @fragment 단계에 값을 전달만 하면 된다고 한다. 일단, 최종 코드를 먼저 보면 다음과 같다. struct VertexOutput { @builtin(position) position: ve..
Canvas를 Grid로 나눠보자. 지난번에는 사각형을 그리는 파틀르 진행했었다. 이번에는 Uniform 이란걸 이용하여, canvas를 그리드로 나눠 볼건데, 유니폼은 모든 호출에서 동일한 버퍼의 값 이라고 한다. 기하학적 요소나 애니메이션 처리 등 공통된 값을 전달한느데 유용하다고 하는데, 코드를 통해 알아보자. 일단, 기존 drawRect 함수를 일부 수정하였고, 아래는 그 전문이다. drawRect() { // 삼각형 두개로, 정사각형의 좌표 지정. const vertices = new Float32Array([ // X, Y, -0.8, -0.8, // Triangle 1 (Blue) 0.8, -0.8, 0.8, 0.8, -0.8, -0.8, // Triangle 2 (Red) 0.8, 0.8,..
캔버스 초기화를 했으니, 간단한 도형을 그려보자 지난번에 캔버스 초기화를 완료하였다. 생각보다 조금 복잡하였는데 어찌저찌 캔버스를 초기화 하였으니 이제 cnavas에 간단한 도형을 그려보도록 하자. https://codelabs.developers.google.com/your-first-webgpu-app?hl=ko#3 첫 번째 WebGPU 앱 | Google Codelabs 이 Codelab에서는 새로운 WebGPU API의 기본사항을 소개합니다. GPU에서 실행되는 Conway's Game of Life의 버전을 빌드하는 방법을 안내합니다. WebGPU의 렌더링 기능은 보드를 그리는 데 사용되고 WebGPU의 컴 codelabs.developers.google.com 위 내용을 참고하면 좋을 것 같다..
WebGPU란? 웹 어플리케이션에서 GPU의 기능에 액세스 하기 위한 최신 기술이다. 기존에는 WebGL이 있었지만, 성능적인 제약이 많았다. 벌컨, 메탈, Direct3D 12가 제공하는 API를 기반으로 모방리 및 데스크톱 플랫폼에 고성능을 제공하는 것이 목적이며, 애플, 모질라, 마이크로소프트, 구글 등의 엔지니어들과 함께 개발 되어가고 있다. 한 때, canvas를 이용하여 이것저것 해본 경험들이 있었는데 WebGPU 기술을 이용하여서 뭔가 쪼물쪼물 만들어 봐야겠다. 일단 그를 위해서 튜토리얼 먼저 진행을 해 보는 것으로! 첫 번째 WebGPU 앱을 통한 튜토리얼 시작. node + ts로 환경 세팅 https://codelabs.developers.google.com/your-first-webg..
- Total
- Today
- Yesterday
- 안성 맛집
- ckeditor
- 성수동 맛집
- webGPU
- next.js
- 성수 맛집
- 원곡 카페
- laravel
- CKEditor Image Upload
- 안성 카페
- 칠곡 카페
- 공도 맛집
- Google App Script API
- hasura
- Google App Script
- laravel passport
- 명일방주
- 개발일지
- GitAction
- 성안길 맛집
- Web Editor Image Uplaod
- AWS
- PHP AWS S3
- 서울 맛집
- ansible
- S3
- php
- Vue.js
- 안성 공도 맛집
- CKEditor5 Image Upload
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |