[z.com] env 파일

env

개발을 하다보면, 키 같은 비밀로 해야하는 값이든 혼자서만 알아야하는 값이 생길 수 있다.

그럴 때 사용하는 파일인데

우리는 저번에 했던 msw를 실행시키는 데 이것을 한번 활용해보자!

env ? env.local ?

env는 배포 후, 배포 전 모두가 다 돌아가는 파일이다.
그에 반해 env.local은 local에서만 돌아가는 파일이다.

우리는 msw를 로컬에서만 돌아가기를 바라고 있기 때문에

.env.local에다가
NEXT_PUBLIC_API_MOCKING=enabled 이와 같이 적어주고

.env에다가는 아무것도 적어주지 않을 거다!

NEXT_PUBLIC

앞서 env 파일에 변수를 적을 때 NEXT_PUBLIC을 사용했었다.

이 NEXT_PUBLIC은 서버와 브라우저 둘 다 이 변수에 접근이 가능하도록 해준다.
NEXT_PUBLIC을 붙이지 않고 그냥 API_MOCKING만 했을 때는 서버에서만 접근이 가능하다.

서버에 중요한 변수나 키 같은 게 유출되면 안 될 경우 NEXT_PUBLIC을 붙이지 않아야 함 !

z.com 분기처리

우린 env에서 값을 가져왔을 때 'enabled'가 true라면 실행을 시켜주고, 아니라면 실행을 시켜주지 않을 거다.

그래서 그 분기 처리를 해주는 컴포넌트를 만들어보자

/app/MSWComponent.tsx

'use client';
import { useEffect } from 'react';

export const MSWComponent = () => {
  useEffect(() => {
    if (typeof window !== 'undefined') {
      if (process.env.NEXT_PUBLIC_API_MOCKING === 'enabled') {
        require('@/mocks/browser');
      }
    }
  }, []);

  return null;
};

그리고 만든 컴포넌트를 제일 상단의 Layout에 뿌리기!

흐름

만약 enabled라면 요청을 보내게 될 건데, /public에 있는 mockServiceWorker.js가 가로채게 된다.

가로채면 /mocks/http.ts로 보내게 되고
거기에 우린 handler를 정의 해놨으니 handler가 적용이 된다!