만족

https://sass-lang.com/ Sass: Syntactically Awesome Style Sheets Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass-lang.com Scss는 css를 더 유연하게 사용할 수 있게 해 주는 언어이다. 실제로 웹에서 적용할 때는 전처리기를 통해 css로 변환한 후 사용한다. React에서 Scss 사용하기 yarn eject eject 스크립트를 통해 webpack 설정파일을 끄집어낸다. yarn add node-sass sass-loader 모듈 두개를 설치한다. 단 webpack의 버전에 따라 최신 버전의 node-..

https://satisfactoryplace.tistory.com/131?category=829221 [React] 검색엔진 최적화(SEO):: Prerendering (react-snap) React는 대표적인 SPA제작 라이브러리이다. SPA가 사용감이나 개발적인 측면에서는 유리하지만, 빌드된 결과물을 보면 는 텅 비어있고 js가 body를 바꾸기 때문에 검색엔진은 이 사이트를 비어있는 satisfactoryplace.tistory.com 위 포스트에서 작성한 내용에서 최근 부족한 내용을 찾아 추가하려고 한다. 문제 react-snap은 지정된 url을 돌면서 html을 크롤링한다. 따라서 지정된 url로 접속했을 때는 그 페이지의 내용이 개략적으로 보이지만, 만약 동적인 url로 접속했을 때(/p..

한 컴포넌트에 16개의 Tooltip이 포함되어 있고, 그 컴포넌트(ItemCombination)가 10개 존재했을 때 렌더링을 프로파일링한 차트이다. ItemCombination은 장착중인 16개의 아이템을 아이콘으로 표시하고, 각각의 아이콘을 Tooltip으로 감싼 형태이다. 코드로 봤을 땐 딱히 성능 저하를 일으킬만한 것이 없어서 왜 느린가 싶었지만, 프로파일링한 결과 material-ui의 컴포넌트들은 withStyle로 감싸져 나가기 때문에 이런 식으로 컴포넌트 내에서 많은 반복을 할 경우 비교적 긴 withStyle의 실행 시간 때문에 성능 저하가 발생한다. 실제로 itemCombination에서 Tooltip을 제거하고 빌드했을 땐 렌더링 시간이 압도적으로 빨라졌다는 것을 알 수 있다. 필요..

크롬의 개발자 도구에는 Performance(성능) 탭이 존재한다. 이를 통해 웹 성능을 측정하고, 어떤 것이 시간을 오래 잡아먹는지 손쉽게 알아볼 수 있다. 캡쳐 시작은 왼쪽 위의 녹화 버튼으로, 중지는 붉게 변한 녹화 버튼을 통해 할 수 있다. 문제 내 프로젝트에서 렉이 심하게 걸리는 구간을 캡쳐해보니 특정 구간에서 프레임 드랍이 심하게 일어나는 것을 확인할 수 있었다. 이는 컴포넌트 렌더링 중 오래 걸리는 함수가 렌더링을 블러킹하여 해당 구간에서 웹이 멈추는 현상인 것임을 알 수 있다. (Frame이 급격히 줄어드는 구간=> Frames가 붉게 표시되는 구간) 컴포넌트를 진단해본 결과 어떤 함수가 오래 걸리는 함수인지를 알았다. 그런데 그 함수는 다시 계산될 필요가 없는데도 컴포넌트 리렌더링마다 무..

import React, { useState } from "react"; //foo는 매우 오래 걸리는 함수의 예이다. const foo = () => { console.log("foo is called"); console.time("foo"); //약 0.2~0.8초 소요 for (let i = 0; i { //value라는 state는 foo()의 값으로 초기값이 결정된다 const [value, setValue] = useState(foo()); const [cnt, setCnt] = useState(0); return ( value is {value} setC..

아직 애드센스에 합격하지 못한 사람들은 아래 링크를 참조하고 승인을 먼저 받아야 한다. https://satisfactoryplace.tistory.com/151 [React] 애드센스 합격 과정 6번의 떨어짐 끝에 드디어 애드센스 합격 통보를 받았다. (육전칠기....) 합격을 받기까지 거친 과정을 소개해 보려고 한다. 1. 사이트 성능 최적화 satisfactoryplace.tistory.com/122?category=829221 [React].. satisfactoryplace.tistory.com 이 포스트에서는 이미 애드센스 승인을 받고, 프로젝트에 광고를 추가하는 방법에 대해 알아볼 것이다. 광고 생성 디스플레이 광고 또는 인피드 광고를 사용할 것이다. 자동 삽입 광고는 내가 의도하지 않은 위..

지난 포스트(MobX 실제로 사용해보기)에서 상태를 클래스 형태로 사용했었다. class Timer { secondsPassed = 0 constructor() { makeAutoObservable(this) } increaseTimer() { this.secondsPassed += 1 } } const myTimer = new Timer() 함수형 컴포넌트만 사용하는 사람들 입장에서는 별로 보기 좋은 모양새가 아니다. const timer = observable({ secondsPassed: 0 }); const increaseTimer= ()=>{ timer.secondsPassed+= 1; } export default { secondsPassed: timer.secondsPassed, increa..

class component에서의 prev state componentDidUpdate(prevProps, prevState, snapshot) class component에서는 componentDidUpdate 라이프사이클에서 이전 상태값들을 사용할 수 있었다. Function component에서의 prev state 그러나 hook에서는 위와 같은 라이프사이클이 존재하지 않는다. 따라서 hook을 커스텀해서 prev state를 담을 수 있는 새로운 state를 생성해 활용한다. usePrevState.js import { useEffect, useRef } from "react"; export function usePrevState(state) { const ref = useRef(state); ..