nextjs6 [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] 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. [Next.js] Link 컴포넌트에 속성 설정 방법(className, target, rel 등) # Next.js의 Link 태그에 속성 설정 방법 Next.js 에서 태그는 새로고침없이 페이지를 이동하는 client-side navigation을 위해 사용된다. 만약 컴포넌트에 className, target, rel 등의 속성을 주고 싶다면, 컴포넌트에 직접 주는게 아니라, 태그 하위에 태그를 삽입하여 속성을 설정 주면 된다. import Link from 'next/link' export default function LinkAttr() { return ( // Link 태그 내부에 a태그를 삽입하고, a태그에 속성을 설정한다. 링크 ) } * 참고 : rel 속성으로 noopener noreferrer 를 설정해줘야 보안상 유리하다. 참고로 공식문서의 원문을 첨부한다. If you need .. 2022. 8. 21. [Next.js] pages 라우팅 파일명, 컴포넌트 이름 작성 방법 Next.js 는 File System Routing 을 제공한다. 즉, pages 경로에 위치한 폴더 및 파일명 자체가 접속 경로로 라우팅된다. 1. pages/파일명.tsx : /파일명 접속 라우팅 2. pages/폴더/파일.tsx : /폴더/파일 접속 라우팅 3. pages/폴더/[쿼리].tsx : /폴더/모든경로 접속 다이나믹 라우팅. useRouter().query 로 경로 취득 * index.tsx 는 파일명을 제외한 / 경로로 인식. * 타입스트립트 확장자는 tsx, 자바스크립트 확장자는 js를 사용 그런데 라우팅되는 파일의 파일명과 컴포넌트 명은 달라도 상관없다. 이 글에서는 이에 대해 간략하게 정리한다. # pages 라우팅 파일명, 컴포넌트 이름 작성 방법 - pages 경로의 라우팅 .. 2022. 8. 21. [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. 이전 1 다음
