본문 바로가기
반응형

분류 전체보기70

[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.
[Java] Intellij - Junit5 테스트 실행하기 [ 문제 상황 ] SpringBoot 에서 Junit5 를 사용해서 테스트 코드를 작성하는 글들은 많은데 일반적인 자바 프로그램에서 Junit5를 사용하는 글들은 많이 없어서 블로그를 쓰게 되었습니다. [ 해결 방법 ] 1. Test Folder 만들기 project root 에서 package로 Test 폴더를 생성합니다. 2. Test Folder 설정하기 project root 폴더를 우클릭 후 Open Module Settings 을 클릭한다. 그 후 Test 폴더를 클릭 후 초록색 Tests 를 눌러서 테스트 폴더임을 설정한다. 3. 테스트 만들기 테스트를 만들고 싶은 클래스에 우클릭을 하면 Show Context Actions 클릭 후, Create Test 를 클릭한다. 클릭하면 아래와 같은.. 2023. 4. 13.
[Java] You should run this program with assert switch. Try "java -ea *". intellij 에서 에러 해결하기 [ 문제 상황 ] java 에서 assert 문을 사용하고 돌렸을 때 아래와 같은 오류가 나오면서 빌드가 되지 않았다. You should run this program with assert switch. Try "java -ea *". [ 해결 방안 ] assert 문을 사용했기에 나타나는 에러이고, 해결 방법 또한 에러 메세지에 나와있다. 그러나 intelliJ 에서 설정하는 방법을 찾기 위해 시간이 걸렸다. Intellij ide 에서 설정하는 방법에 대해 설명하겠다. 1. Edit Configurations... 클릭 2. Application - Build and run - Modify options 클릭 3. Add Run Options - Add VM options 클릭 4. VM optio.. 2023. 4. 13.
[Java] java: illegal character: '\ufeff' 해결하기 [ 문제 상황 ] Intellij 에서 파일을 실행시키려고 할 때 다음과 같은 에러가 나왔다. java: illegal character: '\ufeff' [ 문제 원인 ] 찾아보니 해당 java 파일에 UTF-8 BOM이 추가되어 있는데, intellij 에서 이를 해석할 수 없어 나타나는 에러였습니다. 대학교 과제 파일로 받은 것이라 교수님이 파일을 수정하실 때 BOM이 추가되어진 것으로 보입니다. [ 해결 방법 ] 메모장 UTF-8로 저장하거나 intellij 에서 remove BOM 을 하면 된다고 하는데 맥이라서 할 수 없고 왠지 모르게 intellij 에서 메뉴가 나타나지 않아서 할 수 없었습니다. 그래서 다른 곳에서 찾은 bash 스크립트로 해결하였습니다. find . -type f -nam.. 2023. 4. 13.
[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.
[Flutter] Abstract class 를 get_it 에 넣어 사용하기 import 'package:get_it/get_it.dart'; final GetIt inject = GetIt.instance; void init() { inject.registerLazySingleton(() => UsecaseImpl()); }​ import 'package:get_it/get_it.dart'; final GetIt inject = GetIt.instance; void init() { inject.registerLazySingleton(() => UsecaseImpl()); } 문제 상황 현재까지는 실제 클래스를 get it 에다가 넣어서 사용하고 있었다. 그러나 widgetbook 을 사용하면서 실제 main.dart 파일과 widgetbook 에서 실행하는 main.dart 파.. 2023. 2. 17.
반응형

티스토리툴바