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..

생성형 AI 란? 생성형 인공 지능(생성형 AI)은 대화, 이야기, 이미지, 동영상, 음악 등 새로운 콘텐츠와 아이디어를 만들 수 있는 AI의 일종입니다. LLM 이란? LLM(대규모 언어 모델)은 텍스트의 이해와 분석을 중심으로 하는 고급 AI 기술입니다 Open API LLM 의 입력과 출력 입력 자연어 Context를 토큰으로 쪼개기 다음에 올 토큰 고르기 3번을 계속 반복 적절한 시점에 끊기 자연어 출력 다음에 올 토큰 고르기 토큰 배열 입베딩 벡터 배열 엄청 복잡한 연산 Context 벡터 다음 토큰의 확률 분포 다음 토큰 LLM을 학습한다는 건 입력 언어를 하나의 Context 벡터로 치환하는 방법을 학습. 토큰 별로 적절한 임베딩 벡터를 매핑한다. 엄청 복잡한 연산 과정에서 무수히 많은 가중..

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

Next.js 란? React의 SSR(Server side rendering)을 쉽게 구현할 수 있게 도와주는 간단한 프레임워크 입니다. 리액트로 개발시 검색엔진 최적화(SEO)에 굉장히 좋지 않습니다. CSR을 하면 첫 페이지에서 빈 html을 가져와서 JS파일을 해석하여 화면을 구성하기 때문에 포털검색에 거의 노출 될 일이 없습니다. 하지만 Next.js 에서는 Pre-rendering을 통해서 페이지를 미리 렌더링 하며 완성된 HTML을 가져오기 때문에 사용자와 검색 엔진 크롤러에게 바로 렌더링 된 페이지를 전달할 수 있게 됩니다. Next.js와 비슷한 프레임워크 Gatsby JAM Stack을 활용한 정적 사이트 생성기입니다. Next.js 대신 사용할 수 있는 유명한 프레임워크 입니다. Ne..