Frontend24 SSR, SSG, ISR CSR이 가진 단점을 극복하기 위해서 SSR 개념을 부분적으로 적용하고 싶을 수 있다.SPA 방식인 React에서 Next.js 프레임워크를 사용하여 SSR을 적용하는 방법에 대해 알아보고 Next.js에서 사용되는 렌더링 방식인 SSR, SSG, ISR 방식의 차이에 대해서 배워보도록 하자. Pre-RenderingNext.js는 렌더링을 할 때 기본적으로 pre-rendering(사전 렌더링)을 수행한다.사전 렌더링이란 서버단에서 DOM 요소들을 Build하여 HTML 문서를 렌더링하는 것을 말한다. 또 하나의 중요한 개념으로는 Hydration이 있다.Hydration이란 이렇게 미리 렌더링된 HTML에 JavaScript를 결합하여서 이벤트가 동작할 수 있도록 만드는 과정을 말한다.하지만 이러한 .. 2024. 9. 2. CSR vs SSR 지금 우리가 보고 있는 브라우저의 화면은 브라우저 렌더링 과정을 통해 만들어진 것이다.렌더링 방식은 클라이언트와 서버 중 어느 쪽에서 화면을 만드는지에 다라 CSR, SSR로 나뉜다.두 방식의 차이를 이해하기 위해서는 SPA와 MPA의 이해가 선행되어야 한다.먼저 **SPA, MPA**의 개념을 이해하고 **CSR, SSR**의 차이에 대해 알아보자.SPA와 MPASPA(Single Page Application)하나의 HTML 페이지에서 새로운 페이지를 불러오지 않고 필요한 부분만 동적으로 컨텐츠를 바꾸는 어플리케이션MPA(Multiple Page Application)여러 개의 페이지로 이루어져 있으며 사용자가 페이지를 요청할 때마다 서버에서 렌더링된 HTML를 받아와서 컨텐츠를 변경하는 어플리케이션.. 2024. 8. 30. TCP / IP LAN과 WAN이란?보통 인터넷 라우터를 통해 연결된 좁은 범위에서의 연결된 네트워크를 LAN(Local Area Network)라고 부른다.그래서 보통 LAN선이라고 부르는 것이다.이러한 LAN이 모여 세계의 네트워크를 구성하는 방식이 WAN(Wide Area Network)프로토콜(protocol)우리가 일상적으로 사용하는 네트워크의 확장 방식은 크게 두 가지 방법이 있다.한 네트워크를 확장하는 방법네트워크와 네크워크를 연결하는 방법여러 네트워크를 연결하는 방법을 인터네트워킹 이라고하는데 인터네크워킹을 통해서 네트워크의 일부가 고장나도 영향이 광범위하게 퍼지지 않거나, 불필요한 통신이 확산되지 않게 한다는 장점이 있다.이때에 인터넷에 연결되어 있는 컴퓨터들끼리의 소통이 필요한데 이를 위해서 일종의 약.. 2024. 8. 30. OSI 7 Layers OSI 7 계층이란?OSI 7 계층은 네트워크에서 통신이 일어나는 과정을 7단계로 나눈 것을 말한다.OSI 7 계층을 나눈이유는?계층을 나눈 이유는 통신이 일어나는 과정을 단계별로 파악할 수 있기 때문이다.흐름을 한눈에 알아보기 쉽고, 사람들이 이해하기 쉽고, 7단계 중 특정한 곳에 이상이 생기면 다른 단계의 장비 및 소프트웨어를 건들이지 않고도 이상이 생긴 단계만 고칠 수 있기 때문이다.ex) PC방에서 오버워치를 하는데 연결이 끊겼다.한 PC만 문제가 있고 오버워치 소프트웨어에 문제가 있다면(7계층 어플리케이션 계층)있다고 판단해 다른 계층에 있는 장비나 소프트웨어를 건들이지 않는 것오버워치 소프트웨어에 문제가 없고, 스위치에 문제가 있으면(2계층 데이터링크 계층)모든 PC가 문제가 있다면 라우터의 .. 2024. 8. 22. React - 불변성 불변성이란?메모리에 있는 값을 변경할 수 없는 것을 말한다.원시 데이터(string, number, boolean, null, undefined, Symbol): 불변성 있다.원시데이터는 수정시, 메모리에 저장된 값 자체는 바꿀 수 없고, 새로운 메모리 저장공간에 새로운 값을 저장원시 데이터가 아닌 데이터(Object타입: 객체, 배열, 함수 ..): 불변성 없다.원시데이터가 아닌 데이터는 수정했을 때 기존에 저장되어 있던 메모리 저장공간의 값 자체를 변경리액트에서 상태 불변성리액트에서 불변성의 지키는 것이 중요한 이유리액트가 상태 업데이트를 하는 원리때문리액트가 화면을 리렌더링하는기준state가 변하면 리렌더링!state가 변하지 않으면 리렌더링 xstate가 변했는지 변하지 않았는지 확인하는 방법?s.. 2024. 8. 21. RSC / RCC Next 13 업데이트에 app directory가 되면서, app directory 내부 모든 컴포넌트는 기본적으로 '서버 컴포넌트'로 동작하게끔 설정되었습니다.app directory 내부에서 '클라이언트 컴포넌트'로 지정하고 싶다면, 아래와 같이 파일 최상단에 'use client' directive를 명시해야 합니다.'use client' // HERE ! import { useState } from 'react' export default function Counter() { const [count, setCount] = useState(0) return ( You clicked {count} times setCount(count + 1)}>Click me .. 2024. 8. 16. 이전 1 2 3 4 다음
