안녕하세요. 이번 포스팅에서는 Nextjs에서 dotenv 사용하는 방법에 대해서 알아보겠습니다. 기본적으로 Create Next App으로 Nextjs 프로젝트를 생성시 루트에 .env 파일을 생성을 하고 안에 값을 NEXT_PUBLIC_으로 시작해서 작성을 하면 됩니다. # .env NEXT_PUBLIC_TEST=Hello World 위와 같이 Hello World라는 값을 가진 REACT_APP_TEST를 만든 후 console을 통해 확인을 해보겠습니다. // index.tsx import React from 'react'; function Home() { console.log('test', process.env.NEXT_PUBLIC_TEST); return Hello, World! } expor..

안녕하세요. 이번 포스팅에서는 간단하게 dotenv를 사용해보도록 하겠습니다. 기본적으로 CRA로 리액트 프로젝트를 생성시 루트에 .env 파일을 생성을 하고 안에 값을 REACT_APP_으로 시작해서 작성을 하면 됩니다. # .env REACT_APP_TEST=Hello World 위와 같이 Hello World라는 값을 가진 REACT_APP_TEST를 만든 후 console을 통해 확인을 해보겠습니다. // App.tsx import React from 'react'; function App() { console.log('test', process.env.REACT_APP_TEST); return Hello, World! } 위와 같이 코드를 작성하고 실행을 하면 아래와 같이 콘솔에 Hello Wo..

안녕하세요. 이전 포스팅에서는 react-ga를 이용해서 GA 이벤트를 등록하는 방법에 대해서 알아보았습니다. 이번 포스팅에서는 gtag를 이용해서 GA 이벤트를 등록하는 방법에 대해서 알아보겠습니다. 먼저 _app.jsx에 next/head를 추가하고 gtag 스크립트를 추가해주겠습니다. // _app.jsx import Head from 'next/head' function MyApp({Component, pageProps, err}) { return } export default MyApp 그리고 페이지가 이동 할때 마다 PageView 이벤트를 발생하게 하기 위해서 router.events를 추가해서 PageView 이벤트를 추가해주도록 하겠습니다. ... function MyApp({Compon..

안녕하세요. 이번 포스팅에서 NextJS에서 GA 이벤트 등록에 대해서 이야기해보겠습니다. react-ga를 이용해서 GA 이벤트를 등록하는 방법이 있습니다. ga.jsx에 react-ga 초기화를 하고 GA event를 위한 함수를 작업해주겠습니다. ReactGA.initialize의 첫번째 param으로 GA 추적 ID를 넣어주고 두번재 param에 옵션 값을 넣어줍니다. 저는 실서비스가 아닐 경우에 디버깅을 위한 옵션을 추가해주었습니다. // ga.jsx import ReactGA from 'react-ga'; export function init() { ReactGA.initialize(process.env.GA_TRACKING_ID, { debug: process.env.Environment !..