Next.js

🏷️들어가며 해당 글은 "next": "14.2.6" 버전을 바탕으로 한 프로젝트입니다. SSE는 HTTP 표준 기술 중 하나이므로 특정 버전이 존재하지 않습니다.   ❓SSE를 선택한 이유는?우리FIS아카데미에서 진행한 최총 프로젝트에서 우리의 핵심 기능은 '정산'이었다. 이때 신속한 정산을 위해 ‘정산 요청’, ‘정산 시작’, ‘정산 완료’ 등의 정보를 여행원 간 실시간으로 공유할 필요성을 느꼈고 우리는 실시간으로 서비스를 구현할 기술을 찾고 있다.   SSE(Server-Sent Events) VS Polling VS WebSocket 방식 연결  방식 데이터 흐름 실시간성 서버 부하 브라우저 지원 사용 사례 SSE (Server-Sent Events)단방향 (서버 → 클라이언트)서버에..

📌스크롤 유도 가이드 구현 "use client"; import { useState, useEffect, useRef } from "react"; import gsap from "gsap"; export default function page() { const [isSpecialCase, setIsSpecialCase] = useState(false); const handleScrollGuideClick = () => { if (isSpecialCase) { window.scrollTo({ top: 0, behavior: "smooth", //스크롤 부드럽게 }); } }; useEffect(() => { const handleScroll = () => { const isScrollAtBottom = w..

📌Next.js 란 ? React는 라이브러리이고, Next.js는 리액트의 프레임워크이다. 라이브러리와 프레임워크의 주요 차이점은 "Inversion of Control"(통제의 역전)이다. 라이브러리에서 메서드를 호출하면 사용자가 제어할 수 있다. 그러나 프레임워크에서는 제어가 역전되어 프레임워크가 사용자를 호출한다. 라이브러리 - 사용자가 파일 이름이나 구조 등을 정하고, 모든 결정을 내림 - react 프레임워크 - 파일 이름이나 구조 등을 정해진 규칙에 따라 만들고 따름 - next.js 라이브러리는 “어플리케이션을 만들 때 필요한 자원(기능: 함수)의 모임”이고, 프레임워크는 “코드를 작성하는 기본적인 틀을 제공해서 보다 효율적으로 어플리케이션을 만들 수 있도록 하는 소프트웨어 환경”이다. 즉..