JJONG`sFACTORY

JAVASCRIPT

JAVASCRIPT/nest.js
[NestJS] NestJS + prisma CRUD
NestJS - prisma default CRUD지난번에, prisma 를 통해 각 모델 스키마를 분리하고 테이블 생성까지 처리 하였었다.이제 가장 기본이 되는 기본 CRUD를 먼저 구현해 보도록 하자. User Model을 통한 기본 CRUD 작성명령어를 통한 module, service, controller 생성먼저 NestJS에서 제공해주는 CLI 명령어를 통해 response에 관련된 객체들을 생성한다.가장 기본이 되는 User Modle을 토대로 기본 CRUD를 작성한다.nest g res modules/user 명령어 입력 후, 선택지가 나오게 되면 아래와 같이 입력한다. ? What transport layer do you use? REST API? Would you like to gene..
혁종
혁종
JAVASCRIPT/nest.js
[nest.js] prisma schema 분리
old - prisma schema 분리서론글을 작성 하던 도중, prisma 에서 드디어 스키마 분리를 지원해 준다는 이슈가 작성 되었다. Support for splitting Prisma schema into multiple files · Issue #2377 · prisma/prismaProblem Prisma currently only supports one single Prisma Schema file. Developers want more flexibility for managing their Prisma Schema files. Motivations: breaking up large schema files to make th...github.com Hey, we just released s..
혁종
혁종
JAVASCRIPT/nest.js
[nest.js] nest.js + prisma - setting
서론 이번에 새로운 기능 개발건에 대하여 nest와 prisma를 이용하여 개발 하기로 했다.두가지를 조합해서 사용하는건 처음인데, 제대로 사용하기 위해서는 사전 세팅 되어야 할 것들이 많았다.일단 prisma 에서 현재 미 지원 중 이지만, 반드시 필요해야 하는 기능들은 다음과 같았다. Custom 기능 개발 항목model 정의를 위한 파일 분리 (model separate file)mock db를 이용한 testsoft deleteprisma model to ERD희소식으로는 현재 model별 정의의 경우에는 약 5주전에 작업에 들어갔다라고 한다. (2024.06.12 기준, 현재 개발이 완료 되었다.)해당 이슈 코멘트 (issue 2377) Support for splitting Prisma sch..
혁종
혁종
JAVASCRIPT/vanilla
[javascript] DOM 변화를 관측하여 observer 패턴 사용
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..
혁종
혁종
JAVASCRIPT/nest.js
[nest.js] module reference
모듈 참조 nest 에서는 내부 공급자 목록을 탐색하고, 동적으로 인스턴스화 하는 방법을 제공해 줍니다.ModuleRef를 이용하여 클래스에 주입할 수 있습니다. 먼저 다음과 같은 파일 구조를 가지고 있다고 가정하겠습니다. 각 모듈의 코드를 살펴 보겠습니다. 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], providers:..
혁종
혁종
JAVASCRIPT/nest.js
[Nest.js] Circular dependency
심플한 정적 모듈 바인딩 구현순환 종속성을 설명하기 전, 먼저 심플한 정적 모듈 바인딩을 구현해 보도록 하겠습니다.다음과 같이, auth service, user service를 만들었다고 가정하겠습니다.그 다음, 정적 모듈 바인딩을 위하여 user module에서 user service를 export 시켜주고 auth service 에서는 user module을 import 한 뒤 각 서비스에서 간단한 함수를 만들어서 정적 모듈 바인딩을 구현합니다. UsersModuleimport { Module } from '@nestjs/common';import { UsersController } from './users.controller';import { UsersService } from './users.s..
혁종
혁종
JAVASCRIPT/vanilla
WebGPU(4) - cell 색 지정
각 셀에 색을 지정해보자! 지난번에는 일단 그리드를 그렸지만 빨간 단색으로 채워졌었다. 해당 부분을 조금 변경하여서, 색을 다채롭게 칠해보자. @fragment fn fragmentMain() -> @location(0) vec4f { return vec4f(1, 0, 0, 1); } 위 코드에서 각 프레그먼트에 반환되는 컬라값으로 #FF0000를 넘기고 있기 때문에 전부 빨간 사각형으로 채워졌었다. 색을 다채롭게 하기 위해서는 생각보다 간단하다고 하는데, @vertex 부분에서 렌더링 중인 셀을 알고있으므로 @fragment 단계에 값을 전달만 하면 된다고 한다. 일단, 최종 코드를 먼저 보면 다음과 같다. struct VertexOutput { @builtin(position) position: ve..
혁종
혁종
JAVASCRIPT/vanilla
WebGPU(3) - bindGroup
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,..
혁종
혁종
JAVASCRIPT/vanilla
WebGPU(2) - draw rect
캔버스 초기화를 했으니, 간단한 도형을 그려보자 지난번에 캔버스 초기화를 완료하였다. 생각보다 조금 복잡하였는데 어찌저찌 캔버스를 초기화 하였으니 이제 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 위 내용을 참고하면 좋을 것 같다..
혁종
혁종
JAVASCRIPT/vanilla
WebGPU(1) - 개념과 캔버스 초기화
WebGPU란? 웹 어플리케이션에서 GPU의 기능에 액세스 하기 위한 최신 기술이다. 기존에는 WebGL이 있었지만, 성능적인 제약이 많았다. 벌컨, 메탈, Direct3D 12가 제공하는 API를 기반으로 모방리 및 데스크톱 플랫폼에 고성능을 제공하는 것이 목적이며, 애플, 모질라, 마이크로소프트, 구글 등의 엔지니어들과 함께 개발 되어가고 있다. 한 때, canvas를 이용하여 이것저것 해본 경험들이 있었는데 WebGPU 기술을 이용하여서 뭔가 쪼물쪼물 만들어 봐야겠다. 일단 그를 위해서 튜토리얼 먼저 진행을 해 보는 것으로! 첫 번째 WebGPU 앱을 통한 튜토리얼 시작. node + ts로 환경 세팅 https://codelabs.developers.google.com/your-first-webg..
혁종
혁종
JAVASCRIPT/nuxt.js
server side rendering 을 위한 nuxt.js 기본 설정
먼저, npm, node 등은 먼저 설치가 되어있어야 합니다. 1. sudo npm install -g @vue/cli-init 2. vue init nuxt-community/starter-template 3. cd nuxt_test -> npm install 4. npm run dev 서버를 가동시켜 줍니다. 3000번 포트로 열렸다고 하네요. 들어가게 되면, 이런 페이지가 뜨게 된다면 성공입니다. nuxt의 기본 세팅은 여기까지 입니다. 참고 사이트 : https://nuxtjs.org/ nuxtjs.org Nuxt.js official website nuxtjs.org
혁종
혁종
혁종
'JAVASCRIPT' 카테고리의 글 목록
상단으로

티스토리툴바