보통 이 에러는 서버에서 pre-rendering 된 html과 브라우저에 처음 렌더링 되는 html이 다를 때 발생한다. 하이드레이션이란건 간단하게 nextJS가 pre-rendering한 html에 js코드로 기능을 적셔서 완성하는 것을 말한다. 그래서 순서는 pre-rendering한 html -> js코드 로드 -> hydration => 사용자가 사용할 수 있는 화면 완성 이다. 이 때 pre-rendering한 html의 DOM구조가 hydration중에 발생하는 html DOM구조와 달라서, 이 둘의 구조가 불일치하여 더 이상 하이드레이션을 진행할 수 없다는 에러인데, 나 같은 경우는 이 에러가 전혀 상관 없는 상황에서 발생했다. 그리고 원인은 어이없게도 p태그 안에 p태그 또는 Link컴포..

MIME타입이란? 서버에 요청을 보냈을 때 개발자 도구에서 아래와 같은 Response Header를 본 적이 있을 것이다. 위 이미지에서 content-type: application/json 이 부분이 MIME타입이 사용 된 부분으로, application/json이 MIME타입에 해당한다. MIME타입은 이 외에도 다양한 타입이 존재하므로, 여기를 참조! MIME타입을 사용하면 브라우저가 웹 서버에서 HTTP를 통해 보낸 파일의 파일 유형을 인식할 수 있다. 이를 통해 브라우저는 서버가 보내준 파일을 내려받았을 때 해야 할 기본 동작이 무엇인지를 결정할 수 있게 된다. 위의 예시를 보면, 서버가 클라이언트 요청에 대한 응답으로 보내 준 파일의 유형이 json타입이라는 뜻이다. 클라이언트는 이것을 보..

심플 버전 보러 가기 [React] 클라이언트에서 pagination 구현하기 1. (심플버전) 심플한 버전과 복잡한 버전 2 가지 페이지네이션 중 심플한 버전을 구현해보자. 1. 클라이언트에서 페이지네이션 구현하는 경우는 언제인가? 백엔드에서 부득이하게 pagination 기능을 제공할 수 kasts91.tistory.com 실제로 유튜브 연동을 구현하면서 닥친 문제를 해결하기 위해 구현한 기능이므로, youtube 데이터를 예시로 설명을 작성했다. 하루 10,000unit만 주어지고, youtube api를 한 번 호출할 때마다 1unit이 감소한다. (unit을 다 쓰면 api호출이 불가능해진다.) 말이 10,000unit이지 테스트 할 때 하루만에도 다 써버리는 적은 양이므로 최대한 api호출을 ..

복잡버전 보러가기 심플한 버전과 복잡한 버전 2 가지 페이지네이션 중 심플한 버전을 구현해보자. 1. 클라이언트에서 페이지네이션 구현하는 경우는 언제인가? 백엔드에서 부득이하게 pagination 기능을 제공할 수 없을 때 사용할 수 있다. 백엔드에서 주는 데이터가 방대하지 않아서 클라에서 전체 데이터를 한번에 받음으로써 api호출 양을 줄이고 싶을 때. 써드파티 api를 사용하는데, 하루/한달 단위 api호출 양(unit)이 한정적일 경우, 최대한 api호출 횟수를 줄이기 위해 사용할 수 있다. 예를 들어 youtube api 호출을 하루에 100번만 가능하다. 유저에게 pagination기능을 제공하고 싶은데 이전페이지, 다음페이지 마다 api호출이 가는걸 최대한 막고 싶다. 나는 한 페이지당 5개의..

문제가 발생한 환경 next.js 사용 react 18 version react-query 사용 하나의 페이지에서 탭으로 여러개의 컴포넌트를 왔다갔다 하며 query가 실행될 때 에러 발생. 에러메세지 - A component suspended while responding to syncronous input. This will cuase...어쩌구 컴포넌트 모양과 에러 내용 return ( {menu === 'MYPROFILE' ? ( ) : menu === 'MYORDER' ? ( ) : null )} ) 대략 이렇게 생긴 tap메뉴가 있는 화면에서, 현재 랜딩 된 tap 컴포넌트에서 다른 tap을 눌러 다른 컴포넌트를 렌더하면 위의 에러가 발생했다. 원인 : useQuery에서 suspense를 t..

Web Accessiblity Initiative-Accessible Rich Internet Applications 신체적, 환경적 조건에 차별되지 않고 동등하게 웹을 이용할 수 있도록 도와주는 기술인 WAI-ARIA에 대해 알아보자. 1. 용어 설명 - WAI : W3C에서 웹 접근성을 담당하는 기관 - ARIA : RIA환경의 웹 접근성에 대한 표준 기술 규격 - RIA : 동적환경의 웹에서 수준 높은 UX를 제공하는 웹앱 2. 웹 접근성 높이기 1. 의미있는 html 시맨틱 태그를 사용하는 것은 웹 접근성을 높이기 좋은 방법이다. 2. role attributes 사용하기 : 상황에 따라 알맞는 의미의 html 시맨틱 태그를 찾을 수 없을 때 쓸 수 있는 ARIA 규격. role 속성은 태그의 겉..