전체 글15 [NextJS] 따라해보기 CSR의 여러가지 한계를 개선하기 위해서 최근 SSR 방식이 다시 대두되고 있는 듯 하다. 최근 트렌드인 NextJS를 살펴보다보니 가이드가 잘 되어 있어 한번 보려고 한다. NextJS는 무조건적인 SSR이라기보단 하이브리드 방식이라고 볼 수 있기떄문에,효율적으로 활용하는게 필요하다. https://nextjs.org/learn/dashboard-app App Router | Next.jsLearn how to build a full-stack web application with the free, Next.js Foundations course.nextjs.org 해당 가이드에서는 NextJS를 활용해 요소요소에서 SSR을 써보면서 배울 수 있게 되어있다. 총 16장으로 되어있고 이를 완료하면적어도 .. 2025. 7. 2. CSR & SSR 렌더링 방식 CSR (Client Side Rendering)CSR은 브라우저(클라이언트)에서 DOM을 동적으로 조작하여 화면을 렌더링하는 방식이다. 서버에 요청이 오면, 정적 리소스를 먼저 다운로드한다. 그 후, 실제 콘텐츠는 브라우저에서 스크립트가 실행되면서 생성된다. 주로 React, Vue.js, Angular 같은 SPA 프레임워크에서 사용하는 방식이다. 사용자와의 상호작용이 많을 때 유용하게 사용된다.SSR (Server Side Rendering)SSR은 서버에서 페이지를 완전히 생성해서 브라우저로 전달하는 방식이다. 브라우저는 서버로부터 이미 렌더링된 페이지를 받아서 바로 화면에 표시한다. 전통적인 웹 개발 방식이며, 주로 Spring MVC, Express, Django 같은 MPA 프레임워크에서 사.. 2025. 6. 24. SPA & MPA 프레임워크 SPA(Single Page Application) 프레임워크SPA는 하나의 HTML 페이지로 전체 웹 애플리케이션을 구성하는 방식이다.페이지 이동 시 전체 페이지를 새로 불러오지 않고, 필요한 부분만 동적으로 업데이트한다주요 SPA 프레임워크에는 React, Vue.js, Angular 등이 있다. 주로 사용자 상호작용이 많은 App이나, 실시간 업데이트가 많이 필요한 서비스에서 사용한다. MPA (Multi Page Application) 프레임워크MPA는 각 URL마다 서버에서 완전한 HTML 페이지를 생성해서 전달하는 전통적인 프레임워크이다.주요 MPA 프레임워크는 Spring MVC, Express, Django 등이 있다. 주로 콘텐츠 중심의 웹사이트나, 간단하게 정보 제공을 우선으로 하는 웹.. 2025. 6. 12. [React] 실시간 경과시간 추적 Hook 0. 전체 소스 코드import dayjs, { Dayjs } from 'dayjs';import { useState, useEffect, useCallback } from 'react';const useTimeDiff = (delay: number) => { const [elapsedTime, setElapsedTime] = useState(0); const [isActive, setIsActive] = useState(false); const [startDtm, setStartDtm] = useState(undefined); const startTimeDiff = useCallback(() => { setIsActive(true); }, []); const stopTimeDiff =.. 2025. 6. 12. 이전 1 2 3 4 다음