개발 연습 블로그

서버 사이드에서의 데이터 패칭이 이뤄지는 방법은 간단하다.(강의에 따르면) 그냥 이렇게 하면 된다는 것이다. 리액트 쿼리로 뭐 이것저것 할 필요없이(GPT의 주장에 따르면 리액트 쿼리도 서버 사이드 패칭을 할 수 있다고 하지만 여기선 논외) 그냥 컴포넌트 만들 듯이 하면 된다는 것이다! 간단하긴 하지만, 나는 이미 클라이언트 사이드에서 리액트 쿼리를 쓰기 때문에 서버 사이드에서도 쓰는 방법을 찾아봐야 할 거 같다. 우선 NEXTJS의 기본 기능을 전부 파악하는 것이 먼저지만 말이다.

클라이언트 사이드에서의 데이터 패칭 클라이언트 사이드(이하 클라단)에서의 데이터 패칭은 기존 리액트에서 사용하던 방식과 거의 유사한 것 같다. 이런 식으로 하면 아주 간단하고 원시적으로 데이터 패칭이 이루어진다. 다만 여기에 로딩이나 실패 체크가 없는 것이 문제다. 그냥 기본적인 패칭이지만 나는 여기에 react-query(이하 리액트쿼리)를 사용할 것이다. 다른 블로그 글을 참조하여 app/layout 파일에 쿼리클라이언트를 심어준다. 기존 리액트에서는 index에서 하던 것을 여기서는 layout에서 한 것이다. 먼저 간단하게 axios구조를 만들어주고 그것을 받아낼 api 파일을 다시 생성한다. 여기까지 일단 수도코드 수준으로 짠 탓에 잠깐 세이브 하자마자 에러가 터졌다. 검색해보니 쿼리클라..