React 구글 애널리틱스4(Google Analytics4) React + Next.js에 연동하기 react-ga 라이브러리를 가장 많이 쓰는 것 같길래 직접 코딩하는 것 보다 간편해 보여 연동했더니 어쩐 일인지 연동이 되지 않았다. 알고보니 구글 애널리틱스 이전 버전에는 추적 코드 형식이 UA-XXXXXXXXX-X인데 이번에 4로 버전업 되면서 코드 형식이 G-XXXXXXXXXX로 바뀌었는데, 최근 버전의 형식은 지원하지 않는다고 한다. 라이브러리가 업데이트될 때까지 마냥 기다릴순 없으니 방법은 두가지가 있다. 1. 추적코드를 UA-XXXXXXXXX-X 형식으로 만들어서 react-ga를 사용하기 왼쪽 사이드바 하단에 관리메뉴 - 속성 만들기를 누른 후 '고급옵션보기'에서 유니버설 애널리틱스 속성 만들기 토글을 켜준다. 설명에 나와있듯이 UA속성은 이전 버전이고, 웹 측정만 지원되므로 신규 사용자에.. 더보기 React.memo와 useMemo 차이점 React.memo React.memo는 Higher-Order Components(HOC)이다. 👀 Higher-Order Components(HOC)란 컴포넌트를 인자로 받아 새로운 컴포넌트롤 다시 return해주는 함수이다. const NewComponent = higherOrderComponent(WrappedComponent); 일반 컴포넌트는 인자로 받은 props를 UI에 활용하는 반면에, higher-order component는 인자로 받은 컴포넌트를 새로운 별도의 컴포넌트로 만든다. HOC는 리액트의 API가 아니라 리액트가 컴포넌트를 구성하는데 있어서의 일종의 패턴이라고 보면된다. React.memo의 사용법은 다음과 같다. const MyComponent = React.memo((p.. 더보기 CRA로 만든 리액트 프로젝트에서 eject하지 않고 optional chaining 사용하기 CRA로 만든 프로젝트에서 optional chaining을 사용하려고 하니 이를 지원하지 않기 때문에 babel config에 해당 플러그인을 설치하라는 메세지가 떴다. CRA eject를 할 경우 숨겨져있는 모든 설정들과 프로젝트가 가진 디펜던시들이 밖으로 나오기 때문에 너무 복잡하기도 하고 한번 eject한 프로젝트는 다시 되돌릴 수 없기 때문에 굳이 optional chaining 하나를 쓰자고 eject를 하는 것은 불필요해 보였다. 따라서 라이브러리들을 설치해서 비교적 간단한 방법으로 커스터마이즈 해주는 방법을 선택했다. npm i -D @babel/plugin-proposal-optional-chaining customize-cra react-app-rewired @babel/plugin-p.. 더보기 Webpack 간단 정리하기 웹팩...봐도봐도 넘나 어려운 그것...웹팩에 대해 오늘 공부해 본 내용을 간단하게 정리해보고자 한다. 웹팩 핸드북은 내가 본 웹팩관련 사이트나 블로그 글중에 가장 설명히 간결하고 이해하기 쉽게 되어있어서 웹팩에 대한 개념을 정리하기에 정말 좋았다. 그리고 Jaehee'sWebClub 이 분 블로그에는 웹팩 핸드북의 더 디테일한 버전의 글이 올라와있는데, 핸드북으로 훑은 내용을 더 자세하게 읽어볼 수 있다. 추가적인 플러그인이나 더 자세한 내용에 대해서는 공식 문서에도 꽤 잘 나와있는 편이기 때문에 공식 documentation을 읽어 보는 것도 좋은 방법이다. 링크는 맨 아래 참고자료에 적어두겠다. 웹팩은 무엇인가? 작은 코드조각인 모듈들을 병합, 압축해서 하나로 만들어준다. 이러한 작업을 빌드, 번들.. 더보기 Next.js 프로젝트에서 .env 변수 사용하기 dotenv-webpack라이브러리를 설치한다. npm install dotenv-webpack 다음은 next.config.js파일에서 Dotenv 플러그인을 webpack과 연결 시켜준다. const Dotenv = require("dotenv-webpack"); module.exports = { webpack: (config) => { // 기존의 웹팩 플러그인에 새로운 Dotenv플러그인을 연결시켜준다. // silent는 옵션은 .env파일을 찾지 못했을 때 에러를 일으키지 않도록 설정해주는 옵션이다. config.plugins.push(new Dotenv({ silent: true })); return config; } }; 이렇게 하고나면 process.env.변수명으로 .env파일에 설정한.. 더보기 React Router로 렌더링하는 컴포넌트에 prop 전달하기 포폴 개편 작업을 하다가 react-router를 사용하여 위와 같이 각 path 마다 컴포넌트를 뿌려줄 때, props는 어떻게 전달해주어야 하는지 찾아보았다. 예를들어, Education 컴포넌트에서 education이라는 prop이 필요하다고 가정해보자. Education 컴포넌트로 어떻게 전달해야할지 몰라 저렇게 일단 넣어보면 원하는대로 동작하지 않는다. React Router는 컴포넌트로 education이라는 prop을 전달해주지 않고 그냥 무시하기 때문이다. }/> 위의 방법이 먹히지 않았으니, 두번째 방법으로 적용해본다면 원하는대로 작동은 한다! 하지만 공식 docs에 따르면 performance측면에서 좋은 방법은 아니라고 나와있다. 이유는 component prop에 inline-fun.. 더보기 create-react-app 없이 react project만들기 webpack이 뭔지 babel이 뭔지는 대충 알고 있지만 여태 개인 프로젝트로 CRA 없이 react 앱을 만들어 본 적은 없다. 그래서 쓰는 글! 이 글의 목표 - react app을 만들 때 webpack과 babel이 왜 필요한지 이해한다 - react app을 만들 때 webpack과 babel은 어떻게 쓰이는지 이해한다 1. 원하는 폴더로 가서 init -y를 통해 package.json을 만든다. -y flag는 package.json파일을 만들 때 모든 config option으로 default값을 사용한다는 것을 의미한다. init -y 2. react프로젝트니까 react와 react-dom 모듈을 설치해준다. 아래 명령어를 사용하면 package.json파일의 dependencies에.. 더보기 React life cycle method 생각의 흐름대로 정리하기 컴포넌트의 라이프사이클은 컴포넌트 상태에 변화가 있을 때마다 실행하는 메서드이다. 크게 마운트, 업데이트, 언마운트로 나눈다. 마운트 DOM이 생성되고 웹 브라우저 상에 나타나는 것을 마운트(mount)라고 함. 컴포넌트 만들기 → constructor → getDerivedStateFromProps → render → componentDidMount getDerivedStateFromProps: props의 변화에 따라 state 값에도 변화를 주고 싶을 때 사용, props로 받아온 값을 state로 동기화 시키는 용도로 사용 componentDidMount: 컴포넌트를 다 만들고 첫 렌더링 다 마친 후 실행. 다른 자바스크립트 라이브러리 or 프레임워크 함수 호출, 이벤트 등록, setTimeout.. 더보기 리액트 이벤트 핸들러 네이밍 항상 리액트 이벤트 핸들러 네이밍에 대한 고민이 있었다. 작성하면서도 이렇게 작성하는게 맞나...?하는 의문이 있었는데, 찾아보니 좋은 블로그 글이 있어 이를 중심으로 간단하게 핵심만 정리해보고자 한다. props on* 접두사를 붙여서 작성한다. 예시) onClick 기본으로 제공되는 이벤트핸들러 네이밍 규칙과 일치하며, on*는 어떤 이벤트가 연결될지 의미한다. function handle*로 작성한다. 예시) handleClick handle*는 어떤 이벤트가 발생했을 때 어떤 것이 호출 될지를 의미한다. 위의 두 네이밍을 예시로 컴포넌트를 만든다면 아래와 같다. 좀 더 복잡한 경우 접두사 + 명사 + 동사의 순서로 작성한다. handleClickBock, handleClickList, handle.. 더보기 redux-saga의 주요함수(delay, call, put, all, takeEvery, takeLatest) 새 프로젝트에서 redux-saga를 써보려고하는데 헷갈려서 주로 쓰는 함수를 정리해보았다. redux-saga docs 링크(한글번역) 읽어주세요 · GitBook No results matching "" mskims.github.io delay 설정된 시간 이후에 resolve하는 Promise객체를 리턴한다. 예시: delay(1000) → 1초 기다리기 put 특정 액션을 dispatch하도록 한다. 예시: put({type: 'INCREMENT]}) →INCREAMENT action을 dispatch한다. takeEvery 들어오는 모든 액션에 대해 특정 작업을 처리해 준다. 예시: takeEvery(INCREASE_ASYNC, increaseSaga) →들어오는 모든 INCREASE_ASYNC.. 더보기 이전 1 2 다음