.env4 React - Next.js environment variable 설정하기(.env files) next js에서 .env 파일들을 설정 하고나서, 개발(dev) 환경과 배포(production)에 따라서 읽는 파일 설정을 하려고 한다. # object - next js env files 설정하기 ## env file 설정 - next js에는 기본적으로 NODE_ENV 값에 따라 설정 값에 따라서 env 파일을 읽어온다. - 기본적으로 .env.local .env.development .env.production 파일 경로가 설정 되어있다. - npm run dev는 next dev가 실행되면서 .env.development 파일을 - npm run start는 next start가 실행되면서 .env.production 파일을... scripts에 따라서 읽어온다. - default 값은 .en.. 2022. 7. 22. React - React environment 설정(.env) React를 npm 으로 커스텀 시켜서 만들었다면, webpack 설정에서 environment를 설정해서 사용이 가능하다. 물론 process.env.~ 를 활용하는 것은 아니고 webpack plugin을 활용하여 environment 변수 값을 설정해서 사용이 가능하다 React cli 경우엔 이야기가 다르다. 최상위 디렉토리에 .env 파일을 만들고 거기에 필요한 변수들을 설정해서 사용을 해야한다. 기본적으로 React는 react-script를 사용하기 때문에 설정할 때 prefix 가 필요하다. 지난번 포스팅했던 next.js에 변수를 설정하는 것처럼 React-cli로 React를 설정했다면... # prefix - REACT_APP_ - 위와같이 변수를 설정을 해야 읽을 수 있다. - .e.. 2022. 2. 13. firebase - next.js getInitialProps login next.js 의 장점은 ssr(server side rendering)이다. page를 렌더하기전에 미리 필요한 데이터를 받아와서 page를 렌더링할 때, 데이터와 함께 렌더링을 해준다. 이러한 장점을 가지고 있어서 페이지를 렌더링 할 때, login이 정보를 빨리 받아와서 login 여부에 따라서 페이지 기능을 다양하게 이용할 수 있는 페이지들이 많다. firebase의 oAuth 기능을 활용해서 login 정보를 받아오고 싶지만, 매번 useEffect를 호출할 수 있다. 하지만, next js 장점을 활용하지 못하고 사용하는것 같다. useEffect(() => { auth.onAuthStateChanged((user: any) => { if (user) { dispatch(signin(user... 2021. 5. 8. React - Next.js environment variable 설정하기 javascript는 node.js라는 환경에서 run time이 된다. 그래서 node.js에서 제공하는 process 라는 기능을 사용할 수 있다. 보안을 위해 root 디렉토리에 .env 파일을 만들고, 중요한 apikey, privatekey 등... 보안에 필요한 값들을 넣어주고, git push를 할 때, .env를 gitignore 설정하여 보안을 지킬 수 있다. #object *next.js env 값 설정 ## React environment variable(env)(기존방식) next js를 사용하게 되면 조금 설정이 필요한 부분이 있다. 이렇게 .env 사용할 값들을 설정해 놓고, 필요한 부분에 process.env.REACT_APP_API_KEY를 사용하게 되면, browser에서 .. 2021. 5. 6. 이전 1 다음 반응형
