
반복 프로젝트에는 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를 사용하여 클라이언트에서 접근을 막고 액세스 토큰은 로컬스토리지에 저장하도록하여