개발자 메론빵

[초등/저학년] 컴퓨터 입력 장치 알기

ddiae — Sun, 10 May 2026 19:10:58 +0900

이미지를 클릭하면 사이트로 이동합니다.

본 웹사이트는 초등학교 저학년을 대상으로 하여 컴퓨터의 입력장치에 대한 학습을 위해 제작되었습니다.

활용 문의는 visveryver2@gmail.com 으로 연락 바랍니다.

[초등/고학년] 오리엔테이션: 자기소개 및 성향테스트

ddiae — Tue, 5 May 2026 17:51:48 +0900

이미지를 클릭하면 사이트로 이동합니다.

본 웹사이트는 초등학교 코딩 수업의 오리엔테이션을 위해 제작된 자기소개 및 성향 분석 도구입니다.

활용 문의는 visveryver2@gmail.com 으로 연락 바랍니다.

Phaser : 설치 및 개발 환경 설정, Preload, Object 추가 방법

ddiae — Sun, 1 Dec 2024 17:46:23 +0900

설치

npm init 프로젝트 폴더의 패키지 관리자 초기화. vite를 사용할 경우 npm init vite

npm i phaser Phaser 설치

개발 환경 설정

body {
    margin: 0;
}

#app {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin: 0;
}

new Phaser.Game({
    type: Phaser.WEBGL,
    width: '100%',
    height: '100%',
    physics: {
        default: 'arcade',
        arcade: {
            debug: import.meta.env.DEV,
            gravity: { y: 2500 }
        }
    },
    **scene: [Preloader, ...]**
});

type : 렌더러를 선택. AUTO, CANVAS, WEBGL 중에 하나를 선택.
- AUTO: Phaser가 사용 가능한 최상의 렌더러를 자동으로 선택. WebGL을 우선으로 확인.
- CANVAS: 모든 환경에서 사용할 수 있으나 WebGL에 비해 성능이 떨어짐
- WEBGL: 하드웨어 가속을 사용하여 더 높은 성공을 제공하나 일부 환경 지원하지 않음
physics : 물리엔진과 관련된 설정
- arcade는 가볍고 간단한 2D 물리엔진으로 빠른 설정이 가능함
- 그 외의 물리엔진으로는 matter, impact, box2d가 있음
- debug를 true로 설정하면 물리엔진 디버깅이 가능
- es-module에서는 Process.env 대신 impot.meta.env를 사용

Scene

export default class DisplayScene extends Phaser.Scene {
  constructor() {
    super({ key: "display" });
    /*key 설정 및 Phaser.Scene의 생성자 호출*/
  }
  init() {
    /*Scene이 생성될 때 초기화*/
  }
  preload() {
    /*리소스 로드*/
  }
  create() {
    /*Scene 생성 후 초기화 담당 : 게임 객체 생성 및 초기상태 설정*/
  }
  update(): void {
    /*매 프레임마다 호출: 게임 상태 업데이트 로직 구현*/
  }
}

scene을 사용하기 위해서는 반드시 key를 생성
scene의 주요 생명 주기 메서드 : init, preload, create, update
- preload는 따로 파일을 만들어 관리해주면 편리함
scene의 주요 상태 변경 메서드 : stop, pause, start, resume, restart
DisplayeScene.ts 작성 후 main.ts의 scene 속성에 해당 scene 추가
create에서 this.game.scene.start('display')로 scene을 실행 (display는 scene의 key)

Preload

this.load.setBaseURL('assets');
this.load.image('bg1', 'background/bg1.png');
this.load.image('selectPlayer', 'selectPlayer/select.png');
this.load.atlas('player', 'player/poy/poy.png', 'player/poy/poy.json');
this.load.tilemapTiledJSON('map', 'map/main/map.json');
this.load.audio('scene0', 'sounds/scene0.mp3');

