로깅(logging) 설정하기

옵션(Options)

정보 가져오기(Fetching)

Next.js를 개발 모드에서 실행할 때, 콘솔에 찍히는 로그의 수준(logging level)과 전체 URL이 출력될지 여부를 설정할 수 있어요.

이 기능을 잘 활용하면 디버깅할 때 필요한 정보만 골라서 볼 수 있어서 개발 생산성이 쑥쑥 올라가죠!

추가로 알아두면 좋은 점!

로깅 레벨을 너무 자세하게 설정하면 로그가 너무 많아서 오히려 원하는 정보를 찾기 어려울 수 있어요.
반대로 너무 적게 설정하면 중요한 디버깅 정보가 누락될 수 있으니 상황에 맞게 조절하는 게 좋아요.
전체 URL 출력은 인증 토큰 같은 민감한 정보가 포함될 수 있으니, 실제 서비스 환경에서는 주의를 기울이는 게 좋습니다.

Next.js에서는 보통 next.config.js 파일이나 환경변수를 통해 이런 로깅 설정을 편리하게 조절할 수 있습니다. 다음에 설정 방법도 한 번 정리해볼게요!

현재 로깅(logging) 기능은 fetch API를 사용한 데이터 가져오기(fetching)에만 적용되고 있어요. 즉, Next.js 내부에서 발생하는 다른 로그들은 아직 이 설정에 포함되지 않습니다.

module.exports = {
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
}

위 설정을 추가하면 fetch 요청 시 전체 URL이 로그에 출력돼서, 어느 경로로 데이터를 요청했는지 더 명확하게 알 수 있어요.

그리고 Next.js의 Server Components 기능에서 HMR(Hot Module Replacement) 캐시에서 복원된 fetch 요청들은 기본적으로는 로그에 찍히지 않습니다. 만약 이 부분도 로그로 보고 싶다면, 아래처럼 hmrRefreshes 옵션을 true로 설정하면 돼요.

module.exports = {
  logging: {
    fetches: {
      hmrRefreshes: true,
    },
  },
}

이렇게 하면 코드 변경 시 HMR로 인해 캐시된 fetch 요청들도 모두 로그로 확인할 수 있어서, 개발 중 네트워크 요청의 흐름을 더 잘 파악할 수 있답니다.

💡 추가 팁!

로그 레벨 관리나 커스텀 로깅을 추가하고 싶으면, Next.js 자체 로깅이 아닌 별도의 로깅 라이브러리(winston, pino, loglevel 등)를 도입하는 것도 좋은 방법이에요.
특히 서버 환경과 클라이언트 환경에서 각각 로그를 구분하는 게 필요할 때 유용하니 참고하세요!
그리고 로그가 너무 많이 찍히면 개발 속도가 느려질 수 있으니, 필요한 부분만 선별적으로 켜는 게 좋아요.

필요한 설정을 통해 fetch 요청에 대해 잘 관찰하면서, Next.js 프로젝트를 더 효율적으로 개발해봐요!

들어오는 요청( Incoming Requests ) 로그 관리하기

개발할 때 보통 콘솔 창에서 들어오는 요청들이 쭉 찍히는 걸 보신 적 있죠? 기본 설정은 그렇게 모든 요청을 다 로그로 남기도록 되어 있는데요, 이게 너무 많아서 중요한 로그가 묻히거나 콘솔이 지저분해질 때가 있어요.

그래서 incomingRequests 옵션을 활용해서 어떤 요청은 로그에서 아예 빼버릴 수 있습니다. 참고로 이 옵션은 개발 환경에서만 작동하고, 실제 배포된 프로덕션 환경에는 영향이 없으니 걱정 말고 사용하시면 돼요!

간단하게 예를 들어보면:

module.exports = {
  logging: {
    incomingRequests: {
      ignore: [/\api\/v1\/health/],
    },
  },
}

위 설정은 API 내 건강 체크용 엔드포인트 /api/v1/health에 대한 요청만 콘솔 로그에서 무시하는 거예요. 보통 이런 헬스 체크는 너무 자주 호출되기 때문에 로그에 계속 찍히면 방해가 될 때가 많죠.

그리고 만약 아예 모든 들어오는 요청 로그를 끄고 싶을 때는 이렇게 할 수 있어요:

module.exports = {
  logging: {
    incomingRequests: false,
  },
}

이렇게 하면 개발 중일 때도 요청 로그가 완전히 안 찍히니, 정말 필요 없을 때 과감히 꺼버리는 것도 방법이에요.

TIP!
로그 정리는 개발 생산성을 크게 높여요. 너무 많은 불필요한 로그로 중요한 오류 메시지를 놓치지 않도록 필요한 것만 남겨두는 습관을 들여보세요~

JS 설정 파일에서 로그(logging)를 제어하는 방법에 대해 간단하게 정리해볼게요.

로그 끄기 설정하기

기본적으로 logging 옵션을 객체 형태로 설정해서 incomingRequests 같은 세부 로그 항목을 조절할 수 있어요. 예를 들어, 들어오는 요청에 대한 로그를 끄고 싶으면 이렇게 설정하죠:

module.exports = {
  logging: {
    incomingRequests: false,
  },
}

그런데 만약 개발 환경에서 아예 로그를 전부 끄고 싶다면, logging을 false로 바꾸면 돼요:

module.exports = {
  logging: false,
}

이렇게 하면 불필요한 로그가 쏟아지는 걸 막아서 콘솔이 깔끔해지고, 개발할 때 필요한 정보만 집중할 수 있답니다.

좀 더 알려드리자면

로그를 완전히 끄는 것보다 필요한 로그만 필터링해서 사용하는 게 보통 좋아요. 예를 들어 오류 로그만 켜두고, 디버그용 로그는 끄는 식으로요.
로그는 개발할 때만 끄고, 배포 환경에서는 문제가 발생할 때 빠르게 원인을 찾을 수 있도록 적절히 켜두는 게 중요합니다.
만약 로그가 너무 많아지면, 나중에 로그 분석 도구나 미들웨어를 써서 편리하게 관리해보는 것도 추천해요.

아래는 정리한 로그 설정 예시입니다.

설정	설명
`{ logging: false }`	모든 로그 끄기
`{ logging: { incomingRequests: false } }`	들어오는 요청 로그만 끄기