next.js 빌드 시 콘솔로그 지우는 법

camel·2023년 7월 23일

next.config 개발 공부 객체 빌드 콘솔로그 키값 프로젝트

next.js에서 디버깅을 하기 위해 콘솔로그를 작성하고
해당 오류가 완성이 되면 지저분하고 다시 쓸일이 없어서 지우곤 했다.

최근 회사에서 유지보수 할 일이 있었는데, 해당 프로젝트에서는
많은 수의 콘솔로그가 쏟아져 나왔다.
주석으로 제거된 것도 있었지만, 보기 힘들었다.

하지만 필터 기능이나 찾아주는 기능을 사용해서 원하는 콘솔로그만을 가져왔는데
내가 원하는 디버깅 콘솔로그 들을 한번에 찾아보고 편리하게 확인할 수 있었다.
그래서 생각이 바뀌었다.

콘솔로그를 지우는 것보다, 콘솔로그를 살려 놓으면 나중에 유지보수할 때 좋겠다는 생각으로 말이다.

이제 유지보수에는 좋아졌지만 문제는 서비스 용으로는 콘솔로그가 뜨는 것이 바람직하지 않았다.

그래서 이러한 점을 막기 위해 build 시 삭제하는 로직을 추가하기로 하였다.

next.config removeConsole

react에서는 바벨을 이용해서 삭제하는데, next.js에서는 바벨을 사용하는 것이 아닌 내장되어있는 next.config를 통해 삭제할 수 있다.

옵션 중

  removeConsole: {
      exclude: ["error", "warn"],
    },

removeConsole이 있다. 이것을 true로 설정하면 모든 콘솔로그를 제거하고,
위처럼 exclude를 사용하여서 내가 살리고 싶은 콘솔로그는 살릴 수 있다.

문제는 저렇게 넣어주면 개발 환경에서도 콘솔로그가 제거된다.
그래서 이를 관리하기 위해서

process.env.NEXT_PUBLIC_NODE_ENV를 추가하였다.
개발환경에서는 dev
서비스 환경에서는 prod를 사용하였다.

객체 키값 다루기

process.env.NEXT_PUBLIC_NODE_ENV===prod 일 때만 넣어주려고 하였다.
문제는 배열에서는 조건문을 활용해서 넣어준 적이 많았는데,
객체에 키값을 추가해주는 방법이 생각나지 않았다.

예전에도 이런 경우가 있어서 찾아서 해결하였는데,
그때 정리를 하지 않아서 다시 찾아서 정리하였다.

2가지 방법이 있는데,

객체에 넣어주기

const nextConfig = {
  ...(process.env.NEXT_PUBLIC_NODE_ENV === "prod" && {
    compiler: {
      removeConsole: {
        exclude: ["error", "warn"],
      },
    },
  }),
  }

위와 같이 객체 키값에 ...()를 작성하고 안에 조건문을 달아서
추가할지 말지 설정해줄 수 있다.

if문 사용하기

if문을 사용해서 넣어줄 수 있다.
이것은 객체 안에 넣어주는 것이 아니라 따로 빼서
nextConfig.compiler 이렇게 키값을 직접 넣어주는 방식으로 처리할 수 있다.

const로 선언해준 객체지만 저장되는 것은 객체의 주소이기 때문에 직접 넣어줄 수 있다.

if (process.env.NEXT_PUBLIC_NODE_ENV === "prod") {
  nextConfig.compiler = {
    removeConsole: {
      exclude: ["error", "warn"],
    },
  };
}

그래서 위 2가지 방법 중 가독성이 좋은 2번째 방법을 사용하였다.
객체 안에는 직접 넣어주는 내용만,
밖에는 조건문으로 넣어줘야하는 내용만 구분지어서 작성하면 가독성이 올라갈 것이라 생각하였다.

완성된 코드

const nextConfig = {

  // ...(process.env.NEXT_PUBLIC_NODE_ENV === "prod" && {
  //   compiler: {
  //     removeConsole: {
  //       exclude: ["error", "warn"],
  //     },
  //   },
  // }), 1번 방법 주석처리하였다.
};

if (process.env.NEXT_PUBLIC_NODE_ENV === "prod") {
  nextConfig.compiler = {
    removeConsole: {
      exclude: ["error", "warn"],
    },
  };
}

module.exports = nextConfig;