Banbok

반복 프로젝트에는 Next를 적용해서 기술 역량을 확장해 나가는 중입니다.하지만 제대로 Next를 활용하지 못했고SEO 개선 경험은 React 프로젝트를 통해 진행해본 적은 있지만 Next는 이번이 처음이기 때문에 SSR만 적용하면 SEO가 바로 적용되는 줄 알았습니다

이 에러는 Next.js 하이드레이션 불일치 문제입니다. 서버에서 렌더링된 HTML과 클라이언트에서 렌더링된 HTML이 달라서 발생합니다.에러 로그를 보면 핵심 문제는:이 속성이 클라이언트에서만 추가되고 있다는 것입니다.그래서 이를 해결하기 위해서1\. 항상 시크릿 모

Next를 통해 app/api/scrape/route.ts에서 볼 수 있듯이, 별도의 백엔드 서버 없이도 API 라우트를 구현했습니다.보통 크롤링은 백엔드 서버에서 구현을 하지만 시간 상의 이유를 클라이언트 단에서 시도를 해봤습니다.

Hydration이란?Next.js나 SSR 환경에서는 초기 HTML만 렌더링되고, 그 다음 클라이언트가 자바스크립트를 통해 앱의 상태를 '살려내는' 과정이 필요하여 마른 HTML 뼈대에 JavaScript라는 수분을 공급해서 앱을 "활성화"시킵니다.프로필 페이지에서

포모로도 타이머를 만들다가 useCallback 함수를 최적화를 위한 작업 내용을 기록할려고한다.useCallback()은 함수를 최초 렌더링 때 한 번만 생성되고, 컴포넌트가 리렌더링될 때마다 함수를 새로 만들지 않고, 의존성 배열에 있는 값이 바뀔 때만 함수를 새로

로그아웃 시 api를 통해 쿠키 값은 제대로 삭제되었지만 localStorage.removeItem("auth-storage")는 삭제 된 후 다시 생성되는 오류가 발생하였습니다.이는 Zustand의 persist 미들웨어가 상태를 다시 저장하려고 시도하기 때문에 문제

웹 애플리케이션에서 음성 인식 기능을 구현하면 키보드를 사용하지 못하는 사용자의 경험을 향상시킬 수 있습니다.Web Speech API는 브라우저에서 음성 인식과 음성 합성을 가능하게 하는 웹 표준 API 입니다. 해당 API를 사용하면 사용자의 음성을 텍스트로 변환(

예전 백엔드 친구와 협업 개발 간에 보안상의 문제로 SameSite : none, secure = true, Http-only 다양한 설정을 하고 민감한 리프레시 토큰은 set Cookie를 사용하여 클라이언트에서 접근을 막고 액세스 토큰은 로컬스토리지에 저장하도록하여