next.js

병렬라우팅 이란?NextJS 는 병렬라우팅 이라는 것을 지원하는데 아래 사진과 같이 독립적인 컴포넌트를 서버에서 해석하여 클라이언트로 내려주는 형태이다.동시에 하나 이상의 페이지를 렌더링할 수 있게 해주며 대시보드나 소셜 사이트 피드와 같은 동적인 앱 섹션에서 병렬라우팅을 사용하여 복잡한 라우팅 패턴을 구현 할 수 있다. 독립적으로 스트리밍되는 각 경로에 대해서 오류, 로딩 상태를 정의할 수 있다. 또한 인증 상태와 같은 특정 조건부에 따라서 슬롯을 렌더링할 수 있도록 지원한다. 이를 통해서 동일한 URL 이지만 완전히 분리된 코드를 사용할 수 있게 지원해준다.  프로젝트 설명현 프로젝트에서는 모달창을 띄울 때와 서로 독립적인 데이터를 가진 레이아웃을 렌더링할 때 사용한다.Client-component ..

socket.io, stomp, sockJS 는 실시간 통신을 구현할 수 있는 라이브러리 이다. STOMP는 주로 메시지 브로커를 통한 메시징 패턴에 적합하며, Socket.IO는 서버와 클라이언트 간의 직접적인 실시간 통신에 최적화 되어 있다. socket.io 를 사용하기 위해서는 socket 서버와 클라이언트가 필요하다. NextJS 에서는 node.js 처럼 api 서버를 띄울 수 있기에 socket 서버를 만들어 client와 연결을 해보려고 한다. Next.JS socket.io 서버 구동Next.JS app routes 에서는 Socket.io 구동xNext.JS Pages Routes 에서 Socket.io 구동o// pages/api/socket/io.tsimport { ServerToC..

개요블로그를 직접 만들어보고 싶기도 하고 Next.js 에 대한 이해도를 높이기 위해 블로그를 만들어보며 이해하였습니다.기능 구현블로그 글 생성, 보기 기능 구현카테고리 글 분류태그 글 분류챗봇 구현chatGPT 에 블로그 글 목록을 학습시킨 후 질문에 맞는 글 페이지와 설명 보여주기그 외의 질문도 가능블로그 sitemap.xml 생성 과 robots.txt 생성, feed.xml 생성 (SEO)성능 최적화 시키기 (Light house)왼쪽은 App Router로 최적화 진행 후오른쪽은 Pages Router 최적화 하기 전 성능최적화 라이트 하우스 지표   블로그 글 View, Editor 구현@uiw/react-md-editor 와 @uiw/react..

개요!! 엘리스 SW 부트캠프를 진행중하면서 스터디로 Next.js 풀스택 을 하고 있는데 너무 매력적인 프레임워크라서 공부 정리할겸 올립니다!! Next.js 는 단순히 SSR 만 제공하는 프레임워크는 아닙니다. 그 외에도 훌륭한 컴포넌트와 훅을 지원하며 성능이 뛰어난 동적 웹 사이트를 만들 수 있으며 최근에는 최적화에 대해 굉장히 신경쓰고 있습니다. 라우팅 시스템 원래 React 에서는 react-Router 라는 라우팅 라이브러리를 사용하여 외부 라이브러리를 설치를 하여 진행했었습니다. 모든 페이지가 클라이언트에서만 만들어지고 렌더링 되는 것입니다. Next.js는 다른 방법을 사용합니다. 바로 파일시스템 기반 페이지와 라우팅입니다. pages/ 디렉터리 안의 모든 파일은 곧 애플리케이션의 페이지와..