만족

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

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

https://redux.js.org/tutorials/fundamentals/part-1-overview Redux Fundamentals, Part 1: Redux Overview | Redux The official Fundamentals tutorial for Redux: learn the fundamentals of using Redux redux.js.org 위 내용을 참조하여 설명할 것이다. Redux란 무엇인가? Redux is a pattern and library for managing and updating application state, using events called "actions". 리덕스는 "액션"이라고 하는 이벤트를 사용하여 애플리케이션의 상태를 관리하고 업데이트하는 ..

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 이 포스트에서는 이미 애드센스 승인을 받고, 프로젝트에 광고를 추가하는 방법에 대해 알아볼 것이다. 광고 생성 디스플레이 광고 또는 인피드 광고를 사용할 것이다. 자동 삽입 광고는 내가 의도하지 않은 위..

기존의 expressjs프로젝트에 페이지 렌더링 기능이 필요해 Nextjs를 사용했다. 통신 구조 여기에서 Client가 3006포트로 요청을 하면, nextjs 프로젝트에서 리버스 프록싱을 통해 express 프로젝트에 관련 데이터를 요청하고 클라이언트에게 페이지를 반환한다. 클라이언트는 express(PORT 3002)와 직접 통신할 필요가 없다. 만약 클라이언트가 API 호출을 원한다면 아래와 같이 통신한다. 클라이언트가 api서버와 통신하길 원한다면, nextjs를 거치지 않고 express와 통신할 수 있다. express프로젝트에 nextjs추가 yarn add react react-dom next or npm install react react-dom next 필요한 세 개의 모듈을 추가한다..

지난 포스트(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..

머지포인트가 무엇이냐? 일종의 멤버쉽 서비스이다. 현금으로 포인트를 충전하면 그 포인트를 1:1 비율로 제휴처에서 사용할 수 있는데, 충전 시 프로모션을 풍부하게 제공하여 10만 포인트를 충전하는데 9만원, 8만원, 6만원 밖에 들지 않았다. 더구나 이용자도 많아 사기 의심을 별로 하지 않았을 뿐더러 제휴처도 많았기 때문에 더욱 인기가 있었다. 사건 발생 2021.8.13에 갑자기 많았던 제휴처가 엄청나게 줄어들었다. 또한 포인트를 90% 가격으로 환불해주겠다는 성의없는 안내문이 이용자들에게 발송되었다. 이를 본 사용자들은 불안감을 느껴 몇 남아있지 않은 제휴처로 찾아가 포인트를 무더기로 사용했다. 문제는 남아있는 제휴처들 중에는 대기업은 얼마 없고 중소 영업처들이라는 것인데 이들에게 떠넘겨진 포인트는 ..