똑같은 삽질은 2번 하지 말자

개요이번건은 React와는 거의 관련이 없고 NextJS에서 env를 다룰때 생긴 문제에 대해 기록하고자 한다. 문제process.env[변수이름]과 같이 env의 요소에 동적으로 접근하려할 때 서버사이드의 동작에서는 문제가 없지만 클라이언트 사이드에서는 접근이 안되는 현상 예를 들면 const key = 'NEXT_PUBLIC_SAMPLE';console.log(process.env.NEXT_PUBLIC_SAMPLE);console.log(process.env['NEXT_PUBLIC_SAMPLE']);console.log(process.env[key]);console.log(process.env);// Server Side Outputsomevaluesomevaluesomevalue{ ... } // ..

개요Nuxt의 유니버셜 랜더링의 하이드레이션이라는 개념에 대해 정리해보고자 한다. 하이드레이션이란?Nuxt 또는 Next에서도 사용되는 기술로써 SSR로 만들어진 정적 HTML에 클라이언트 사이드의 Javascript가 다시 활성화되는 과정을 말한다. 즉, 서버에서 생선된 정적 HTML이 브라우저에 로드된 후, 해당 HTML에 Javascript를 삽입시켜 동적인 인터랙티브가 가능하게 만드는 과정이다. Nuxt에서는 어떻게 하이드레이션을 하고 있을까?app.js// Universal Code 서버와 클라이언트 양쪽에서 사용되는 코드import { createSSRApp } from "vue";export function createApp() { return createSSRApp({ data: (..

보호되어 있는 글입니다.