전체 글105 [NextJS - ERROR-LOG] 카카오지도 초기 렌더링 이슈 이슈 페이지 초기 렌더링 이후 콘서트 디테일 페이지 접근했을 때 카카오지도 렌더링 안되는 이슈 원인 개발자 도구에서 카카오지도부분 확인했을 때 스크립트 파일이 로드가 안됨을 확인 export default function KakaoMap({ x, y }: { x: string; y: string }) { const API_KEY = process.env.NEXT_PUBLIC_KAKAO_API_KEY; const KAKAO_SDK_URL = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${API_KEY}&autoload=false`; console.log(x); return (x && y) ? ( ) : null; } 기존 코드는 카카오 지도를 렌더링하는 컴포넌트에 스크립트 코드.. front/Error log 2023. 7. 6. 더보기 ›› [NextJS] SWR - 프로젝트에 네트워크 상태관리 적용해보기 개요 요즘 콘서트 일정 플랫폼 서비스를 NextJS로 개발하면서 SWR을 적용해보고있다. NextJS랑 SWR 모두 Versel에서 개발을 하였고, 호환성이 좋다고 들어서 네트워크 상태관리를 리액트쿼리가 아닌 SWR을 적용해서 개발을 진행하고 있지만 실제로 SWR이 어떤값을 반환하고 어떤식으로 동작하는지는 잘 모른채로 개발하고 있었다. 오늘은 SWR이 무엇이고 어떻게 사용하는지 구체적인 사용법을 알아보자. Optimistic UI란? Optimistic UI란 특정 요청이 성공 할 것이란 가정을 하고 먼저 그 요청의 결과를 보여주는 방식의 UI이다. 이번에 진행하고 있는 프로젝트에서 예를 들어보자. 예시 - 북마크 1. 사용자가 북마크 아이콘(빈하트)을 누른다. 2. 서버에 북마크 등록 요청을 보낸다. .. front/NextJS 2023. 7. 4. 더보기 ›› [NextJS] error - Hydration failed because the initial UI does not match what was rendered on the server. NextJS 개발 도중 어느 순간 다음과 같은 경고 문구가 생겼다. Hydrate란? Hydrate는 Server Side에서 렌더링 된 정적 페이지와 번들링된 JS 파일을 클라이언트로 보낸 뒤, 클라이언트 단에서 HTML 코드와 React JS코드를 서로 매칭 시키는 과정을 말함 NextJS 공식문서에서 찾아보니 내 경우는 HTML 규칙을 잘 못지킨 초보적인 실수였다. https://nextjs.org/docs/messages/react-hydration-error react-hydration-error | Next.js Text content does not match server-rendered HTML While rendering your application, there was a differe.. front/Error log 2023. 6. 11. 더보기 ›› [React] key prop - 리액트에서는 반복되는 엘리먼트를 추가할 때 'key' prop을 왜 필요할까? - 그럼 key는 어떤 값을 넣어야 하는걸까? map함수 등을 사용하여 반복되는 엘리먼트를 추가하였을 때 key prop을 추가하지 않아 다음과 같은 에러가 뜨는 것을 한번씩은 봤을 것이다. 그럼 key prop은 왜 필요한걸까? 리액트 공식문서에는 'key' 가 필요한 이유를 다음과 같이 설명하고 있다. Keys tell React which array item each component corresponds to, so that it can match them up later. This becomes important if your array items can move (e.g. due to sorting), get i.. front/React 2023. 5. 14. 더보기 ›› [React] React-Query 사용법 예제코드 리액트 쿼리 리액트 쿼리는 비동기 네트워크 상태관리 라이브러리이다. 리액트 쿼리는 React 컴포넌트에서 데이터를 가져오고 관리하기 위한 간단하고 직관적인 방법을 제공한다. 이를 통해 컴포넌트가 더욱 유연하고 재사용 가능하며, 다양한 데이터 소스에서 데이터를 쉽게 가져올 수 있다. 리액트 쿼리는 대표적으로 useQuery와 useMutation과 같은 React Hooks를 사용하여 작성된다. 이를 통해 데이터 로딩과 변경을 처리할 수 있다. useQuery는 GraphQL, 또는 REST API와 같은 데이터 소스에서 데이터를 가져오는데 사용되며 useMutation은 데이터를 업데이트하거나 삭제하는 데 사용된다. 리액트 쿼리는 캐싱을 사용하여 데이터를 저장하고, 새로운 데이터를 로드하기 전에 캐시에서.. front/React 2023. 4. 27. 더보기 ›› 반응형 이전 1 2 3 4 5 ··· 21 다음
