Coding Archive

Node.js 버전 문제로 Vercel 배포 실패?!? 평소와 같이 코드를 수정하고 메인 브랜치에 커밋 푸시했는데, 배포가 실패했다는 에러가..😱갑자기 요런 에러가 뜨면서 deploy가 안되는 이슈 발생! 요게 무슨 뜻이냐면?Node.js 18.x는 지원 종료(EOL) 되어서 더 이상 Vercel에서 빌드할 수 없습니다.해결 방법은 Node.js 22.x로 업그레이드 하는 것뿐입니다.원인을 확인해보니, 지금 프로젝트는 Node.js 18 환경에서 빌드되고 있었고, Vercel 정책상 18 버전은 더 이상 지원하지 않으므로 빌드가 중단된 것이었습니다. ✅ 수정 방법 (so simple 주의)1️⃣ Vercel 프로젝트 설정Vercel 대시보드 → Project Settings → Node.js Ver..

이전에 올린 글에서 Next.js BFF(Backend For Frontend, 프록시) 아키텍처를 적용해, HttpOnly 쿠키 기반 인증으로 보안과 성능을 개선하는 과정을 소개했습니다.그런데 프록시 구조를 도입하기 전, 이런 의문이 들었습니다.“굳이 프록시까지 쓰지 않고, 쿠키 라이브러리 + 인터셉터 구조로 해결할 수 있지 않을까?” 실제로 이전의 프로젝트에서 react-cookie + Axios 인터셉터 조합으로 인증을 구현한 적이 있었고, 작은 규모의 프로젝트에서 이 방식이 꽤 단순하고 빠르게 적용할 수 있어서 나쁘지 않았습니다. 하지만, 쿠키 라이브러리만으로는 HttpOnly 쿠키의 보안 장점을 살릴 수 없었습니다.이 글에서는 그 이유와 함께 각 방식을 자세히 비교해 보겠습니다. 대부분의 ..

Next.js 프로젝트를 리팩토링하는 과정에서 예상치 못한 보안 이슈를 발견하게 되었습니다. 바로 브라우저의 개발자 도구에서 쿠키에 저장된 토큰이 그대로 노출되고 있었다는 점입니다. 토큰은 사용자 인증과 보안을 위해 가장 중요한 값 중 하나인데, 이 값이 그대로 클라이언트 측에서 확인 가능하다면 XSS(교차 사이트 스크립트 공격)나 토큰 탈취 등의 보안 취약점으로 이어질 수 있습니다.이를 개선하기 위해 기존 코드 구조와 인증 방식을 다시 점검하게 되었고, 특히 토큰을 어디에 저장하고, 어떻게 전달할 것인가라는 주제에 집중했습니다. 프론트엔드와 백엔드 간 통신 구조, 쿠키 옵션 설정(HttpOnly, Secure 등), 프록시 서버의 역할까지 전반적으로 살펴보면서 코드를 수정해 나갔습니다.이번 글에서는 제..

게시글 업로드 페이지: 동적으로 element 높이 조정하기(custom hook, throttle) ⚠️ 배경게시글 업로드 페이지를 구현하면서, 텍스트를 입력하기 위한 textarea의 높이가 고정되어 있지 않고, 입력된 텍스트의 양에 따라 동적으로 높이가 확장되는 UI가 필요했습니다. 1. 텍스트 길이에 따른 높이 변화   사용자가 작성하는 텍스트의 양은 고정되어 있지 않으며, 작성 도중에 계속 증가하거나 감소할 수 있습니다. 따라서 textarea의 높이가 텍스트 양에 맞춰 유연하게 조정되어야 사용자 경험(UX)이 개선됩니다.2. CSS만으로는 해결되지 않는 스크롤 문제   min-height와 max-height를 CSS로 설정하면 높이를 일정 범위 내에서 고정할 수 있지만, 텍스트가 증가해도 t..

Next.js Route Groups와 미들웨어를 이용한 인증 및 경로 충돌 문제 해결 Next.js의 app 디렉토리 구조와 Route Groups(경로 그룹) 기능을 활용하다 보면, 경로를 직관적이고 조직적으로 구성할 수 있지만 동일한 URL 경로로 해석되는 페이지를 두 개 이상 구성하게 되면 경로 충돌 문제가 발생할 수 있습니다. 이번 글에서는 로그인 상태에 따라 다른 페이지를 렌더링하는 과정에서 발생한 문제를 트러블슈팅한 과정과 미들웨어를 활용한 접근 제어 방법을 공유합니다. 🐛 문제 상황프로젝트의 메인 페이지(/)에서 로그인 여부에 따라 다른 콘텐츠를 보여주고자 했습니다. 로그인 상태에 따라 별도의 경로 그룹을 활용해 다음과 같이 디렉토리를 구성했습니다.src/ ├──app/ │ ├── (p..

날짜 변환과 시간 표시 구현: 커스텀 함수와 Day.js 활용 비교  프로젝트를 진행하면서 댓글의 생성 시간을 "몇 분 전", "몇 시간 전" 등 상대적인 시간으로 표시해야 하는 요구사항이 있었습니다. 처음에는 이 기능을 직접 구현하기 위해 TypeScript로 날짜 변환 함수를 작성했고, 이후에는 더 나은 유지보수성과 코드 간결성을 위해 Day.js 라이브러리를 설치해 적용했습니다. 이번 글에서는 날짜 변환 함수를 직접 작성한 방법과 Day.js를 사용한 이유를 함께 다루겠습니다. 1. 날짜 변환 함수 직접 작성하기먼저, 댓글 생성 시간을 받아 현재 시간과의 차이를 "몇 분 전", "몇 시간 전"과 같은 형식으로 반환하는 getTimeAgo 함수를 작성했습니다. 이 함수는 밀리초 단위 차이를 계산하여 ..

Tailwind CSS에서 동적 크기 클래스 문제와 해결 방법 프로젝트를 진행하던 중 Tailwind CSS를 사용할 때 동적 클래스 적용이 제대로 되지 않는 문제가 발생했습니다. UserImage 컴포넌트에서 image 크기를 h-[${size}]와 같은 형태로 자바스크립트 템플릿 리터럴을 사용하여, Tailwind가 이를 인식하지 못했기 때문입니다. 이번 글에서는 이런 문제의 이유와 해결 방법을 자세히 살펴보겠습니다. 문제 상황 : UserImage 컴포넌트가 렌더링되지 않는 이유Tailwind CSS는 정적으로 컴파일된 CSS 프레임워크입니다. 즉, 빌드 과정에서 사용된 모든 CSS 클래스를 스캔하고, 최적화된 CSS 파일을 생성합니다. h-[${size}], w-[${size}]와 같이 자바스크립..

Next.js와 TanStack Query(React Query) 테스트 환경에서 발생한 오류 해결과정 문제 발생로그인 페이지 컴포넌트에서 테스트를 실행할 때 두 가지 주요 오류가 발생했습니다. 1. 라우터 오류invariant expected app router to be mounted 2. 쿼리 클라이언트 오류No QueryClient set, use QueryClientProvider to set one 이 문제들은 Next.js의 App Router와 React Query의 QueryClient가 테스트 환경에서 설정되지 않았기 때문에 발생했습니다. 각각의 문제를 해결하기 위해서 라우터 모킹 및 QueryClient 설정을 추가해야 했습니다.  1. 라우터 오류 해결: Next.js의 useRou..