choijming21 님의 블로그

쿠기(Cookie)와 토큰(Token)의 설명

웹 개발을 하다보면 인증 방식에 대해 고민하게 됩니다. 이때 가장 기본이 되는 개념이 '쿠키'와 '토큰'입니다.  🍪 쿠키(Cookie)란? 쿠키는 웹사이트가 사용자의 브라우저에 저장하는 작은 데이터 파일입니다. 사용자의 세션 관리, 개인화 설정 등을 위해 사용됩니다. 웹 서버가 사용자의 브라우저에 전송하면, 브라우저가 이를 저장했다가 동일한 서버에 요청을 보낼 때 함께 잔송합니다. 🍪 쿠키의 특징:클라이언트(브라우저) 측에 정보 저장됨크기 제한이 있음(보통 4KB)만료 날짜를 정할 수 있음특정 도메인에 종속됨 🍪 쿠키의 예시:// 서버에서 쿠키 설정 (Node.js 예시)response.setHeader('Set-Cookie', 'username=김철수; expires=Fri, 31 Dec 202..

폼 관리는 웹 개발에서 빈번하게 마주지는 과제입니다. 특히 유효성 검사는 사용자 경험과 데이터 무결성을 위해 필수적인 요소입니다. 이번 글에서는 Next.js에서 폼 관리를 간소화 해주는 React Hook Form과 타입스크립트와 함께 사용하기 좋은 스키마 검증 라이브러리인 Zod에 대해 알아보겠습니다.   🪴 React Hook Form이란?React Hook Form은 리액트 폼을 위한 유연하고 효율적인 라이브러리로, 폼 상태 관리와 유효성 검사를 간소화 합니다. 기존의 Formik, Redux-Form과 같은 라이브러리들과 비교했을 때 다음과 같은 장점이 있습니다:가벼운 용량: 불필요한 리렌더링을 최소화하여 성능이 우수합니다.간결한 코드: Hooks 기반의 API로 직관적인 사용법을 제공합니다...

Next.js 프로젝트에 Tailwind CSS를 설치하는 과정에서 "npx tailwindcss init -p" 명령어를 실행했을 때 "could not determine executable to run" 오류가 발생하는 경우가 있었습니다. 이 글에서 이 문제의 원인과 해결 방법에 대해 정리해보겠습니다!    1.  문제 발생❓Next.js 프로젝트를 설정하고 Tailwind CSS를 설치한 후 초기화 명령어를 실행했을 때 다음과 같은 오류가 발생했습니다.npx tailwindcss init -pnpm error could not determine executable to runnpm error A complete log of this run can be found in: /Users/username/..

1.  문제 발생❓ params를 이용한 동적 렌더링 페이지 4개(DynamicPage 컴포넌트)를 구현했습니다. params의 pageId값을 받아 pageId값과 일치하는 데이터를 찾아 각각의 pageConfig 데이터를 초기에는 클라이언트 측에서 렌더링 하는 방식으로 구현했습니다. 하지만 전체 페이지가 클라이언트 컴포넌트로 설정되어 있어 이로 인해 초기 페이지 로딩 시 이미지 렌더링 속도가 현저히 느려지는 문제가 발생했습니다.  2.  원인 분석 🔎 Next.js에서 클라이언트 컴포넌트 "use client"로 설정된 컴포넌트는 서버에서 사전 렌더링 되지 않고 클라이언트 측에서 hydration이 완료된 후에만 완전히 렌더링됩니다. 전체 DynamicPage 컴포넌트가 클라이언트 컴포넌트였기 때문..

1.  문제 발생❓"pnpm install" 오류와 패키지 매니저 충돌 Next.js 프로젝트 작업 중 Vercel에 배포하려고 했지만 pnpm install 명령이 실패하는 문제가 발생했습니다. 로컬에서는 일반적으로 npm을 사용하고 있었으나, Vercel에서는 pnpm을 사용하려고 시도하면서 충돌이 발생한 것 입니다.  2.  원인 추론 🔎 발단: 전역 패키지 매니저 설정초기 상황저는 전역으로 Yarn 패키지 매니저를 사용하고 있었습니다.프로젝트에서 자연스럽게 Yarn을 사용하게 되었고, Corepack의 자동 설정으로 packageManager 필드가 추가되었습니다.겉보기에는 문제없는 로컬 개발 환경로컬에서 Yarn으로 프로젝트가 잘 실행되었습니다.모든 것이 정상적으로 작동하는 것처럼 보였습니다...