sm-English-Coding 님의 블로그

안녕하세요! sm-English-Coding입니다. 지난번 Flutter 에러 해결기에 이어, 오늘은 웹 개발의 대세인 Next.js를 다루며 한 번쯤은 꼭 마주치게 되는 'Hydration Error'에 대해 깊이 있게 다뤄보려 합니다.개인 블로그를 Next.js로 고도화하거나 실무에서 SSR(Server Side Rendering)을 다루다 보면, 콘솔창에 뜨는 노란색 경고창과 함께 "Text content did not match server-rendered HTML"이라는 메시지를 보게 될 때가 있습니다. 저 역시 이 에러 때문에 한참을 고생했던 기억이 나네요. ㅋㅋㅋ1. Hydration 에러, 도대체 왜 생기는 걸까?Next.js는 서버에서 먼저 HTML을 만들어서 보내주고(Pre-render..

1. 에러 메시지는 '공격'이 아니라 '힌트'입니다Next.js나 React를 공부하다 보면 터미널과 브라우저를 가득 채우는 빨간 글씨에 당황하기 마련입니다. 하지만 에러 메시지는 우리를 괴롭히려는 게 아니라, 어디가 아픈지 알려주는 친절한 가이드입니다. 파파고에 문장 전체를 넣기 전에, 이 핵심 키워드 4가지만 먼저 확인해 보세요.2. 가장 자주 만나는 4대 핵심 영어 표현Expected A, but received B (A를 기대했지만, B가 들어왔다)의미: "여기엔 A가 있어야 하는데, 왜 B를 넣었니?"라는 뜻입니다.상황: 주로 데이터 타입이 맞지 않을 때 발생합니다. "숫자가 와야 하는데(number), 문자열(string)이 왔네?"라고 이해하면 해결의 실마리가 보입니다.is not defin..

1️⃣ fetch란?브라우저 기본 내장 API별도 설치 필요 없음Promise 기반 fetch("/api/data") .then(res => res.json()) .then(data => console.log(data)); 단점에러 처리 불편자동 JSON 변환 없음인터셉터 없음2️⃣ axios란?외부 라이브러리자동 JSON 변환요청/응답 인터셉터 지원타임아웃 설정 쉬움 axios.get("/api/data") .then(res => console.log(res.data)) 3️⃣ 실무에서 axios 많이 쓰는 이유✔️ 인터셉터로 JWT 토큰 자동 주입 가능✔️ 에러 핸들링 통일 가능✔️ 코드가 더 깔끔✔️ 유지보수 편함👉 특히 너처럼 JWT 인증 구조 구현할 때는 axios가 편함🔥 한 줄 정리항목f..