반응형 Front-End/NextJS10 [NextJS] NextJS app router - Google Analytics 적용하기 [ 문제 상황 ] NextJS app router에서는 useRouter 사용을 지양한다. 그냥 GA script만 넣는 것은 상관 없지만, 현재 path에 따라서 이벤트를 주고 있었기 때문에 이를 해결해야 했다. [ 해결 방법 ] 크게 두 가지 기능이 필요하다. GA script를 넣어주는 것과 path가 달라졌을 때 이벤트를 전송하는 것이다. 두 번째 기능의 코드는 다음과 같다. declare global { interface Window { gtag: (param1: string, param2: string, param3: object) => void; } } export const pageview = url => { window.gtag('config', process.env.NEXT_PUBLIC.. 2023. 10. 3. [NextJS, Stitches] NextJS 13에서 Stitches 적용하기 [ 문제 상황 ] NextJS 13에서 Stitches를 사용할 때, SSR이 제대로 적용되지 않는 버그가 있다. 초기 로딩하면 스타일이 적용되지 않고, client side에서 적용이 되기 때문에 한 번 새로고침을 해주어야 했다. Stitches 페이지에 NextJS를 적용하는 방식은 pages directory일 때의 방식이라 이를 해결하고자 하였다. [ 해결 방법 ] "use client"; import React, { useState } from "react"; import { useServerInsertedHTML } from "next/navigation"; import { getCssText } from "@/stitches.config"; const StitchesProvider = ({ .. 2023. 10. 3. [NextJS] NextJS Google Analytics 적용하기 Google Analytics 웹사이트의 방문자수, 여러 이벤트를 추적하고 결과를 보기 위해서 googla anayltics 를 사용한다. 이러한 ga를 nextjs 13 버전에 적용하는 방법을 알아보자 STEP 1 - env 에 ga 코드 추가하기 코드를 상수로 관리하기 위해서 .env 파일을 루트 폴더에 만들고 아래 코드를 추가한다. NEXT_PUBLIC_GOOGLE_ANALYTICS='G-*******'; STEP 2 - window 에 ga 추가하기 /lib/ga.ts 파일에 ga tag를 사용할 수 있도록 window에 추가해주고, 여러 이벤트를 먼저 정의해준다. declare global { interface Window { gtag: (param1: string, param2: string,.. 2022. 12. 18. [NextJS] Image background 설정하기 일반적으로 웹에서는 img tag 혹은 css의 background-image 속성을 사용하여서 배경 이미지를 설정한다. 그러나 Next JS에서는 자체적으로 최적화를 해주는 Image tag가 있다. 따라서 이 태그를 사용해 배경으로 설정해보겠다. import Image from "next/image"; export default function Page() { return ( content ) } Image tag에서는 width와 height를 설정할 수도 있지만 위처럼 layout을 fill로 설정하고 objectFit을 cover로 설정하면 자동으로 배경을 채워준다. objectPosition 속성은 사용하지 않을 수도 있지만 우선 center로 설정해준다. 이렇게 작성하기만 하면 이미지와 co.. 2022. 7. 2. [NextJS] SyntaxError: Unexpected token u in JSON at position 0 - router.query undefiend 해결하기 [ 문제점 ] Next Js의 이전 페이지에서 query를 사용해 값들을 넘겨주고 이 값들을 가져와 사용하려고 하였다. 전달하는 값이 json이라서 JSON.stringify을 하여서 보내고, JSON.parse함수를 사용해서 받으려고 하였다. 그래서 다음과 같은 코드로 실행을 하였는데 오류가 나왔다. import {useEffect} from "react"; import {useRouter} from "next/router"; export default function App() { const router = useRouter(); useEffect(() => { console.log(JSON.parse(router.query.dict as string)); }, []); return ( {router.. 2022. 6. 28. [NextJS] Next js를 배워보고 느낀 점 React에서는 routing을 하기 위해서는 react-rout-dom을 사용해서 path 별로 어떠한 컴포넌트가 보일 건지 설정을 해주어야 했다. 그리고 SSR을 설정하기 힘들어서 SEO면에서도 좋지 않았다. 솔직히 SEO같은 점들은 체감되지는 않았지만, Next js를 쓰게 되면 file 별로 자동으로 path가 만들어지고 SSR을 하기에도 매우 편하다고 해서 배워보았다. 노마드코더의 Next JS 무료 강의를 들었는데 계속 들으면서 느꼈던 것은 Next js에는 정말 엄청난 기능들이 많다는 것이었다. file 별로 URL path가 생성되는 것만 알고 있었는데, 그 속을 들여다보니 기본적인 SSR 기능으로 SEO를 할 수 있고, redirect와 rewrite 기능으로 URL masking을 할 .. 2022. 6. 11. [NextJS] react-quill ReferenceError: document is not defined 에러 해결 [ 문제점 ] Next js프로젝트에서 react-quill을 설치하고 일반적인 컴포넌트 가져오는 식으로 import ReactQuill from react-quill 이처럼 코드를 작성하면 document is not defiend이라는 오류가 나오면서 정상적으로 작동되지 않는다. [ 해결 방법 ] Next JS는 SSR(Server Side Rendering) 먼저 이러한 문제가 생긴 이유는 Next js는 SSR(server side rendering)을 하기 때문이다. SSR이란 화면에서 보여줄 페이지를 서버에서 먼저 렌더링을 한 후에 클라이언트에게 제공한다. CSR(client side rendering)을 화면을 조작한는 자바스크립트 파일을 모두 로드해야 해서 속도가 느리지만 SSR의 경우에는.. 2022. 6. 10. [NextJS] npm run build errno -4048, ELIFECYCLE 오류 해결 [문제점] npm run build를 하면 아래와 같은 오류가 나면서 빌드가 정상적으로 되지 않았다. Error: EPERM: operation not permitted, open 'C:\Users\***\.next\trace' Emitted 'error' event on WriteStream instance at: at internal/fs/streams.js:335:14 at FSReqCallback.oncomplete (fs.js:180:23) { errno: -4048, code: 'EPERM', syscall: 'open', path: 'C:\\Users\\***\\.next\\trace' } npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! music-.. 2022. 2. 1. [JS] mouse event, drag drop algorithm JavaScripts에서 마우스의 이벤트를 처리하는 함수 click - 마우스를 클릭할 때 발생 dbclick - 마우스를 더블 클릭할 때 발생 mousedown - 마우스 버튼을 누를 때 발생 mouseenter - 마우스 요소의 경계 외부에서 내부로 이동할 때 발생 mouseleave - 마우스 요소의 경계 내부에서 외부로 이동할 때 발생 mousemove - 마우스를 움직일 때 발생 mouseout - 마우스가 요소를 벗어날 때 발생 mouseover - 마우스를 요소안에 들어올 때 발생 Drag and Drop Algorithm 일반적인 알고리즘과 box를 드래그 앤 드롭으로 움직이는 경우의 어떠한 기능을 해야 하는지 설명하도록 하겠습니다. mousedown에서는 움직임이 필요한 요소를 준비합니다.. 2021. 7. 11. 이전 1 2 다음 반응형
