FrontEnd/Deep Dive
![[React] Deep Dive 모던 리액트(32) 웹페이지 성능측정](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbOwORj%2FbtsFm7TAP1P%2FwcgWDh2y5NZkO9fzvQC0jk%2Fimg.png)
[React] Deep Dive 모던 리액트(32) 웹페이지 성능측정
이전 글에서 웹페이지의 성능을 판단하기 위해 확인해야 하는 지표들에 대해 알아봤다. 이번 글에서는 지표를 확인하는 서로 다른 방법을 통해 웹페이지의 성능을 객관적으로 파악하는 방법을 알아보자. 1. 애플리케이션에서 확인하기 1. create-react-app cra를 통해 프로젝트를 생성하면 아래와 같은 파일이 생성된다. (src 파일 안에 있다) import { ReportHandler } from 'web-vitals'; const reportWebVitals = (onPerfEntry?: ReportHandler) => { if (onPerfEntry && onPerfEntry instanceof Function) { import('web-vitals').then(({ getCLS, getFID, ..
![[React] Deep Dive 모던 리액트(31) 핵심 웹사이트 지표](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fcf3wqg%2FbtsE6SVd1uW%2FAKmfnctUKeWrujxu0ibVok%2Fimg.png)
[React] Deep Dive 모던 리액트(31) 핵심 웹사이트 지표
사용자가 웹사이트에 접속하였을때 웹사이트의 성능을 나타내기 위한 핵심 웹지표란 개념이 있다. 핵심 웹지표? 구글에서 만든 지표로 웹사이트에서 뛰어난 사용자 경험을 제공하는데 필수적인 지표를 일컫는 용어이다. 1. LCP (최대 콘텐츠풀 페인트) 2. FOD (최초 입력 지연) 3. CLS (누적 레이아웃 이동) LCP? 최대 콘텐츠풀 페인트란 페이지가 처음으로 로드를 시작한 시점부터 뷰포트 내부에서 가장 큰 이미지나 텍스트를 렌더링하는데 걸리는시간 을 의미한다. 큰 이미지와 텍스트는 아래와 같이 정의되어 있다. 내부 poster 속성을 사용하는 url()을 통해 불러온 배경이미지가 있는 요소 텍스트와 같이 인라인 텍스트 요소를 포함하고 있는 블록 레벨 요소 (,) 즉, 콘텐츠풀 페인트란 사용자의 기기가 ..
![[React] Deep Dive 모던 리액트(30) Next.js 13 & 리액트 18](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbQtJGu%2FbtsEYMPpE4W%2F7qXSFBOP7Nwa56iC3NHc70%2Fimg.png)
[React] Deep Dive 모던 리액트(30) Next.js 13 & 리액트 18
터보팩(Turbopack) 요즘 새롭게 뜨는 라이브러리인 Rome,SWC,esbuild의 공통점은 기존에 JS로 만들어지고 제공되던 기능을 Rust,Go와 같은 언어를 사용하여 뛰어난 성능을 보여준다는 공통점이 있다. 특히 SWC의 경우 Next.js를 만든 Vercel에서 제공하는 도구로 많은 프로젝트에서 바벨을 대신하여 사용되고 있다. Next.js13에서는 웹팩의 뒤를 자처하는 터보팩이 출시되었다. 웹팩대비 700배빠른데 이는 Rust를 기반으로 작성되었기 때문이라고 한다. 물론 현재는 개발 모드에서만 제한적으로 사용되기에 아직은 시간이 조금 걸릴것으로 보인다. 서버 액션(alpha) 이 기능은 API를 굳이 생성하지 않더라도 함수 수준에서 서버에 직접 접근하여 데이터 요청을 수행하는 기능이다. 서..
![[React] Deep Dive 모던 리액트(29) Next.js 서버 컴포넌트](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb5g3iJ%2FbtsEY9pKMej%2FVk18qnm4S3ea0CK4ZrfXpK%2Fimg.png)
[React] Deep Dive 모던 리액트(29) Next.js 서버 컴포넌트
리액트 서버 컴포넌트 리액트 18에서 도입된 리액트 서버 컴포넌트는 서버 사이드 렌더링과는 완전히 다른 개념이다. 둘다 '서버'라는 단어가 들어있는데 어떤게 다른 것인지 알아보자! 리액트의 컴포넌트라는 개념에 대해 한번 더 생각해보자. 리액트의 모든 컴포넌트는 클라이언트에서 작동하며, 브라우저에서 JS 코드 처리가 이루어진다. 웹사이트를 방문하면 리액트 실행항 코드를 다운로드하고 리액트 컴포넌트 트리를 만든 후 DOM에 렌더링한다. 서버 사이드 렌더링의 경우 서버에서 DOM을 만들어오고, 클라이언트에서 만들어진 DOM을 기준으로 하이드레이션을 진행한다. 이런 구조는 지금까지 Next.js,리액트에서 제공하는 서버사이드 렌더링 흐름이었다. 해당 구조의 한계점은 무엇일까? 1. JS번들크기가 0인 컴포넌트를..
![[React] Deep Dive 모던 리액트(28) Next.js13 라우팅](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F4Gu2f%2FbtsEYB7Ks4z%2FO2vui0JWsABSxXDmfZtBDk%2Fimg.png)
[React] Deep Dive 모던 리액트(28) Next.js13 라우팅
Next.js 13버전은 Next.js의 역사를 통틀어서 가장 큰 변화가 있었다. 서버사이드 렌더링의 구조에 변화가 많은 리액트 18을 채용하였으며 레이아웃 지원또한 본격적으로 지원하기 시작했다. 또한 바벨을 대체할 러스트기반 SWC를 뒤이어 웹팩을 대체할 Turbopack까지 출시했다! app 디렉터리 Next.js의 아쉬운 점으로 평가받던 것 중 하나로 레이아웃의 존재가 항상 지목되어 왔었다. 공통 헤더와 공통 사이드바가 대부분의 페이지에 필요한 웹사이트를 만든다고 생각해보자. 만약 react-router-dom을 사용한다면 아래와 같은 방식으로 라우팅을 만들어 볼 수 있다. import { Route, Routes } from 'react-router-dom'; const App = () => { ..
![[React] Deep Dive 모던 리액트(27) 리액트 18 변경점](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FAQTe6%2FbtsEKGHCr5G%2Ftoazf6eFM3774eijXofF30%2Fimg.png)
[React] Deep Dive 모던 리액트(27) 리액트 18 변경점
지난 글에 이어서 리액트 18의 변경점을 알아보자. 리액트 18에서 클라이언트에서 리액트 트리를 만들때 사용되는 API가 변경되었다. createRoot 기존 react-dom의 render를 대체할 메서드이다. 리액트 18 기능 사용을 위해서는 createRoot와 render를 함께 사용해야 한다. //before import ReactDOM fro 'react-dom' import App from 'App' const container = document.getElementById('root') ReactDOM.render(,container) //after import ReactDOM fro 'react-dom' import App from 'App' const container = documen..