2025년 5월

Preface

주말마다 비 오던 5월 ☔️

Newly Learend

zod

• 스키마 선언 및 유효성 검사 라이브러리
• 런타임 타입 검사 가능
• 원하는 타입 강제 기능

import { z } from "zod";

// creating a schema for strings
const mySchema = z.string();

// parsing
mySchema.parse("tuna"); // => "tuna"
mySchema.parse(12); // => throws ZodError

// "safe" parsing (doesn't throw error if validation fails)
mySchema.safeParse("tuna"); // => { success: true; data: "tuna" }
mySchema.safeParse(12); // => { success: false; error: ZodError }

import { z } from "zod";

const User = z.object({
    username: z.string(),
});

User.parse({ username: "Ludwig" });

// extract the inferred type
type User = z.infer<typeof User>;
// { username: string }

Ref https://zod.dev/

jest toBeCloseTo

• https://jestjs.io/docs/expect#tobeclosetonumber-numdigits
• 소수점 지정자리까지만 같으면 같은 값으로 쳐준다

usePreservedCallback

• https://react-simplikit.slash.page/hooks/usePreservedCallback.html
• ref를 사용해 최신값을 반영하면서도 리렌더링에도 바뀌지 않는 콜백 함수의 참조를 유지하는 방법

타입스크립트 Pick vs Extract / Omit vs Exclude

객체 타입에 사용하는 유틸리티

• Pick<T, K>

  • 정의: 타입 T에서 K에 해당하는 키만 골라 새로운 타입을 만든다.

  • 예시:

    Copy

    type User = {
        id: number;
        name: string;
        email: string;
    };
    
    type UserName = Pick<User, 'name'>;
    // => { name: string }
    

• Omit<T, K>

  • 정의: 타입 T에서 K에 해당하는 키를 제거한 새로운 타입을 만든다.

  • 예시:

    Copy

    type UserWithoutEmail = Omit<User, 'email'>;
    // => { id: number; name: string }
    

유니언 타입에 사용하는 유틸리티

• Extract<T, U>

  • 정의: 유니언 타입 T에서 U에 해당하는 타입만 남긴다 (공통된 타입만 유지).

  • 예시:

    Copy

    type A = 'a' | 'b' | 'c';
    type B = 'a' | 'z';
    type Result = Extract<A, B>;
    // => 'a'
    

• Exclude<T, U>

  • 정의: 유니언 타입 T에서 U에 해당하는 타입을 제거한다.

  • 예시:

    Copy

    type A = 'a' | 'b' | 'c';
    type Result = Exclude<A, 'b'>;
    // => 'a' | 'c'
    

useVisibilityEvent

페이지 한번 나갔다가 다시 들어왔을때 사용

Ref https://www.slash.page/ko/libraries/react/react/src/hooks/useVisibilityEvent.i18n

애플 앱 심사 가이드라인

빡세다! 😇

Ref https://developer.apple.com/app-store/review/guidelines/#apple-pay

yarn deadcode

아무곳에서도 참조되지 않는 파일을 골라준다

Ref https://classic.yarnpkg.com/en/package/deadcode

button 아닌 요소에 onClick을 넣고 싶다면

이렇게까지 해야 하나 싶지만! (그냥 button 쓰는 게 나을듯!)

Ref https://react-spectrum.adobe.com/react-aria/useButton.html#custom-element-type

Monthly Pinned

주목할 만한 ‘K-오픈소스’ 프로젝트

SWC도 한국인 개발자가 만든 것이었다니!

루즈해지는 사이드프로젝트에 더불어 오픈소스에나 다시 기여해보고픈 맘이 생겨버렸어

Ref https://yozm.wishket.com/magazine/detail/3097/

단지 권한 기능을 추가해달라고 했을 뿐인데(feat. 인증 기능 개선)

오래 전, 우테코에서 나도 애썼던 access token과 refresh token 😵‍💫

여기서는 refresh token rotation이라는 방법을 사용하여 refresh token의 탈취 위험성을 막는다.

또 token family 방식을 이용해 불안정한 네트워크에서의 요청에도 대응한다.

그리고… 각종 서버 로직들 👨‍🔧

Ref https://spoqa.github.io/2025/04/18/improve-auth.html

Starlink Mini로 몽골에서 디지털 보톡스 즐기기 (한국 사용기 포함)

그냥… 처음 보는 유형의 대단한 사람 😲 ㅋㅋㅋ

이런 덕후들이 있어야 세상이 발전하는 것 같기도 한다.

Ref https://tech.ssut.me/starlink-mini-digital-botox-mongolia-korea-review/

무신사 Web 테스트 자동화 2.0: 더 빠르고 효율적인 테스트 환경 만들기

테스트고 뭐고 그에 앞서 너무나 반가운 무신사 Web 복귀 소식 🤗

중복 동작은 1번만 수행하도록 만든 것은 탐난다! 시간이 확실히 단축될 듯

근데 클라이언트 테스트는 어떻게 좀 안 해주나? 😬

Ref https://medium.com/musinsa-tech/무신사-web-테스트-자동화-2-0-더-빠르고-효율적인-테스트-환경-만들기-af3ad971e0af

개발자의 물경력은 어떻게 만들어지는가

‘문제 해결 능력’을 기르는 것.

사실 회사가 아닌 나에게 달린 것!

그리고 오너십의 진정한 의미.

Ref https://yozm.wishket.com/magazine/detail/3144/

리액트 쿼리, 내부는 이렇게 움직인다

나의 구 회사, 구 팀에서 이렇게 쓰고 있구나 🥺 보고 싶어요 정환님

react query도 React 18의 useSyncExternalStore 훅 등 최신 기술들을 많이 빌려 쓰고 있었다니

기술은 이토록 발전하는데 나도 반성해야겠다.

Ref https://jeonghwan-kim.github.io/2025/05/11/how-react-query-works

Announcing TypeScript Native Previews

vscode에서 손쉽게 타입스크립트 컴파일 결과와 오류를 볼 수 있다

Ref https://devblogs.microsoft.com/typescript/announcing-typescript-native-previews/

자바스크립트 최신 메서드를 소개합니다

세상 좋아졌구,,, 왜 이제서야 좋아졌나 싶구,,, lodash는 어떻게 되는거지? ㅎ

Ref https://yozm.wishket.com/magazine/detail/3156/

React Query v4 백포팅

신규 메이저 버전에 추가된 기능들을, 이전 버전에도 백포팅하여 다시 release를 할 수도 있구나 😲

React Query v5에 도입된 다음 기능들을 이제 v4.39.1에서도 체험해볼 수 있다.

• useSuspenseQuery
• useSuspenseQueries
• queryOptions
• useMutation - isPending 추가
• initialData를 사용하는 useQuery / useQueries에서 리턴 타입이 더 정확하게 추론(DefinedQueryResult)되도록 타입 개선 및 함수 오버로드 추가

이런 식으로 기여도 할 수 있다니 멋있잔아

Ref https://github.com/TanStack/query/pull/9140

Wrap up

주말마다 비가 내려 얄미웠던 5월

그 마지막 주말은 맑고 화창하기만 하구만 ☀️

이제 슬슬 여유가 생기니 위험하게도 심심한 마음이 드는구만…? 🙄