마이페이지 -> 내 프로필 --> 포인트 내역, 이메일, 이름, 구매상품 수., 구매내열, 판매내역, 판매상품수
=>새로고침시마다 restore토큰못받아오는것은 권한분4기?? 처리해서 정리하기. router.path해서 일정 부분페이지에서만 에러뜨게(로그인해주세요!!)
코파일럿, chatGPT. => ~~ 기능 만들어줘 => 디테일한 함수 만듬.
개발자 => 위에서 만든 기능 검증..
ChatGPT =>>
setState작동원리,, 바닐라 자바스크립트, 사용하지 않을때, 사용할때 등 질문하면 잘 답변해줌. 한번 사용해보기
성능 최적화:
메모이 제이션(리엑트, 브라우저, api요청, 알고리즘에서 사용됨)
async await를 for문에서 사용하지 않아야??
빠르게 할 수 없다면 속이기. -> 좋아요같은 기능들 (중요하지 않은 기능) 속여보기(눈속임)
메모이제이션
리엑트 기능을 사용하여 메모하고, 그것을 이용한 성능최적화.
변수를 이용해 카운트를 올리는 로직을 작성하고, console.log도 찍어본다.
카운트가 올라가는것이 콘솔에는 찍히나 화면에는 나오지 않는다. -> 화면에 나오게하려면 리렌더링되어야하는데 리렌더링 되지 않기 때문
=> state를 사용하면리랜더링되어 변경된값이 화면에 나타난다.
이렇게되면 이전변수들 이라던지.... 전부 다시 읽으면서 use쓰는 애들
빼고 다시 초기화가됨.
(use애들은 값을 저장하기에 다시읽어도 변동없음)
=> 초기화된다는것 => 카운트를 올려놨는데 리랜더링되면서 그 값이 처음으로 돌아간다는것.
변수는 리랜더링 안됨. state는 리랜더링으로 화면에 변경된 값이 출력됨.
useMemo사용해보기. => 변수 기억용.
useCallback사용해보기 => 함수 기억용.
useMemo를 사용해도 함수를 기억할 수는 있으나, 사용되지는 않는다.
// 1. useMemo로 변수 기억하기 리렌더링 되어도 처음값이 유지됨. const aaa = useMemo( () => Math.random(), // 기억하고싶은 값을 {return ~~~여기에 적어주면되는데 return 사이에 별 내용없으면 중괄호가 소괄호가 되고, // 이 소괗호도 생략가능} [] ); console.log(aaa); // 2. useCallback으로 함수를 기억. useCallback(()=>{},[]) const onClickCountLet = useCallback((): void => { console.log(countLet + 1); // 값은 올라가나 리랜더링 없어 화면에는 반영안됨. document.getElementById로 해당태그 선택해서 바꿔줘야했음. countLet++; // countLet += 1 // countLet + 1 }, []); // 4. useMemo로 나만의 useCallback만들어보기(함수안에 함수..) const onClickCountState2 = useMemo(() => { return (): void => { setCountState((prev) => prev + 1); // 이렇게되면 이전값꺼내서 계산됨 => 리랜더링됨. }; }, []);--> 생김새가 useEffect(()=>{},[])와 유사하다.
useCallback으로 함수를 기억하는데 이때 state를 사용한다면 주의해야할것이 있다.
useCallback state적용시 주의점.
함수안에 state를 넣으면 이 state값도 같이 기억해 리랜더링되지않고 저장된것을 꺼내사용한다.
따라서 값이 변경되지않는다.
이때는 prev를 사용해 이전값을 꺼내오는방식을 사용하고, 이렇게되면 리렌더링이 일어나 값이 변경되게된다.
언제 사용하는기? => 복잡한계산로직(for문 등) => 오래걸리는 계산이 들어갈때, 한번실행한 값을 저장해 사용한다. (사용자가 이용하는 컴퓨터는 무조건 느리다고 생각하고 로직을 구성할것!)
컴포넌트를 메모하기.
리엑트의 memo라는것을 import해오기
컴포넌트에 메모를 붙인다 -> 이 메모를 저장하는 어떤 공간이 있다는것.
리랜더링이 되어야만하는 컴포넌트에 쓸데없이 메모를 붇이는것은 메모리낭비(메번리랜더링되어야하는 컴포넌트 -> 메모리 필요, 깨지는 로직도 존재)
따라서 모든 컴포넌트에 메모적어놓는것은 좋지 않음.
그리고!! useMemo, useCallback도 마찬가지로 어차피 매번 바뀌는 값이라면 사용하지 말것(메모리 낭비)
--> 위에서 state를 포함한 함수를 useCallback안에 넣어 기억햇는데 이것이 바로 메모리낭비의 예시...인것같다.
왜 메모기능을 사용해야하는가.
지금 포트폴리오에 적용해도 크게 체감하지는 못함.
다만 , 큰 회사에서는 메모기능을 유용하게 사용할 수 있음.=> 규모가 클경우에 메모기능을 이용해 좀 더 빠르게 보여줌.
포트폴리오에 적용시에는 오버엔지니어링 일 수 있지만, 취업시에는 사용될 수 있으니 적용해보는것도 좋음....?
브라우저에 어떻게 그림이 그려질까??
다운로드! -> HTML준비(Dom:document(문서)를 객체형태로 만들어놓는것),Css준비(CSSOM) => 두개합치기 -> 위치그리기 (스케치 =Layout=Reflow) -> 색칠하기 = Paint(=Repaint)
리플로우 리페인트 = 레이아웃 페인트.
=> 컴포짓(합성)(포토샵처럼 각기 그려서 합치기. => 각각을 레이어 라고함)
===> 이 과정을 렌더링 한다라고 한다.
색상 바꾸기 => 색만 바꾸면되니 리소스 적음...
위치변경 ? ===> 이동, 색칠다시(Reflow(Layout) 일어나면 Repaint(Paint)도 다시 일어나야한다.)=오래걸림.
따라서 브라우저 성능을 위해서는 Reflow덜일어나게해야한다.
더 오래걸리는 작업 : Reflow(Layout)
스케치가 다시되야한다는것은 그만큼의 공간을 다시 계산하여그리고, 다시 색을 칠해야하니 오래걸릴 수 밖에없다.
==> 그럼 언제적용하나??
실제 성능이 느려지는 페이지를 만났을때, 이때 이러한부분을 개선한다.
Layout Shift
레이아웃을 그리면서 이미지 등이 나오면 그 공간이 벌어지며 나오는것이 아니라 미리 공간을 만들어두고, 그상태에서 그 공간에 이미지 올라가게처리.
레이아웃 쉬프트실습
쉬프트: 내려감.
=> 내려감을 방지하기위해 미리 공간을 만들어둔다.
