본문 바로가기
반응형

Front-End25

[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.
[TS] Typescript 에서 pipe 연산자 구현하기 pipe 함수를 왜 사용해야 하는가 만약 다음과 같은 코드를 작성한다고 해봅시다. const n = -19; const result = Math.floor(Math.sqrt(Math.abs(n)))); 작성하는 사람도, 보는 사람도 알기 어려운 코드입니다. 이를 pipe 함수를 사용해서 나타내면 다음과 같습니다. const n = -19; const result = pipe(n, Math.abs, Math.sqrt, Math.floor); 이처럼 pipe 함수를 사용하면 코드의 흐름을 분명하게 할 수 있습니다. Javascript 에서 pipe 함수 function pipe(arg, firstFn, ...fns) { return fns.reduce((acc, fn) => fn(acc), firstFn(a.. 2023. 7. 25.
[TS] jest (vite, typescript) 설정하기 cra 를 사용하면 설정 없이 바로 사용할 수 있지만, 그렇지 않은 경우 jest 를 사용하기 위해서는 여러 설정이 필요합니다. 사용 기술 : yarn, typescript, vite 1. 라이브러리 import 하기 yarn add -D jest, @types/jest, jest-environment-jsdom, ts-jest 2. jest.config.json 설정 { "roots": ["/"], "testEnvironment": "jsdom", "moduleNameMapper": { "\\.(css|less|svg)$": "identity-obj-proxy" }, "transform": { "^.+\\.tsx?$": "ts-jest" } } 3. babel.config.json 설정 { "prese.. 2023. 3. 14.
[TS] Vite + TS 절대경로 설정하기 [문제 상황] 처음 vite 를 시작하고, typescript 로 설정을 하면 상대경로만 지정을 할 수 있다. 설정을 추가해서 절대경로를 사용하는 방법을 알아보자. [해결 방법] 절대경로를 설정하기 위해서는 2개의 파일을 건드려야 한다. 1. vite.config.ts vite 에게 경로에 대한 정보를 알려주어야 컴파일을 정상적으로 할 수 있다. 먼저 나의 파일 구조는 다음과 같다. index.html vite.config.ts tsconfig.json public └─ vite.svg src ├─ model │ ├─ ... │ └─ ... ├─ pages │ ├─ ... │ └─ ... └─ main.ts 이때 public, src, model, pages 에 절대경로로 바로 접근할 수 있도록 한다. .. 2023. 3. 8.
[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.
[CSS] mobile address bar 포함하여 100vh 적용하기 + React, SCSS [ 문제점 ] 일반적으로 css 에서 100vh를 사용하면 데스크탑에서는 문제가 되지 않는다. 그냥 창 전체 크기로 알아서 맞추어 주지만, 모바일에서는 url 주소창이 있기 때문에 문제가 생긴다. 주소창의 형태와 크기는 safari, chrome 에 따라 다르고, 버전에 따라서도 다르기 때문에 각각의 경우를 나누어서 계산하기는 힘들다. [ 해결 방법 ] 찾아보니 CSS에서 height: -webkit-fill-available; height: fill-acaiable; 이런저런 속성들이 있다고 했다. 그래서 적용시켜보니 safari에서는 돌아가는데 chrome에서는 또 적용이 안되는 오류가 있었다. 그래서 chrome에서는 또 따로 분기를 나누어서 처리하고 하려고 하다가 다음과 같은 방법을 발견하고 해결.. 2022. 9. 5.
[React] Uncaught ReferenceError: setImmediate is not defined 해결 [ 문제 상황 ] react 에서 nodemailer를 사용하는데 다음과 같은 오류가 나왔다. [ 해결 방법 ] github을 찾아보니 jest 버전 문제라는 경우도 있고, 여러 경우가 있었는데 정확히 어디서 문제가 생긴건지는 파악하지 못했다. 그러나 맨 아래의 링크를 참고하여 오류는 해결하였다. 먼저 setImmediate가 없다고 하니 이를 install 해준다. npm install setimmediate 그 다음 오류가 난 페이지에서 다음과 같이 Import 를 해준다. import 'setimmediate'; [ 출처 ] 2022. 8. 17.
[CSS] width에 padding, margin 포함시키기 [ 문제점 ] 일반적으로 div 에 width를 지정하면 이는 padding, margin이 포함되지 않는다. figma와 같은 디자인을 받았을 때 전체 width 값이 주어지고, padding과 margin이 따로 주어진다면 이를 맞추기 위해서 패팅, 마진의 값을 계산으로 빼주어야 하는 상황이 발생한다. [ 해결 방법 ] 이와 같은 상황에서 패딩, 마진을 포함해서 width를 정하게 해주는 방법이 있다. css에서 box-sizing을 border-box로 해주면 된다. .box { box-sizing: border-box; width: 865px; padding: 64px; } 2022. 8. 3.
반응형

티스토리툴바