웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > nuxtjs

nuxtjs 환경 변수 설정 privateRuntimeConfig, publicRuntimeConfig 차이점 알아보기

Last Modified : 2023-10-20 / Created : 2023-10-12
645
View Count
nuxtjs에서는 두 가지 방식의 환경 변수 선언이 가능합니다. privateRuntimeConfig 그리고 publicRuntimeConfig인데요 아래에서 이 둘의 차이점이 무엇인지 간략하게 알아보겠습니다.




nuxtjs 환경 변수 설정 privateRuntimeConfig, publicRuntimeConfig 차이점 알아보기


먼저 `nuxt`에서 `privateRuntimeConfig` 및 `publicRuntimeConfig` 환경 변수는 nuxt.config.js 파일에서 설정하고 사용할 수 있습니다. 이 두 옵션은 모두 환경 변수를 사용할 수 있도록 제공하는데 프로젝트의 서버 또는 클라이언트 사이드에서 사용할 수 있습니다.


`privateRuntimeConfig`와 `publicRuntimeConfig`의 주된 차이점은?


결론만 얘기하면 privateRuntimeConfig은 서버 사이드에서만 접근 가능하고 이와 반대로 publicRuntimeConfig은 서버 및 클라이언트 모두 접근이 가능하다는 차이가 있습니다.


1. privateRuntimeConfig : 서버 측에서만 접근 가능:


privateRuntimeConfig의 변수들은 서버 사이드에서만 접근 가능합니다. 이러한 변수는 클라이언트 사이드로 전송되지 않으므로, 민감한 정보들(Token,  Auth key, 비밀번호 등등)을 보관하는 데 사용됩니다.
export default {
  privateRuntimeConfig: {
    mySecret: process.env.MY_SECRET
  }
}

이처럼 중요한 정보들은 절대 외부에 노출되면 안되므로 서버에서만 다루어져야 합니다. 이 경우 privateRuntimeConfig를 반드시 사용해야 합니다. 반대로 외부에서 접근해도 되는 정보들은 publicRuntimeConfig에 선언하여 접근합니다. 아래에서 알아봅니다.


2. publicRuntimeConfig : 서버 및 클라이언트 측에서 접근 가능


privateRuntimeConfig와 달리 publicRuntimeConfig의 변수들은 서버와 클라이언트 양쪽 모두에서 접근 가능합니다. 이는 일반 설정이나 공개적으로 공유되어도 안전한 정보를 저장하는 데 사용됩니다.
export default {
  publicRuntimeConfig: {
    myPublicValue: process.env.MY_PUBLIC_VALUE
  }
}


nuxtjs 환경 변수 사용 방법


위에서 선언된 환경 변수를 사용하기 위해서 어떻게 해야할가요? 서버 사이드와 클라이언트 사이드 코드에서 환경 변수에 접근하기 위해서는 `$config` 객체를 사용합니다. 아래 예제를 봐주세요.
// Server-side
context.$config.mySecret
context.$config.myPublicValue

// Client-side
this.$config.myPublicValue

서버 사이드에서 접근하기 위해서는 context 객체의 $config로 접근하여 사용합니다. 클라이언트에서는 this.$config로 접근하여 사용할 수 있습니다.


마치면서


여기까지 nuxtjs에서의 환경 변수 차이점 및 방법에 대하여 알아보았습니다. 정리하면 가장 큰 포인트는 아래와 같습니다.

- privateRuntimeConfig // 민감한 데이터를 서버 측에서만 사용하기 위한 목적의 데이터
- publicRuntimeConfig // 서버와 클라이언트 양쪽에서 공개적으로 접근해 사용할 수 있는 데이터

이렇게 구분함으로써 민감한 정보를 클라이언트 사이드에 노출시키지 않고 안전하게 관리할 수 있습니다.

아래의 글도 찾고 계시지 않나요?

    Previous

    [NuxtJS] useRouter를 사용하여 퀴리스트링 변경하는 방법