setBaseURL : resource가 모두 들어있는 폴더를 지정하여 이후 작성하는 resource들의 경로를 쉽게 설정 가능
image(key, 이미지파일) : 이미지를 로드
atlas(key, 이미지파일, json파일) : 스프라이트 이미지와 JSON파일을 로드
tilemapTiledJSON(key, json파일) : TileMap을 만들 JSON파일을 로드. 이 때 TileSet이 되는 이미지 또한 image메서드를 통해 로드해야 함
audio(key, 오디오파일) : 오디오 파일을 로드
Preload에서 설정한 key를 가지고 Create에서 assets를 호출

GameObject

this.add.rectangle(x, y, width, height);
this.add.image(x, y, key);
this.add.sprite(x, y, key);

add : 각각 사각형, 이미지, 스프라이트를 호출
동일한 방식으로 circle, text 등 호출 가능

정규식 패턴과 대표 예제

ddiae — Sat, 9 Nov 2024 17:48:35 +0900

정규식을 사용할 때 마다 서치를 하게 돼서 내가 보려고 쓰는 포스팅..
이 포스팅을 제일 자주, 많이 들여다볼 듯 하다! 그리고 지속적으로 업데이트 될 예정

기초 패턴

. : 임의의 한 문자에 매칭 (개행 문자 제외)
^ : 문자열의 시작
$ : 문자열의 끝
* : 앞의 패턴이 0번 이상 반복됨
+ : 앞의 패턴이 1번 이상 반복됨
? : 앞의 패턴이 0번 또는 1번 존재
{n} : 앞의 패턴이 정확히 n번 반복
{n,} : 앞의 패턴이 n번 이상 반복
{n,m} : 앞의 패턴이 n번 이상, m번 이하로 반복

문자 클래스

[abc] : a, b, c 중 하나의 문자에 매칭
[^abc] : a, b, c가 아닌 문자에 매칭
[a-z] : 소문자 a부터 z 중 하나의 문자에 매칭
[A-Z] : 대문자 A부터 Z 중 하나의 문자에 매칭
[0-9] : 숫자 0부터 9 중 하나에 매칭
[a-zA-Z0-9] : 알파벳 대소문자와 숫자에 매칭

특수 문자

\d : 숫자와 매칭 ([0-9]와 동일)
\D : 숫자가 아닌 문자와 매칭 ([^0-9]와 동일)
\w : 단어 문자에 매칭 (알파벳, 숫자, 언더스코어) ([a-zA-Z0-9_]와 동일)
\W : 단어 문자가 아닌 것에 매칭 ([^a-zA-Z0-9_]와 동일)
\s : 공백 문자에 매칭 (스페이스, 탭, 줄바꿈)
\S : 공백이 아닌 문자에 매칭

그룹

(abc) : abc라는 정확한 문자열에 매칭하는 그룹
(a|b) : a 또는 b 중 하나에 매칭
(?:abc) : 매칭되지만 캡처되지 않는 그룹

경계

\b : 단어 경계 (단어의 시작 또는 끝)
\B : 비단어 경계

긍정형/부정형 탐색

(?=abc) : abc 앞에 오는 패턴을 찾음 (긍정형 전방 탐색)
(?!abc) : abc가 아닌 패턴을 찾음 (부정형 전방 탐색)
(?<=abc) : abc 뒤에 오는 패턴을 찾음 (긍정형 후방 탐색)
(?<!abc) : abc가 아닌 패턴을 찾음 (부정형 후방 탐색)

자주 쓰이는 정규식 예제

이메일

/^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i

전화번호

// `-` 제외
/^01([0|1|6|7|8|9])([0-9]{3,4})([0-9]{4})$/

// `-` 포함
/^01([0|1|6|7|8|9])-?([0-9]{3,4})-?([0-9]{4})$/

날짜 (YYYY-MM-DD)

^\d{4}-\d{2}-\d{2}$

생년월일

//6자리
/^([0-9]{2}(0[1-9]|1[0-2])(0[1-9]|[1,2][0-9]|3[0,1]))$/

//8자리
/^(19[0-9][0-9]|20\d{2})(0[0-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])$/

한글만 허용

