Next.js / React / JavaScript / TypeScript / CS / 자료구조 빨간색 - 자주 질문받음주황색 - 2~3회 초록색 - 1회 1) Next.js - App router https://nextjs.org/docs/app/getting-started/server-and-client-components#how-do-server-and-client-components-work-in-nextjs Getting Started: Server and Client Components | Next.jsLearn how you can use React Server and Client Components to render parts of your application on the serve..

Package Manager : 패키지 매니저는 패키지를 설치, 업데이트, 수정, 삭제하는 작업을 편리하고 안전하게 수행하기 위해 사용되는 툴입니다.   패키지는 코드의 배포를 위해 사용되는 코드의 묶음으로 다음 3가지 정보를 가지고 있는 코드의 배포 단위입니다.컴파일한 소프트웨어의 binary환경 설정 configuration에 관련된 정보의존 dependency 에 관련된 정보 JavaScript의 package manager로는 대표적으로 npm, pnpm, yarn이 있습니다.Yarn Plug'n'Play는 Yarn의 최신 releases의 기본 설치 전략입니다.기존의 node_modules 설치 또는 pnpm 스타일의 symlink-based 기반 방식등으로 대체할 수도 있지만,많은 개선 사항으..

Supabase는 오픈 소스 서비스로, Firebase의 대안으로 사용할 수 있는 serverless DB 솔루션 입니다.PostgreSQL을 DB engine으로 사용하고 있어 복잡한 쿼리 작업도 용이하게 사용할 수 있습니다.   주요 기능실시간 데이터베이스 (Real-time Database)PostgreSQL의 데이터 변경 사항(삽입, 수정, 삭제 등)을 실시간으로 감지하여 클라이언트에 전달합니다.실시간 기능은 웹소켓(WebSocket)을 통해 동작합니다.인증(Authentication)사용자 등록, 로그인, 소셜 로그인(Google, Facebook 등) 같은 인증 기능을 지원합니다.Role-Based Access Control(RBAC) 및 JWT 토큰 기반 인증 제공.스토리지(Storage)파..

useOptimistic (state, updateFn): 사용자가 폼을 제출할 때(네트워크 요청과 같은 백그라운드 작업이 완료되기 전),  서버의 응답을 기다리는 대신 UI를 기대하는 결과로 즉시 업데이트하여 유저에게 보여주고 싶을 때 사용한다.   const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);  useOptimistic은 비동기 작업이 진행 중일 때 다른 상태를 보여줄 수 있게 해주는 React hook입니다.현재 상태와 작업의 입력을 취하는 함수를 제공하고, 작업이 대기 중일 때 사용할 상태를 반환합니다. 이 상태는 “낙관적” 상태라고 불리는데, 실제로 작업을 완료하는 데 시간이 걸리더라도사용자에게 즉시 작업의 결..