Taehwan Go

Next.js v14.2.8 빌드 에러

Error occurred prerendering page "/dashboard". Read more: https://nextjs.org/docs/messages/prerender-error ReferenceError: window is not defined 얼마전 github actions에서 배포 중 에러가 발생했습니다 로컬에서 githook의 pre-push에서 빌드를 하기 때문에 빌드에러는 발생하지 않을 것이라 생각했지만 빌드 중 window is not defined 에러가 발생했습니다 의심되는 부분을 수정해봤지만 해결되지 않았고 로그를

안드로이드 expo-notifications 잠금화면 알림 표시

최근 expo가 많이 개선되었다고 해서 expo로 모바일앱 개발을 하고 있습니다 이전에 react native cli로 개발했을 때 개발환경 설정이 피로하고 그 설정을 공유하는 것이 번거로워서 expo를 선택하였습니다 이슈 공식문서(https://docs.expo.dev/versions/latest/sdk/notifications/)의 예제 코드르 따라하면 쉽게 푸시메세지가 수신되는 것을 확인할 수 있습니다 하지만 안드로이드폰에서 잠금화면이거나

Next.js 에서 bootstrap과 tailwind css 같이 사용하기(bootstrap에서 important 제거하기)

이슈 bootstrap과 tailwind 모두 기능 단위로 각 css를 유틸클래스(HTML class 속성)로 정의해놓고 조합해서 사용한다는 공통점이 있습니다

Hello world!

하지만 bootstrap과 tailwind는 클래스명이 같지만 그 안에 정의된 수치가 다른 경우가 있습니다 특히 shadcn-ui를 사용하는 경우 tailwind에서 정의된 클래스를 기반으로 구성이 되어있는데 이것이 bootstrap에 정의된 클래스라면 bootstrap의 유틸클래스는 !important가 붙어서

Next-auth refresh token

이슈 * Refresh token으로 Access token을 재발급 받은 후 새로고침하면 로그인이 풀리는 현상 원인 1. 리프레시 토큰으로 토큰 재발급 후 만료시간을 설정 오류 2. 토큰을 설정하는 jwt 콜백이 비정상적으로 한번 더 실행 1. 리프레시 토큰으로 토큰을 재발급 받은 후 jwt 콜백이 호출되고 session 콜백이 호출돼서 값이 넘어가야하는데 마지막에 만료된 토큰데이터로 jwt

Next.js 모바일과 PC를 구분해서 다른 경로로 이동 시키기(middleware 사용)

이슈 * 모바일로 접속할 때와 PC로 접속할 때 다른 화면을 보여줘야한다 * 모바일로 접속 시 기존 앱 경로를 보여주고 * PC로 접속 시 v2 앱 경로를 보여준다 해결 * Next.js의 middleware를 사용하여 모바일로 접속했는지 PC로 접속했는지 확인 후 의도한 화면의 경로로 redirect 시켰습니다 function isMobileUserAgent(userAgent: string): boolean { const mobileRegex = /Android|iPhone|iPad|

Axios interceptors 를 활용한 Refresh token 만료 시 처리 구현

이슈 JWT refresh token 만료 시 로그인 페이지로 이동하지 않는 현상 문제점 refresh 토큰이 만료된 경우를 구분이 어렵다 access 토큰은 만료되었으나 refresh 토큰은 만료되지 않은 경우에 첫 요청은 실패하지만 react-query에서 3번 더 요청을 하기 때문에 두 번째 요청을 보내기 전에 next auth에서 refresh 토큰을 발급받아서 두 번째 요청은 성공했다 해결

Typescript 함수의 입력 타입과 출력타입 추출하기

라이브러리를 사용하다보면 제공하는 메서드의 대부분의 타입을 import 해서 사용할 수 있지만 그렇지 않은 경우도 있습니다 함수의 입력타입 추출하기 함수로 부터 입력 파라미터 타입을 추출할 수 있는 유틸타입(Parameters)을 사용하면 쉽게 타입을 정의해서 사용할 수 있습니다 * Parameters<함수타입> 과 같이 사용하면 함수의 파라미터타입을 배열로 받을 수 있습니다 function add(a:

대량 엑셀 다운로드

대량 엑셀 다운로드를 구현하기 위해 시도한 시행착오를 정리해보았습니다 😊 기존 엑셀 다운로드 구성 * Machine365의 '기록' 페이지를 렌더링 하기 위한 API 사용하여 데이터를 가져오고 가져온 데이터를 브라우저에서 엑셀파일로 구성해서 다운로드가 되는 방식이었습니다 기존 다운로드의 문제점 * 기존 모니터링 데이터를 가져오는 API는 페이지를 렌더링하기 위해 페이지네이션이 적용되어 있었습니다 * 따라서 엑셀로 구성하는 데이터 수에 비례해서

[Javascript] 기준 날짜를 내가 설정한 시간의 기준 날짜로 구하기

이슈 * 사용자 기준 시간이 내가 설정한 시간이 아닌 브라우저 시간을 기준으로 나오는 현상이 있었습니다 예시 * 한국(UTC+9) 2024년 3월 5일 아침 8시에 내가 설정한 시간대가 UTC-1이고 기준 날짜를 구하는 경우(UTC+9와 UTC-1은 10시간 차이가 납니다) * 한국 시간: 2024-03-05 08:00 -> 기준 날짜: 3월 5일 * 설정 시간: 2024-03-04

아키텍처 결정 레코드(ADR)

아키텍처 결정을 가장 효과적으로 문서화하는 방법은 아키텍처 결정 레코드(Architecture Decision Reccord, ADR)을 작성하는 것 입니다 기본 구조 ADR의 기본 구조는 제목(Title), 상태(Status), 콘텍스트(Context), 결정(Decision), 결과(Consequences) 이렇게 5개 섹션으로 구성됩니다 여기에 컴플라이언스(Compliance)와 노트(Notes)라는 추가 섹션을 덧붙일 수 있습니다 제목 * 아키텍처

axios 를 이용해서 우아하게 파라미터 넘기기

GET 메서드는 파라미터를 query string으로 넘깁니다 * 위 그림의 parameters는 query string 이라고도 부릅니다 데이터 조회 시 파라미터 넘기기 type FactoryParams = { size: number; page: number; companyId?: string; factoryName?: string; enabled?: boolean; sort?: string | string[]; } export async function getFactories({ companyId, factoryName, enabled, page, size, sort, }: FactoryParams) { const queryParams = []; if (companyId !== '') { queryParams.

TypeScript

[TypeScript] as 대신 satisfies

satisfies 는 as와 같이 타입 캐스팅하는 용도로 사용할 수 있습니다 * satisfies는 타입스크립트 4.9버전에 업데이트되었습니다 as는 강제로 해당 타입으로 만들어주지만 satifies는 실제로 타입이 맞는지 확인을 합니다 * as로 타입을 캐스팅하면 위와 같이 타입 중 일부가 없어도 타입에러가 발생하지 않지만 satisfies는 모두 있는지 확인해서 안전하게 사용할 수 있습니다