리액트에서 개발을 하다 보면 .css를 사용하는 사람도 있고, .module.css를 사용하는 사람도 있는걸 볼수 있다. 두개의 차이에 대해서 알아보겠습니다..css 파일.css 파일은 import를 하게 되면 import한 파일 내에서만 사용이 될거라고 생각을 하지만 생각과 다르게 글로벌 범위에 전역으로 적용이 됩니다. 이는 동일한 클래스 이름을 가진 요소가 여러 곳에서 동일한 스타일을 가질 수 있다는 것을 의미합니다. 따라서, 다른 컴포넌트나 페이지에서 동일한 클래스 이름을 사용할 경우, 원치 않은 스타일이 적용이 될수 있습니다. 다만, import만 하여 간단하게 사용을 할 수 있습니다.// Button.css.button { ...}// Button.tsximport './Button.css..

안녕하세요. 이번 포스팅에서는 간단하게 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 !..