Programming/Next (2) 썸네일형 리스트형 Next.js(typescript) 무한 스크롤 구현 + RestAPI 1. Next.js 프로젝트 생성npx create-next-app@latest infinite-scroll --typescriptcd infinite-scrollnpm install 2. 무한 스크롤 컴포넌트 작성components/InfiniteScroll.tsx 파일 생성, 외부 API를 호출하도록 수정// components/InfiniteScroll.tsximport { useState, useEffect, useRef, useCallback } from 'react';// 외부 API에서 데이터를 가져오는 비동기 함수const fetchMoreData = async (page: number, limit: number) => {// https://jsonplaceholder.typicode.co.. Next.js(typescript) + Socket.IO 실시간 채팅 구현(simple ver.) 실시간 채팅 애플리케이션 만들기1. 프로젝트 설정Next.js 프로젝트를 생성하고 필요한 패키지 설치npx create-next-app@latest realtime-chat --typescriptcd realtime-chatnpm install socket.io socket.io-client 2. 프로젝트 구조realtime-chat/├── node_modules/├── src/│ ├── pages/│ │ ├── api/│ │ │ └── socket.ts│ │ ├── chat.tsx│ │ └── _app.tsx│ ├── styles/│ │ └── globals.css│ └── types/│ └── socket.ts├── package.json├.. 이전 1 다음