프로젝트의 Ligthouse를 확인해봤다. ?! 성능이 갈려버렸다... 그래서 바로 성능 개선을 나서기로 했다! 1. Code Splitting import Header from '../components/header'; import Test from '../pages/test'; import TestCreate from '../pages/testCreate'; // ... 다음과 같이 Router 를 사용하는 부분에서 각 페이지 컴포넌트를 Splitting 할 계획이다. 그 이유는 React 공식 사이트에서도 나오는데, 현재 페이지에서 사용자 경험을 해치지 않고 번들을 나누기 위해서는 라우트가 가장 확실하기 때문이다. 사용할 것은 React에서 제공하는 lazy와 Suspense이다. lazy는 동적으..

DOM 앞서 브라우저의 렌더링 과정을 통해서 Repaint와 Reflow가 브라우저 렌더링 중 리소스를 가장 많이 잡아먹는 연산이라고 배웠다. 일반적인 소개 페이지와 같은 정적인 웹 애플리케이션이라면 DOM이 더 좋은 성능을 나타낸다. 하지만 문제는 복잡한 SPA에서는 DOM 조작이 많이 발생한다는 것이다. Repaint와 Reflow가 빈번하게 발생하는 웹사이트에서는 UI/UX 렌더링에 비교적 많은 리소스를 잡아먹기 때문에 전체적인 프로세스를 비효율적으로 만든다. Virtual DOM Virtual DOM은 Reflow와 Repaint를 줄여서 브라우저 레이아웃 엔진의 성능에 최적화를 시켜준다. 이게 어떻게 가능할까? 먼저 브라우저에 렌더링을 한 후에 Virtual DOM을 하나 만듭니다. 그리고 변화..

이전에 브라우저의 렌더링이 어떤 방식으로 이루어지는 지 알아봤다 이번에는 React에서의 렌더링을 알아보자! 클래스 컴포넌트에서의 LifeCycle에 대한 이미지를 가지고 왔다. ComponentDidUpdate, DidMount 등등은 우리가 많이 알고 있는 익숙한 것들이다. 하지만 옆에 Render Phase, Commit Phase에 대해서는 특별하게 들어본 적이 없다. React에서의 Render Phase와 Commit Phase가 무엇인지 알아보자 Render Phase 간단하게 말하자면 컴포넌트 함수를 호출해서 React의 Element를 반환하고 새로운 Virtual DOM을 만들어준다. 그리고 최초 렌더링이 아니라면 재조정을 통해서 실제 DOM에서 적용할 변경점을 확인한다. 재조정 ( R..

구글에 이어 마지막으로 bing(빙)에 나의 티스토리가 좀 더 잘 나오게 하는 방법을 알아보자! 예상 했겠지만 빙 웹마스터 도구를 사용하는 방법이다! 0. 준비물 필요한 준비물로 구글 계정이 필요하다. 1. 빙 웹마스터 도구 이동 구글에서 " 빙 웹마스터 도구 " 라고 검색하면 상단에 bing 웹마스터 도구 사이트가 나온다. 이것이 우리에게 필요한 사이트! => 바로가기 링크! Bing 웹 마스터 도구 www.bing.com 2. 로그인 및 사이트 등록 웹마스터 도구에 접속한 다음 로그인을 우선 진행하자! 여기서 우리가 미리 준비한 구글 계정으로 로그인을 진행하면 된다! 로그인을 성공하면 사이트 수동 추가를 사용해 우리 티스토리 홈페이지 URL을 입력하고 추가를 누르자!! 많은 선택지가 있지만 우리에게 ..

나의 티스토리가 네이버에 좀더 잘 나오게하는 방법이 있다! 바로 네이버 웹 마스터 도구를 등록하는 것이다. 바로 하는 방법을 알아보자! 0. 준비물 필요한 준비물로는 네이버 계정이 필요하다! 1. 네이버 웹마스터 도구 이동 네이버에 " 네이버 웹마스터 도구 " 라고 검색하면 제일 상단에 네이버 서치어드바이저가 나온다. 이게 바로 우리에게 필요한 사이트이다! => 검색하기 귀찮으실테니 링크 네이버 서치어드바이저 네이버 서치어드바이저와 함께 당신의 웹사이트를 성장시켜보세요 searchadvisor.naver.com 2. 사이트 등록 웹마스터 도구라는 버튼을 클릭해서 페이지를 이동하자! 사이트 등록이라는 화면이 나올텐데, 여기서 " 이곳에 URL을 입력 ... 모시껭이 " 부분에 우리의 티스토리 주소창을 복사..