/[a-z0-9]|[ \[\]{}()<>?|`~!@#$%^&*-_+=,.;:\"'\\]/g

영문만 허용

/^[a-zA-Z]*$/

숫자만 허용

/^[0-9]*$/

비밀번호

//영문+숫자 조합 8~15자
/^(?=.*[a-zA-Z])(?=.*[0-9]).{8,15}$/

//영문+숫자+특수문자(!@#$%^*+=-) 조합 8~15자
/^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,15}$/

뷰포트 단위 알아보기 (vh, dvh, svh, lvh)

ddiae — Wed, 30 Oct 2024 11:35:47 +0900

반응형 웹을 개발하면서 height를 100vh로 설정하는 경우 일부 화면이 모바일 브라우저 내 상단바 혹은 하단바에 의해 가려지는 문제가 있었다. vh(viewport)는 상하단바를 제외한 영역을 기준으로 한다. 따라서 다음과 같은 viewport 단위를 적절하게 사용해주어야 한다.

이미지 출처 : https://blanche-toile.com/web/large-small-and-dynamic-viewport-units

vh (Viewport Height)

vh는 스크린의 height를 기준으로 하여 백분위로 높이를 나타낸다. 예를들어 스크린 height가 800px인 경우 1vh는 8px이 되는 것이다. 모바일에서는 상하단바 유무와 상관없이 일정한 크기로 동작하는 정적 viewport 단위이다.

dvh (Dynamic Viewport Height)

dvh는 동적 viewport height를 기준으로 하여 백분위로 높이를 나타낸다. 동적 viewport를 기준으로 하기 때문에 상하단바 등의 UI요소에 따라 높이가 유동적으로 변동된다. 반응형 웹을 고려할 때 유용하게 사용된다.

svh (Small Viewport Height)

svh는 최소 viewport 높이를 기준으로 하여 백분위로 높이를 나타낸다. 모바일에서 상하단바가 노출되지 않는 경우에도 상하단바가 있는 경우를 고려하여 최소 viewport를 기준으로 하는 것이다. 예외적인 상황을 고려하여 어떤 경우에서도 콘텐츠가 적절하게 표시되도록 하고싶을 때 유용하다.

lvh (Large Viewport Height)

lvh는 최대 viewport 높이를 기준으로 하여 백분위로 높이를 나타낸다. fullscreen에 가까운 상태를 가정한다. vh와의 차이점은 vh는 초기 viewport를 기준으로 한 정적 단위이지만, lvh는 계속해서 최대 viewport를 반영하는 동적 단위라는 점이다.

단위	기준	뷰포트 변화 반영
vh	고정 뷰포트 높이	❌
dvh	동적 뷰포트 높이	✅
svh	최소 뷰포트 높이	✅
lvh	최대 뷰포트 높이	✅

[Type Challenges] Tuple to Object, First of Array, Length of Tuple

ddiae — Tue, 22 Oct 2024 16:56:38 +0900

Tuple to Object

배열(튜플)을 받아, 각 원소의 값을 key/value로 갖는 오브젝트 타입을 반환하는 타입을 구현하세요.
const tuple = ['tesla', 'model 3', 'model X', 'model Y'] as const

type result = TupleToObject<typeof tuple> // expected { 'tesla': 'tesla', 'model 3': 'model 3', 'model X': 'model X', 'model Y': 'model Y'}

반복문이므로 Mapped type을 사용해야 한다.

T 배열의 n번째 요소를 K라고 하고, K가 key일 때 value도 K로 정의할 수 있다.

참고로 튜플을 순회할 때에는 number를 사용하면 된다.

type TupleToObject<T extends readonly any[]> = {
  [K in T[number]]: K;
}

First of Array

배열(튜플) T를 받아 첫 원소의 타입을 반환하는 제네릭 First<T>를 구현하세요.
type arr1 = ['a', 'b', 'c']
type arr2 = [3, 2, 1]

type head1 = First<arr1> // expected to be 'a'
type head2 = First<arr2> // expected to be 3

위 문제의 경우 단순하게 type First<T extends any[]> = T[0]으로 정의해주었다. 더불어 빈 배열의 경우 never 타입을 가지도록 다음과 같이 First<T>를 정의한다.

type First<T extends any[]> = T extends [] ? never : T[0];

그 외의 답안으로는 아래와 같은 것들이 있었다.

먼저 T['length']로 배열의 길이를 먼저 판단하고 타입을 지정해주는 방식이다.

type First<T extends any[]> = T['length'] extends 0 ? never : T[0]

다음 방법은 infer를 사용하는 방법이다. infer는 타입을 추론할 때 사용된다. 정확한 타입을 정의하지 않고 어떤 타입을 추론하고 싶을 때 사용한다.

아래 정의한 type First를 보면 T extends [infer R, …infer _] → 이 부분은 배열의 첫번째 요소인 R을 추론하는 것이며, 이 경우 T는 빈배열일 수 없다. 첫번째 요소인 R이 존재하기 때문! …infer _ 는 그 뒤에 오는 배열의 요소들을 나타낸다. 따라서 T의 배열 첫번째 요소가 존재할 때에는 R, 빈 배열일 때에는 never 타입을 가지게 되는 것이다.

type First<T extends any[]> = T extends [infer R, ...infer _] ? R : never

Length of Tuple

배열(튜플)을 받아 길이를 반환하는 제네릭 Length<T>를 구현하세요.

type tesla = ['tesla', 'model 3', 'model X', 'model Y']
type spaceX = ['FALCON 9', 'FALCON HEAVY', 'DRAGON', 'STARSHIP', 'HUMAN SPACEFLIGHT']

type teslaLength = Length<tesla>  // expected 4
type spaceXLength = Length<spaceX> // expected 5

앞선 문제의 답안에서 힌트를 얻어서 type Length<T extends any[]> = T['length'] 라고 작성하였으나,

The type readonly […]' is 'readonly' and cannot be assigned to the mutable type 'any[]'. 라는 에러가 나서 배열 타입 앞에 readonly를 붙여주어 해결하였다.

type Length<T extends readonly any[]> = T['length']

왜 arr.length는 안되고 arr['length']는 될까?

앞선 문제들을 풀어나가며 궁금했던 점은 배열의 길이를 참조할 때 arr.length 형태는 사용 불가능하고 arr['length'] 형태는 사용 가능한 점이었다.
그 이유는 TypeScript의 타입 시스템은 정적 타입 검사기로 런타임 속성을 다루지 않기 때문이라고 한다. .length는 런타임에 배열의 길이를 참조하기 떄문에 사용할 수 없으나 ['length']의 경우 객체의 속성에 접근하는 방법이기 때문에 타입 레벨에서 사용할 수 있다.

[Type Challenges] Pick, Readonly

ddiae — Thu, 17 Oct 2024 09:02:08 +0900

Pick

Q. T에서 K프로퍼티만 선택해 새로운 오브젝트 타입을 만드는 내장 제네릭 Pick<T, K>를 이를 사용하지 않고 구현하세요.
interface Todo {
  title: string
  description: string
  completed: boolean
}

type TodoPreview = MyPick<Todo, 'title' | 'completed'>

const todo: TodoPreview = {
    title: 'Clean room',
    completed: false,
}

Pick을 사용하지 않고 내장 제네릭 Pick을 구현하는 문제이다.

우선 문제를 풀기 전 Pick 타입에 대해 확인해보고자 한다. Pick 타입이란 기존 인터페이스나 객체 타입에서 필요한 속성들만 선택적으로 사용할 수 있도록 한다. Pick<T, K>일 때 T는 원본 타입, K는 선택할 속성들의 Key 집합에 해당한다. 예를 들어 위 문제에서 아래와같이 type TodoTest를 정의한다고 가정해본다.

type TodoTest = Pick<Todo, 'title' | 'completed'>

위와 같이 TodoTest를 정의했을 때, todo의 타입을 TodoTest라고 정의할 수 있는 것이다.

이렇게 Pick을 사용하여 반복적인 타입 선언을 방지할 수 있다.

하지만, Pick을 위 문제를 해결하기 위해서는 type MyPick을 정의해야 한다.

K extends keyof T 형태로 T의 key를 확장하는 K를 선언해준 뒤 Mapped type을 활용하여 type MyPick을 아래와 같이 정의될 수 있다.

type MyPick<T, K extends keyof T> = { [P in K] : T[P]}

+) Mapped type?

특정 타입의 속성을 변환하여 새로운 타입을 만든다. 주어진 타입의 모든 키를 반복하면서 그 키와 관련된 값을 수정하므로 map() 메서드와 유사한 기능을 하며 타입을 만든다고 볼 수 있다. 중복되는 타입 선언을 방지할 수 있다. Pick 유틸 타입도 Mapped Type을 바탕으로 제작된 것이다.

Readonly

Q. T의 모든 프로퍼티를 읽기 전용(재할당 불가)으로 바꾸는 내장 제네릭 'Readonly<T>'를 이를 사용하지 않고 구현하세요.
interface Todo {
  title: string
  description: string
}

const todo: MyReadonly<Todo> = {
  title: "Hey",
  description: "foobar"
}

todo.title = "Hello" // Error: cannot reassign a readonly property
todo.description = "barFoo" // Error: cannot reassign a readonly property

앞선 Pick 문제에서 사용한 것과 동일하게 Mapped Type을 사용하여 Readonly<T>를 다음과 같이 구현할 수 있다.

type MyReadonly<T> = { readonly [P in keyof T] : T[P] }

HTTP, WebSocket, WebRTC 개념

ddiae — Sun, 6 Oct 2024 19:38:16 +0900

HTTP

브라우저와 서버가 http를 통해 통신할 때 통신 과정은 다음과 같다
1. browser에서 server에 httpRequest(요청)을 보낸다.
2. 요청을 받은 server는 brower에 요청에 해당하는 httpResponse(응답)을 보낸다.
3. 통신이 종료된다.
http 통신의 경우 server는 browser의 요청을 받아야만 응답할 수 있고 server가 주체적으로 browser에 데이터를 보낼 수 없다.
server의 응답 후에는 http 통신이 종료되기 때문에 실시간으로 데이터를 업데이트해주기 위해서는 일정 시간 간격으로 계속해서 요청을 보내야 한다.

WebSocket

WebSocket(WS)은 http 방식과는 다르게 Connection Open-Close 여부에 따라 통신한다.
browser와 server를 연결하는 WS이 open 상태이면 browser와 server가 자유롭게 통신 가능하다.
따라서 server도 실시간으로 update되는 정보를 browser에 주체적으로 보낼 수 있게 된다.
WS는 server의 모든 통신을 추적하기 위해 메모리 파워가 중요하다.
user가 많을 수록 서버 비용이 많이 들고, 서버가 내려가면 통신이 불가능하게 된다.

WebRTC

webRTC는 Server를 통하지 않고 browser간의 연결을 가능하게 한다. → P2P!! 따라서 JS만으로도 구현 가능하다..
peer가 많을 수록 그 수만큼 Data를 업로드하고, 다운로드 해야하므로 확장성에 제약이 있다.

출처 : YouTube 노마드 코더 Nomad Coders <WebRTC? WebSockets? 5분 개념정리!>

Mock Service Worker (MSW 2.0)

ddiae — Wed, 21 Aug 2024 10:58:58 +0900

기획서가 나온 후 API 개발과 디자인이 나오기까지 프론트 엔드는 사실상 할 수 있는 일이 별로 없다.

심지어 API 개발과 디자인이 원래 지정된 기간을 지키지 못하고 밀리게 되는 일이 때때로 생기는데, 그렇다고 최종 마감 기한도 같이 밀리느냐 하면 그건 또 아니다.

어쨌든 마감은 점점 다가오고 가만히 있을 수는 없으니 프로젝트 구조를 설정한 후 현재 기획서를 보고 페이지를 나누고 UI는 어느 정도 틀만 잡아둔다. 더불어 API가 필요 없는 기능적인 부분 모두 구현하고도 시간이 남는다면 가짜 데이터 및 API를 만들어 요청을 보내볼 수 있는데 이 때 사용할 수 있는 것이 MSW(Mock Service Worker)다.

MSW(Mock Service Worker)

MSW는 Service Worker를 사용해 실제 API 요청을 가로채는 모킹 라이브러리이다.

Service Worker를 사용하는 이유는 네트워크 요청을 가로채서 실제 서버에 API 요청을 보내지 않고도 응답을 모킹하여 프론트엔드에서 테스트할 수 있게 하기 위함이다.

따라서 백엔드가 아직 준비가 되지 않았을 때 유용하게 사용할 수 있는 라이브러리이다.

참고로 본 포스팅은 23년도 11월에 업데이트된 MSW 2.0을 바탕으로 한다. (Node.js 18 이전 버전에서는 지원되지 않음)

설치

npm install msw@latest

사용

따로 관리 규칙이 존재하는 것은 아니지만 단일 디렉토리에 Mock을 정의하는 것이 좋다. 나는 현재 진행중인 프로젝트의 src/app/mock 위치에 정의해주었다.

핸들러

이제 요청 핸들러를 관리하는 모듈을 제작해준다. 핸들러는 mock 폴더에 바로 생성해도 좋고, 핸들러의 종류가 다양하다면 handler 디렉토리를 따로 만들어서 관리해주어도 좋다.

선언하는 방식은 다음과 같다.

import { http, HttpResponse } from 'msw';

http.get('요청주소', ({ request }) => {
		...
		return HttpResponse.json(body, { status: 200 });
})

http
http는 HTTP 요청을 가로채기 위한 요청 핸들러를 생성할 때 사용한다.

HttpResponse
HttpResponse는 표준 Response 클래스에서 몇가지 기능들이 추가되어있는 클래스이며 2.0 버전에서는 HttpResponse를 기본으로 사용해야 한다.
HttpReponse에는 body와 options 객체를 전달할 수 있다.

HttpResponse 클래스는 다음과 같다.
class HttpResponse {
  constructor(
    body:
      | Blob
      | ArrayBuffer
      | TypedArray
      | DateView
      | FormData
      | ReadableStream
      | URLSearchParams
      | string
      | null
      | undefined
    options?: {
      status?: number
      statusText?: string
      headers?: HeadersInit
    }
  )
}

핸들러 함수가 여러개라면 배열에 넣어준다.

예시로 다음과 같이 handler.ts를 작성해주었다.

import { http, HttpResponse } from 'msw'

const signinInfo = {
    id: 'ddiaezzang',
    password: 'ddiaezzang'
};
const userInfo = {
    id: `ddiaezzang`,
    name: '짱짱'
    apiToken: 'sign-in api token !!!'
};
 
export const handlers = [
    http.post('/test/sign-in', async ({ request }) => {
        const data = await request.json();
        if (data.id === signinInfo.id && data.password === signinInfo.password) {
            return HttpResponse.json(userInfo, { status: 403 });
        } else return HttpResponse.json({ status: 403 });
    }),
    http.get('/test/userInfo', () => {
        return HttpResponse.json(userInfo);
    })
];

서비스 워커 생성

browser.ts에 서비스 워커를 생성한다.

import { setupWorker } from 'msw/browser';
import { handlers } from './handlers';

export const worker = setupWorker(...handlers);

서비스 워커 활성화

worker.start()를 사용해 App.tsx에서 서비스 워커를 활성화하고 모킹을 시작할 수 있다.

나는 Vite를 사용하였기에 다음과 같이 작성해주었다.

if (import.meta.env.DEV) {
    const enableMocking = async function () {
        const { worker } = await import('./mock/browser');
        return worker.start({
            onUnhandledRequest: 'bypass'
        });
    };
    await enableMocking();
}

실행

프로젝트 실행 시 Console에 다음과 같은 문구가 뜨면 MSW가 성공적으로 활성화되었다는 의미이다.

후기

MSW를 사용해 백엔드 작업 이전에 구조를 잡아볼 수도 있지만, 특히 에러케이스 또는 데이터에 따른 처리를 해주어야 할 경우 백엔드에 테스트 데이터 요청 전에 미리 실제 서버로 가는 API 요청을 가로채 사용해볼 수 있다는 이점이 있었다.

또 실제 API 요청 형식을 그대로 사용해 테스트할 수 있어 추후에 코드를 대거 수정해야하는 일도 없었다.

이전에도 MSW를 사용해본 적 있지만, 2.0 버전의 경우 더 쉽고 간단하게 사용할 수 있어서 편리했다. 다음 개인 프로젝트 작업 시에 꼭 다시 활용해보고자 한다.

출처 : Mock Service Worker

[TanStack Query] QueryFactory로 API 관리하기

ddiae — Fri, 16 Aug 2024 16:54:51 +0900

FSD 구조를 사용할 때 TanStack Query를 더 효율적으로 사용하기 위해 QueryFactory 형식으로 API요청 관리해주면 좋다는 FSD 공식문서 내용을 보고 queryFactory를 적용 해보기로 한다. qeuryFactory는 queryOptions로 구성한다.

queryOptions

queryKey와 queryFn을 재설정 없이 공유하기 위해 queryOptions를 사용할 수 있다. 한 곳에서 공통 옵션을 정의해주어 반복 설정해주지 않아도 된다는 이점이 있다.

const getLearnerStatus = (learnerId: string) =>
    queryOptions({
        queryKey: ['learnerStatus', learnerId],
        queryFn: () => client.get('...'),
        staleTime: 1000,
        ...
    });

mutationOptions

하지만 mutation option을 따로 지정해주는 헬퍼 함수는 없었다. 그래서 처음에는 setMutationDefaults을 사용하고자 했다.

queryClient.setMutationDefaults(['mutationKey'], { ...mutationOptions })

queryClient에 setMutationDefaults 를 사용해 mutationKey와 mutationOption을 각각 넣어주면 key만으로 해당 옵션을 불러와 사용할 수 있다.

편리하기는 했지만 목적은 queryFactory를 만들기 위함이었기에 통일성을 주고자 queryOptions와 똑같이 기능하는 mutationOptions를 정의해주었다.

export function mutationOptions<TData = unknown, TError = DefaultError, TVariables = void, TContext = unknown>(
    options: UseMutationOptions<TData, TError, TVariables, TContext>
): UseMutationOptions<TData, TError, TVariables, TContext> {
    return options;
}

mutation의 옵션을 넣어 queryOptions와 똑같이 작성해주면 된다.

const postLearnerStatus = () =>
    queryOptions({
        mutationKey: ['postLearnerStatus'],
        mutationFn: (learnerId:string) => client.get('...', {learnerId}),
        onSuccess,
        onError,
        ...
    });

queryFactory

이제 앞서 작성한 queryOptions, mutationOptions를 활용해 하나의 queryFactory로 관리할 수 있다.

queryFactory 작성

export const learnerAPIQueries = {
    getLearnerStatus: (learnerId: string) =>
        queryOptions({
            queryKey: ['learnerStatus', learnerId],
			      queryFn: () => client.get('...'),
			      staleTime: 1000,
        }),
    postLearnerStatus = () =>
		    queryOptions({
		        mutationKey: ['postLearnerStatus'],
		        mutationFn: (learnerId:string) => client.get('...', {learnerId})
		    })
};

queryFactory 사용

const { data } = useQuery(learnerAPIQueries.getLernerStatus());
const { mutate } = useMutation(learnerAPIQueries.postLearnerStatus())
// 개별 옵션이 필요할 경우 다음과 같이 작성한다.
const { mutate } = useMutation({...learnerAPIQueries.postLearnerStatus(), onSuccess : () => {...}})