React33 [React] Next.js 환경 구글 애널리틱스(GA) 적용 방법 # React + Next.js 환경 구글 애널리틱스(GA) 적용 방법 1) 단순 React 환경과 2) Next.js 환경에서 GA 적용 방법을 정리한다. GA4 기준으로 작성했다. 1) 단순 React 환경(CSR)에서 Google Analytics 적용 방법 1. GA 스크립트 복사 - 애널리틱스 홈 > 관리 > 데이터 스트림 > 웹: 사이트 클릭 > Google태그: 태그안내보기 > 직접설치 2. GA 스크립트 적용 - public/index.html 파일의 내부에 스크립트 적용 끝. 2) Next.js 환경에서 Google Analytics 적용 방법 Next.js 환경의 경우, 추가 작업이 필요하다. 다행히 Next.js 를 만든 Vercel에서 해당 방법을 제공한다. https://githu.. 2022. 9. 22. [React] 카카오 애드핏 적용 방법(Next.js 환경) # React + Next.js 환경에서 Kakao AdFit 적용방법 리액트, 넥스트 환경에서 카카오 애드핏을 적용하는 방법을 정리한다. 1. 카카오 애드핏 적용 스크립트 확인 카카오 애드핏 광고 단위 생성 후, 아래 경로에서 카카오 애드핏 적용 스크립트를 확인한다. 그러나 위에서 취득한 아래의 스크립트를 리액트 + Next.js 환경에서 바로 적용하면 정상 작동하지 않는다. (그대로 적용하고 콘솔창을 확인해보면 에러 로그를 볼 수 있을 것이다) 2. KaokaoAdFit 전용 컴포넌트 사용 동적으로 엘리먼트를 생성해 스크립트를 적용해주면 된다. 아래와 같이 카카오 애드핏을 적용할 컴포넌트를 생성하고, 노출시킬 영역에서 사용해주면 잘 적용된다. 중복으로 광고를 로드하지 않도록 useRef를 사용했고, .. 2022. 9. 22. [React-Query] Query data cannot be undefined 에러 해결 방법 # Query data cannot be undefined 에러 발생 이유 React-Query에서 useQuery를 아래와 같이 사용하면 에러가 발생할 수 있다. const { data, status} = useQuery(['todo', id], () => { fetchByParam(id); }); 만약 이런 에러가 발생 했다면... Error: Query data cannot be undefined at Object.onSuccess .... 이유는 useQuery에 등록한 함수가 Promise를 반환하지 않아서이다. 분명히 Promise 를 반환하는 fetch나 axios 함수를 썼겠지만, 호출만하고 리턴은 하지 않았을 수 있다. # Query data cannot be undefined 해결 방법.. 2022. 8. 24. [React] Next.js + ReduxToolkit + TypeScript 설정 방법 (next-redux-wrapper HYDRATE 사용 이유) # Next.js와 Redux 설정에 대하여 Next.js와 Redux를 연동하는 것은 생각보다 간단하지 않다. 왜냐하면, 본질적으로 Next.js 와 Redux 의 출신성분이 다르기 때문이다. 단순하게 정리하면, Next.js는 서버에서 돌아가고, Redux는 클라이언트(브라우저)에서 돌아간다. 여러 브라우저들에서 제각각 돌아가는 Redux의 전역상태를 서버에서 돌아가는 Next.js 에서 사용하려면 일이 복잡해진다. 이 글에서는 이에 대해 좀더 자세히 알아보고, 실제 설정하는 방법을 정리한다. (Next.js + Redux-Toolkit + TypeScript 연동 코드는 하단에 따로 정리해두었다. ) # Next.js 와 Redux의 관계 1. Next.js 는 "서버" 프레임워크다. 1) Next.. 2022. 8. 23. [React] 모달창(Modal) 초간단 구현 방법(리덕스, 라이브러리 X) 이 글은 useState, useRef 등만을 활용하여 수동으로 모달창을 구현하는 방법입니다. 이 것만으로도 이미 충분히 간단하지만, 만약 HTML의 dialog 엘리먼트로 훨씬 더 쉽게 구현하는 방법이 필요하시다면, 아래 글을 참고해주세요. [React] 모달창(Modal) 쉽고 간단한 구현 방법 (HTML dialog 엘리먼트 사용) # 리액트 모달창 구현 방법 - redux나 별도 라이브러리 없이 아주 쉽게 모달창을 구현하는 방법 1. state 로 Modal 노출 여부를 관리한다. - useState 훅으로 모달창 노출 여부를 관리해준다. 2. Modal 창이 최상위에 노출되도록 CSS를 조정한다. - position: absolute로 위치를 조정한다. - z-index를 높게 줘서 최상위에 노.. 2022. 8. 16. [Next.js] getServerSideProps 에서 undefined 반환 이유 # getServerSideProps 에서 undefined 가 반환되는 이유 Next.js 의 getServerSideProps은 오직 Pages 폴더에 있는 페이지 컴포넌트에서만 사용 가능하다. 즉, pages 외부 경로(src/components 등) 에 위치한 컴포넌트에서 getServerSideProps사용시, 호출 자체가 정상적으로 되지 않아 SSR이 작동하지 않는다. 따라서 아래와 같이 데이터를 받아서 사용하려 해도 애초에 받는게 없으니 undefined 로 찍힐 수 밖에 없다. type PropsType = { message: string; }; // pages 외부의 컴포넌트 function Test({ message }: PropsType) { console.log(message); /.. 2022. 8. 16. [React] JSX 특수 문자/기호 입력 방법(꺽쇠, 괄호, 슬래시 등) # 리액트에서 특수 기호 및 특수 문자 입력 방법 HTML에서 꺽쇠( ), 괄호( {, } ), 주석용 슬래쉬 ( //, /* ) 등의 특수문자 입력시, 특수문자 표를 참고하여 <, > 등으로 입력한다. 하지만 리액트 JSX에서는 중괄호를 이용해 쉽게 특수문자를 표현할 수 있다. => 중괄호 내부의 따옴표 사이에 원하는 특수기호를 입력해주면 끝! 1{''}1 괄호 {'{'} 내부 {'}'} 괄호 주석 표시 : {'//'} 주석 표시 : {'/*'} 2022. 8. 15. [React] TypeScript useRef 사용법 (+ ref 객체 타입) # TypeScript에서 useRef 사용 방법 TypeScript에서 useRef 사용시, 아래와 같이 제네릭과 초기값을 설정해야 한다. 1. 값 저장 용도 - 제네릭 : 값의 타입을 넣어준다. - 초기값 : 반드시 타입에 맞는 초기값을 할당해준다. // 값 저장 용도(number) const count = useRef(0); const text = useRef("") 2. DOM 취득 용도 - 제네릭 : 참조하는 HTML 엘리먼트를 넣어준다. - 초기값: null을 넣어준다. // DOM button 참조: 제네릭으로 html엘리먼트(button) 설정. 초기값은 null로 설정 const buttonRef = useRef(null); // DOM input 참조 : 제네릭으로 html엘리먼트(in.. 2022. 8. 11. [React] useRef로 DOM 취득시, null | undefined 되는 이유와 해결방법 # useRef : DOM 취득시 null이 되는 이유 useRef로 DOM을 취득시, 사용 시점에 따라 null 이나 undefined가 될 수 있다. 예를 들어 아래 코드는 작동하지 않는다. import React, { useEffect, useRef } from 'react'; import './App.css'; function App() { // useRef 사용 const inputRef = useRef(null); // 최초 실행시 input에 focus 주기: 실패한다. inputRef.current.focus(); console.log(inputRef.current); // null 이 찍힌다. return ( {/* input 을 useRef로 참조 */} ); } export defau.. 2022. 8. 9. 이전 1 2 3 4 다음
