개요

prisma를 이용해 개인 회고 블로그를 개발하던 중, prisma를 초기화할 때 사용했던 코드 중 일부이다.

declare const globalThis: {
    prismaGlobal: PrismaClient
} & typeof global

const prisma = globalThis.prismaGlobal ?? prismaClientSingleton()

export default prisma

if (process.env.NODE_ENV !== 'production') {
    globalThis.prismaGlobal = prisma
}

js로 개발을 하면서 global, this 모두 다 만나봤지만 gloabalthis 는 생소했다. 이에 대해서 알아본 내용을 정리하고자 한다.

globalthis

globalThis는 ECMAScript에서 도입된 "전역 객체"를 참조하기 위한 표준화된 방법이며, 실행 환경에 관계없이 항상 전역 객체를 가리키는 특별한 객체이다. 브라우저, Node.js, 웹 워커 등 다양한 환경에서 일관되게 전역 객체를 참조할 수 있게 해준다.

라고 한다. 즉, 개발환경, 실행환경에 상관없이 항상 모두 같은 전역 값을 공유하고 싶을 때 사용하는 것 같았다.

왜 globalThis가 도입되었을까?

JavaScript는 다양한 실행 환경(브라우저, Node.js, 웹 워커 등)에서 사용된다. 각 환경에서는 전역 객체를 다르게 부른다.

• 브라우저: window
• Node.js: global

이 때문에 여러 환경에서 동작하는 코드를 작성할 때, 환경에 따라 전역 객체를 다르게 참조해야 하는 불편함이 있었다. 하지만 globalThis는 이 문제를 해결한다. 어떤 환경에서도 항상 전역 객체를 가리키기 때문에, 환경별로 다르게 코딩할 필요가 없다.

globalthis는 전역 객체인가?

여기서 중요한 점은 globalThis 자체가 전역 객체가 아니라, 전역 객체에 대한 참조(reference)라는 것이다. 다시 말해, globalThis는 현재 실행 컨텍스트의 전역 객체를 반환하는 역할을 한다.

전역 객체가 "집" 인 것이고, globalthis는 "집 주소" 인것이다. 집 주소가 집 그자체는 아니듯이, globalthis는 자체로 전역객체는 아니라고 볼 수 있다.

브라우저 환경

console.log(globalThis === window); // true
globalThis.myVariable = "Hello, World!";
console.log(window.myVariable); // "Hello, World!"

Node js 환경

console.log(globalThis === global); // true
globalThis.myVariable = "Hello, Node.js!";
console.log(global.myVariable); // "Hello, Node.js!"

즉, 이러한 특징 때문에 globalThis를 사용하면 현재 실행 환경에 관계없이 항상 전역 객체에 접근할 수 있는.것이다. 이는 다음과 같이 요약할 수 있다.

• globalThis는 전역 객체에 대한 참조로, 다양한 실행 환경에서 일관되게 전역 객체를 참조할 수 있도록 한다.
• globalThis 자체가 전역 객체는 아니지만, 전역 객체에 바인딩된 this를 반환한다.
  이를 통해 브라우저, Node.js, 웹 워커 등 다양한 환경에서 전역 객체를 쉽게 참조할 수 있다.