에러
-
[Next.js] Hydration failed 에러 해결 (Unhandled Runtime Error)개발공부/Next.js 2024. 2. 17. 14:37
본 글은 Next.js로 프로젝트를 진행하면서 발생했던 Hydration failed 에러를 해결한 방법에 대해 다룬 내용입니다. 목차 1. 에러 발생 2. 원인 3. 해결 방법 1. 에러 발생 소개 페이지에서 로그인 유무에 따라 버튼을 다르게 보이도록 처리하는 과정중에 아래 에러가 발생했다. 2. 원인 에러 원인을 한 줄로 간단하게 정리하자면, 서버와 클라이언트에서 렌더링된 HTML이 일치하지 않아서이다! 위의 내용을 이해하기 위해서는 Next.js가 서버 사이드 렌더링(SSR)이라는 것을 잊지 말아야 한다. SSR은 클라이언트와 서버의 렌더링 사이의 일관성을 유지하기 위해 hydrate 과정을 사용한다. hydrate 서버에서 생성된 HTML과 클라이언트 측 JS 코드 간의 일치 여부를 확인 후, 그..
-
Next.js에서 카카오 지도 사용하기개발공부/Next.js 2024. 1. 25. 20:45
본 글을 Next.js에서 카카오 지도 오픈 API를 사용법을 다룬 내용입니다. 지도 만들기 순서를 간단하게 요약하면 아래와 같다. 카카오 지도 Key 발급 Next.tsx 파일 초기 설정 지도 그리기 카카오 지도 Key 발급 순서: 카카오 지도 페이지 접속 > 카카오로 로그인 > 내 애플리케이션 선택 > 애플르케이션 추가 및 선택 > JavaScript 키 복사 (꼭 JavaScript 키 복사해두기!) Next.tsx 파일 초기 설정 _document.tsx에서 카카오 지도 API 스크립트를 로드해야 한다! (해당 파일에서 스크립트를 로드하면 모든 페이지에 해당 스크립트가 포함되어 초기 로딩 시간 개선, 필요한 경우에만 API 활성화 가능) JavaScript 키는 아까 사이트에서 복사한 값 넣어주..
-
세션 스토리지 에러 (ReferenceError: sessionStorage is not defined)개발공부/Next.js 2024. 1. 8. 14:36
export function getSession(key: string) { // Next.js는 클라이언트 사이드 렌더 전에 서버 사이드 렌더를 수행하기 때문에 window 객체의 존재 여부 확인 후 접근할 수 있도록 함. const token = typeof window !== "undefined" ? sessionStorage.getItem(key) : null; return token && token.trim() !== "" ? token : ""; } 요즘 지인들과 Next.js 사용해서 프로젝트 진행중인데, 발생했던 문제를 기록해두면 좋을 거 같아 글을 쓴다. 문제 발생 초반에는 Cookie에 토큰 정보를 저장했었는데 팀원들과 논의한 결과 보안측에서 장점이 있는 세션 스토리지(Session St..
-
HTTP 에러개발공부/기타 2024. 1. 5. 10:10
오늘은 HTTP 에러에 대해 공부하고자 한다. 요즘 지인들과 프로젝트 진행중인데 HTTP 에러의 원인이 헷갈리는 경우가 있어 한번 정리해보면 좋을 거 같아 이렇게 글을 쓴다. 다른 사람들도 같이 숙지해서 프로젝트를 원활하게 진행했으면 좋겠다! :) HTTP 에러 클라이언트와 서버 간 통신 중에 발생하는 문제를 나타낸다. 이제 종류 별로 하나씩 정리해보자! 100번대 요청이 받아들여졌거나 진행중 100 (Continue): 클라이언트가 요청 본문을 계속 전송해도 좋음을 나타냄 200번대 요청이 성공적으로 처리됨 (Success) 200 (OK): 요청이 성공적으로 처리 201 (Created): 새로운 리소스가 성공적으로 생성 204 (No Content): 요청은 성공적으로 처리되었지만 응답 본문이 없음..