nextjs

Apollo Client는 클라이언트 환경에서 GraphQL을 사용하여 서버와 데이터를 효율적으로 주고받을 수 있도록 돕는 강력한 라이브러리이다. 주로 React를 비롯한 다양한 프레임워크와 잘 통합되며, 클라이언트에서 발생하는 요청을 효율적으로 관리하고, 데이터 상태를 예측 가능하게 유지하는 데 도움을 준다.Apollo Client가 제공하는 useQuery와 useMutation은 React Query의 그것과 유사하게 동작한다. 중복된 요청을 캐싱하여 네트워크 사용을 최소화하고, 데이터의 일관성을 유지하는 데 도움을 준다. 서버 상태를 관리하기 위한 이 두 도구는 각자 가진 장점이 달라서, 일반적인 REST API 요청의 경우에는 React Query를 쓰고, GraphQL 요청의 경우에는 Apol..

내가 쓸 목적으로 만든 독후감 기록 및 공유 서비스가 하나 있다. 이름은 onef인데, 홍보에 그렇게 열중하지 않았더니 쓰는 사람이 나랑 내 후배들 정도 뿐이다. 하지만 상관 없다. 구현해보고 싶은 기능을 부담 없이 해볼 수 있는 테스트베드로서의 기능은 충분히 만족하고 있으니까. 이 서비스의 프론트와 백엔드는 모두 내가 구현했는데, 각각 NextJS와 NestJS를 사용했다. 데이터베이스는 postgreSQL을 썼는데, SQL을 모르는 관계로 ORM인 Prisma를 사용했다. 재귀적 관계 테이블댓글 기능을 추가하는 건 간단하다. 그런데 대댓글은 어떻게 구현해야 할까. 이에 대해 찾아보다가 RDB에는 재귀적 관계라는 게 있다는 걸 알게되었다. 풀어서 쓰면 자기 자신을 참조하는 모델 연결이라고 해야겠다. P..

예전에 멘토님께서 이런 이야기를 해주신 적이 있다. "각 라이브러리가 어떻게 라우팅을 구현하고 있는지를 외우고 있는 건 하나도 중요하지 않다. 정말 중요한 건 이들 라이브러리가 해결하고자 하는 어떤 공통된 문제가 존재한다는 것이며, 따라서 라우팅을 지원하는 라이브러리가 해결하고자 하는 문제가 무엇인지를 알아야 한다. 이걸 알고 나면 각각의 라이브러리가 이 문제를 어떻게 해결하는 지는 그냥 공식 문서 찾아보면 된다." 이 말은 비단 라우팅 뿐 아니라 '라이브러리' 전체에 동일하게 적용할 수 있는 격언이라 생각한다. NextJS는 페이지 라우터와 앱 라우터를 지원하고, React 수준에서는 오래전부터 React-Router를 사용해 CSR 라우팅을 처리해왔다. 이들은 모두 라우팅 문제 해결이라는 공통된 목적..

requestAnimationFrame는 브라우저에서 애니메이션을 효율적으로 실행하기 위해 제공하는 메서드다. 이는 rAF 메서드가 window 객체에 속해있다는 의미이며, node 환경에서는 접근할 수 없다는 뜻이기도 하다. rAF는 다음 리페인트 전에 지정된 콜백 함수를 호출해 애니메이션이 화면 재생 빈도에 맞춰 부드럽게 실행될 수 있도록 한다. 모니터가 60hz라면 초당 60번, 144hz라면 초당 144번 호출된다. 또한, rAF는 setTimeout보다 성능이 뛰어나며, 비활성 탭에서는 호출이 중지되어 리소스를 절약할 수 있다. MDN의 예시 코드만 봐도 바닐라 JS에서는 재귀함수의 형태로 requestAnimationFrame를 사용하는 듯하다. 그러나 리액트에서는 몇 가지 이유로 인해 다른 ..

리액트로 CSR 페이지를 만들다가 NextJs로 넘어오면, 마주했을 때 가장 당황스러운 개념 중 하나가 바로 Hydration Error(이하 HE)일 것이다. 일반적으로 이 HE를 설명할 때 "서버에서 랜더링 된 HTML과 클라이언트에서 React가 다시 렌더링할 때의 HTML이 다를 경우" 발생한다는 식으로 이야기하곤 한다.그런데 여기서 말하는 '다를 경우'라는 게 구체적으로 어떻게 다른 걸 의미하는지 오랫동안 제대로 이해하지 못했다. 정확히는 이해할 생각조차 하지 않았다고 하는 게 맞겠다. 서버와 클라이언트가 동일하면 HE는 발생하지 않을 거고, 그 외에는 크게 중요하지 않은 것처럼 느껴졌다. 이번 주에 나는 엑세스토큰과 리프레시토큰을 어떻게 관리하고, 어떻게 사용하는 게 best practice일..