Web/Next.js4 [Next.js] layout에서 dynamic 사용하기 (13 버전) 현재 웹소켓을 활용한 실시간 게임 웹 서비스를 만들고 있다. 사용자가 웹소켓에 연결한 이후에 새로고침을 하거나 페이지를 떠날 때, 서버 측에 이 사용자의 토큰을 보내 퇴장을 알려야 한다. 서버에 보내 주어야 하는 내용은 다음과 같다. 여기서 저 roomId는 redux의 guestSlice에서 관리되고 있다! (useSelector를 사용해야함) 사용자가 어느 페이지에 있든 상관없이 적용되어야 하므로 layout.tsx에 작성했다. import './globals.css'; import { Inter } from 'next/font/google'; import { Providers } from '@/store/provider'; import { SocketProvider } from '../context.. 2023. 5. 12. [Next.js] Server Component & Client Component [공식문서] Rendering: Fundamentals | Next.js Learn the fundamentals of rendering in React and Next.js. beta.nextjs.org 13 버전부터는 컴포넌트 단위(server/client)로 렌더링 방식을 규정한다 Server Component : 서버에서 빌드가 될 때 실행이 되는 컴포넌트 app 폴더에 있는 모든 컴포넌트는 기본적으로 server 컴포넌트이다 서버 상에서는 '안녕'이라는 로그가 보이지만, 브라우저의 콘솔에는 아무것도 찍히지 않는 것을 볼 수 있다. 외글얼까?.. 1. 서버 컴포넌트는 서버에서 실행이 된다. 2. 코드는 서버에서 실행이되어서 pre-rendering 된 HTML 형태로 브라우저에게 전달된다. => .. 2023. 4. 26. [Next.js] 개발환경 설정 기본적으로 리액트 개발 환경과 동일하다 - 코드 에디터 - nodeJS - GIT nvm으로 node version 업데이트하기 더보기 nvm 설치 https://github.com/coreybutler/nvm-windows/releases Releases · coreybutler/nvm-windows A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows github.com node 버전 목록 확인하기 원하는 node 버전 설치하기 사용하고자 하는 node 선택하기 [공식문서] Next.js by Vercel - The React Framework for the Web Used.. 2023. 4. 25. [Next.js] 왜 Next.js를 쓸까? Next.js? 웹 어플리케이션을 만들기 위해서 사용할 수 있는 React Framework Libraries => 특정한 문제들을 해결하기 위한 tool을 가져다 쓸 수 있음 Framework => 큰 단위의 전체적인 솔루션(골격)을 제공함 ex) Routing, UI, HTTP Clients, 상태 관리 => 리액트로 웹앱을 개발하는데 리액트 만으로는 힘든 많은 것들을 가능하게 해줌 Next.js의 6가지 원칙 - 복잡한 설정을 하지 않아도 - 자바스크립트를 사용해서 full stack 가능 - 자동으로 code split & sever rendering - 데이터를 어떻게 패칭할 것인지 설정 가능 - 결과를 미리미리 예측 - 손쉬운 배포 Web App에서 쓸 수 있는 4가지 렌더링 방식 CSR (C.. 2023. 4. 25. 이전 1 다음
