-
[JavaScript] globalThisJavaScript 2023. 12. 14. 17:42
globalThis는 ES11 (ES2020)에 추가된 기능으로 자바스크립트 환경에서 전역 객체를 가리킨다.
이전 브라우저 환경에서는 window, Node.js 환경에서는 global을 사용해야 하는 등 각각의 환경에 따라 전역 객체에 접근하는 방법이 다르기 때문에 통일성이 없었다. globalThis는 이러한 차이를 해결하고 어디에서나 동일한 방법으로 전역 객체에 접근할 수 있도록 만들어졌다.console.log(globalThis === window) // 브라우저: true console.log(globalThis === global) // Node.js: true
globalThis를 사용하면 특정 환경에 의존하지 않는 코드를 작성할 수 있다.
+
import { PrismaClient } from '@prisma/client' const prismaClientSingleton = () => { return new PrismaClient() } declare global { var prisma: undefined | ReturnType<typeof prismaClientSingleton> } const prisma = globalThis.prisma ?? prismaClientSingleton() export default prisma if (process.env.NODE_ENV !== 'production') globalThis.prisma = prisma
프리즈마 공식 문서 중 globalThis를 사용한 코드를 발견하여 작성하게 되었다.
PrismaClient를 단일 인스턴스로 관리하기 위해 싱글톤 패턴을 사용하였다.
declare global { var prisma: undefined | ReturnType<typeof prismaClientSingleton> }
이 코드는 TypeScript에서 globalThis 객체에 prisma 변수를 전역으로 선언한다는 의미이다. prisma는 prismaClientSingleton 함수의 리턴 타입 (즉 prismaClient 타입) 또는 undefined라는 의미이다.
const prisma = globalThis.prisma ?? prismaClientSingleton() if (process.env.NODE_ENV !== 'production') globalThis.prisma = prisma
globalThis.prisma가 이미 정의되어 있다면 그 값을 사용하고, 정의되어 있지 않다면 prismaClientSingleton 함수를 호출하여 새로운 PrismaClient 인스턴스를 만들고 globalThis.prisma에 prisma 인스턴스를 할당하게 된다.
반응형'JavaScript' 카테고리의 다른 글
[JavaScript] ??= (0) 2023.12.01 [JavaScript] 이벤트 전파 중단하기 (1) 2023.11.23 [PWA] Next.js 프로젝트에 PWA 적용하기 (0) 2023.10.25 [JavaScript] XState 기초 이해하기 (0) 2023.10.20 [JavaScript] 다중 조건 정렬 (0) 2023.10.12