느므느므 당황스러운 일이 발생했다.
팀 프로젝트를 진행하던 중, 캘린더를 이용하는 부분이 있어서
react-calendar를 사용했고! 사용법을 잘 읽어보고 열심히 작성했다.
"use client"
import { useRef, useState } from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';
export default function Writing() {
const [startValue, onStartChange] = useState<Value>(new Date());
const [endValue, onEndChange] = useState<Value>(new Date());
return (
<Calendar onChange={onStartChange} value={startValue} />
<Calendar onChange={onEndChange} value={endValue} />
)
}만난 에러들.
그런데.. 에러가 하나도 아닌 여러개가...
두둥 - 탁 !
절망 😩
에러 1
Text content did not match. Sever: "March 2024" Client: "2024년 03월"
이 에러는 딱 보자마자 서버와 클라이언트의 값이 서로 달라서 뜨는 에러구나라고 생각했다.
번역기 돌려보니... 역시나...
에러 2
An error occurred during hydration.
The server HTML was replaced with client content in <#document>
이 에러는 보고 hydration이 뭔가 문제가 생긴거같은데 ?
일단 번역기 돌려보자.
음.. 클라이언트로 컨텐츠로 대체되었다는 이런말이군.
에러 3
Text Content does not match server-rendered HTML.
에러 1번이랑 비슷한 내용같은데 ?
에러 4
There was an error while hydration. Because the error happended outside of a Suspense boundary, the entire root will seitch to client rendering.
이 네가지의 에러들의 공통점은
일단 어느 부분이 잘 못되어서 서버렌더링에서 클라이언트렌더링으로 변경이 되었다는 말이었다.
에러는 역시 구글링..
뭔가 나와 같은 에러를 만난 사람들이 있을거같아서 열심히 구글링 했다.
같은 에러를 찾은 블로그를 드디어 만나게 되었다.
이 분의 블로그에서 에러가 일어나게 되고, 어떻게 흘러가는지에 대해 적어놓으셔서 난 그 글을 보고 이해가 되었다.
아하.. 그래서 결론은 저분과 나의 마음이 같을 거란 생각이든다.
굉장히 허무하다.
그래서 찾은 해결방법
<Calendar locale='ko' onChange={onStartChange} value={startValue} />
그렇게 에러는 감쪽같이 사라졌다.
증말 밉네 ..
공식문서에 잘 나와있었는데 그냥 훅 읽고 넘어가서 이건 전혀 생각지도 못한 부분이었던거 같다.
여튼간에 공식문서를 자세히 읽어야된다는 점.
이제 빨리 마크업 마무리 하자 !
