코드노트

현재 개인프로젝트를 리팩토링...? 아니 마이그레이션을 하고 있다. 처음에 React를 사용하여 작업을 했었지만 Next.js를 사용하여 프로젝트를 진행중이다. 이번 프로젝트를 진행하면서 Optimistic UI를 적용한 방법을 정리해보려고 한다. Optimistic UI - 사용자 요청을 서버에서 처리되기전 성공할 것을 가정하여 성공한 결과를 미리 보여주는 것이다. 사용자가 API요청을 보내게되면 서버에 요청을 하고 값을 받아서 변경된 값을 보여주어야하는데 그 값이 변하는게 오래걸린다면 사용자 경험에 있어서 좋지 않은 경험을 받게 된다. UI 시각적으로 우선 보여주고 그 뒤에 백그라운드에서 실제 작업이 실행된다. 그럼 아무곳에서나 사용해도 될까? - 아니다. 사용자에게 즉각적으로 피드백이 중요한 상황에..

이번 개인프로젝트에서 OAuth 소셜 로그인을 등록하면서 구글, 카카오, 네이버를 모두 연결하였는데 Next.js 에서 사용할 수 있는 방법을 정리해 놓으려고 한다. Next.js 13 버전을 사용하고 있기 때문에 NextAuth.js 에서 자세하게 설명이 되어있다. 사용방법은 어렵지 않다. 13버전에서 이제는 app 폴더에서 사용할 수 있다. Initialization | NextAuth.js The main entry point of NextAuth.js is the NextAuth method that you import from next-auth. It handles different types of requests, as defined in the REST API section. next-aut..

현재 진행하고 있는 사이트에서 푸터 컴포넌트를 넣었다. 모든 페이지에서 보여주지 않고 특정 페이지에서는 보여주지 않게 하고 싶었다. Next.js 13버전을 사용하고 있었고, 서버컴포넌트를 사용하려고 했지만 현재경로를 가져오려면 클라이언트 컴포넌트를 사용해야했다. 푸터는 변화가 없기 때문에 특정 페이지의 path만 얻어올 수 있으면 SSR을 사용하는게 맞다고 판단하였다. 그럼 어떻게 SSR에서 use 훅을 사용하지 않고 들고올 수 있을까? [Next 13] Server Component + Layout.tsx - Can't access the URL / Pathname · Issue #43704 · vercel/next.js Verify canary release I verified that the is..