DEEPDIVE
![[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 모던 리액트(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..
![[React] Deep Dive 모던 리액트(25) 리액트 17 변경점](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FOjTXF%2FbtsExOlP8dp%2F5hKWTUBFqaInvX4KQtki8K%2Fimg.png)
[React] Deep Dive 모던 리액트(25) 리액트 17 변경점
리액트 17버전은 추가된 기능은 없으며 호환성이 깨지는 변경사항 즉 기존 사용하던 코드의 수정을 필요로 하는 변경사항을 최소화 한 점을 가장 큰 변화로 삼는다. 리액트 팀 피셜로 10만개 이상 컴포넌트 중 호환성이 깨지는 변경사항에 영향을 받은건 20개 미만으로 대부분 어플리케이션이 문제 없이 17 버전으로 업그레이드 할 수 있을 것이라고 한다. 리액트가 버전을 업그레이드 하는 경우는 이전 버전에서 호환되지 않는 API가 있거나 새 버전을 사용하는데 있어 작동방식이 달라지는 경우다. 즉 리액트팀은 새로운 버전이 릴리스되면 이전 버전의 API 제공을 완전히 중단해버렸다. 이런 전략은 리액트 개발팀에게는 유용하겠지만 오래된 코드를 가지고 돌아가는 실제 웹 애플리케이션에는 그렇게 좋지 못한 일이다. 따라서 레..
![[React] Deep Dive 모던 리액트(21) 테스트](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbNrXlS%2FbtsDA3Y19bw%2FAPrDqtFjF5CylIilA08W91%2Fimg.png)
[React] Deep Dive 모던 리액트(21) 테스트
테스트란 개발자가 만든 프로그램이 코딩을 한 의도대로 작동하는지 확인하는 일련의 작업을 의미한다. FE와 BE 모두 테스트 과정이 중요하지만 방법과 방법론은 조금 다르다. BE의 테스트는 서버,DB에서 원하는 데이터를 올바로 가져올 수 있는지 , 데이터 간 교착상태나 경쟁상태가 발생하지는 않는지 등등을 테스트한다. 이러한 백엔드 텍스트는 일반적으로 화이트박스 테스트이다로 GUI가 아닌 AUI에서 주로 수행하기 때문에 백엔드에 대한 이해도가 어느정도 있는 사람만 가능하다. 반면 FE는 일반적인 사용자와 동일하거나 유사한 환경에서 수행된다. 사용자가 프로그램에서 수행할 모든 경우의 수를 고려해야 하며 사용자가 FE코드를 알 필요가 굳이 없는 블랙박스 형태로 테스트가 이뤄진다. 특히 사용자는 개발자의 의도대로..
![[React] Deep Dive 모던 리액트(18) Jotai & Zustand](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FMx7UV%2FbtsC4IVTsIb%2FpIM1qSiK5seHsdVfrmZYR0%2Fimg.png)
[React] Deep Dive 모던 리액트(18) Jotai & Zustand
Jotai는 공식 홈페이지에서 나와 있는 것처럼 Recoil의 atom 모델에 영감을 받아 만들어 진 상태 관리 라이브러리이다. Jotai는 상향식 접근법을 취하고 있다. 리덕스와 같이 하나의 큰 상태를 애플리케이션에 내려주는것이 아닌, 작은 단위의 상태를 위로 전파할 수 있는 구조를 가지고 있음을 의미한다. 이런 방식은 리액트 Context의 문제점인 불필요한 리렌더링이 일어나는 문제를 해결할 수 있다.메모이제이션 & 최적화 없이도 리렌더링이 발생하지 않는 구조이기 때문이다. atom Recoil과 마찬가지로 최소 단위의 상태를 의미한다. const couterAtom = atom(0) 위와 같이 Atom을 만들면 아래와 같은 정보가 담긴다. console.log(counterAtom) //,... /..