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

nuxtjs에서는 두 가지 방식의 환경 변수 선언이 가능합니다. privateRuntimeConfig 그리고 publicRuntimeConfig인데요 아래에서 이 둘의 차이점이 무엇인지 간략하게 알아보겠습니다.

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

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

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

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

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

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

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

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

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

nuxtjs 환경 변수 사용 방법

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

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

마치면서

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

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

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