Coding Archive

게시글 업로드 페이지: 동적으로 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..

회원가입 API 테스트: Jest와 axios-mock-adapter를 활용한 테스트 방법  이번에는 회원가입 API가 정상적으로 작동하는지 확인하기 위해 Axios를 이용한 POST 요청을 테스트하는 내용을 다룹니다. axios-mock-adapter를 사용하여 네트워크 요청을 모킹(mocking)하여 실제 서버와의 통신 없이도 테스트를 진행하였습니다. 이 글에서는 성공적인 회원가입 요청과 에러가 발생하는 요청을 테스트하는 방법과 과정 중에 발생한 에러들에 대해 설명합니다.  1. Axios와 axios-mock-adapter 소개Axios: HTTP 요청을 보내기 위한 JavaScript 라이브러리입니다. 브라우저와 Node.js 환경 모두에서 동작하며, 간단한 API로 POST, GET, PUT, ..

Jest 설치 및 구성 가이드: Next.js + TypeScript 환경에서의 Jest 사용법 이번에는 Next.js와 TypeScript 프로젝트에서 Jest를 설치하고 구성하는 방법을 단계별로 설명합니다. Jest는 자바스크립트 테스트 프레임워크로, 테스트 코드 작성과 테스트 실행을 빠르고 쉽게 할 수 있도록 도와줍니다. 1. Jest 설치Step 1: Jest 패키지 설치먼저, Jest와 TypeScript 환경에서 Jest를 사용할 수 있도록 필요한 패키지를 설치해야 합니다.yarn add jest ts-jest jest-environment-jsdom @types/jest @testing-library/react @testing-library/jest-dom @testing-library/do..

1. React Hook Form이란?react-hook-form은 간단하고 효율적인 방식으로 폼 유효성 검사와 상태 관리를 처리할 수 있게 도와주는 React 기반의 폼 관리 라이브러리입니다.1.1 프로젝트에서 React Hook Form을 도입한 이유react-hook-form을 프로젝트에 도입한 가장 큰 이유는 '성능'과 '코드의 간결함' 때문입니다. React에서 폼을 처리하는 방식은 대부분 useState로 각 필드의 상태를 관리하는데, 이는 복잡한 폼일수록 코드가 길어지고 상태 변화마다 리렌더링이 발생하여 성능 저하로 이어질 수 있습니다. 이전 프로젝트에서 useState 기반으로 모든 필드 값을 상태로 관리하고, 각 필드가 변경될 때마다 폼 전체가 리렌더링되는 비효율적인 구조를 가지고 있어 ..