220622 프론트엔드 부트캠프 43일차 : Memoization, @media(반응형 페이지), 토스트 에디터

오늘은 수요일
알고리즘 테스트가 있어요

오늘부터 이틀 동안은 최적화에 대해 배웁니다!
서버사이드 렌더링은 무슨 소린가? 도대체 이게 무슨 소리야,, 이것도 배울 거임!

1. 자꾸 새로 만들지 말고, 메모해 놓는 거 어때? → Memoization
2. 내 사이트 모바일에서도 보고 싶어! @media

  MEMOIZATION

부모, 자식 간의 관계로 만들어서 진행
폴더 안에 container랑 presenter를 만들어서 했는데,
32-01-memoization/container 입력하면 접속 가능하다!

1. render시 변수가 새로 만들어지는 상황
2. 함수가 새로 만들어지는 상황
3. 부모 리렌더시, 자식도 리렌더되는 상황

const aaa = Math.random();
  console.log(aaa);

콘솔에 찍어보면 state가 바뀔 때마다 숫자 바뀐다!

똑같은 거 계속 만들고 있으면 낭비죠? 그런 것들을 어떻게 막을까! 메모해놓기!!!!

memoization, 메모해놓는다.

--------------------------------
bean멘토님의 꿀팁… (VS code 단축키)
쉬프트 + 방향키
옵션 + 방향키
^^
쉬프트 + 옵션 + 방향키로 드래그하고 쉬프트만 누른 상태로 방향키로 조금씩 조절!
--------------------------------

컴포넌트 메모 - react memo
변수 메모 - useMemo
함수 메모 - useCallback


개발자 도구 - Profiler -

설정하면 어떤 부분이 렌더링 되는지 알 수 있다!

1. 컴포넌트 메모

export default memo(MemoizationPresenterPage)

memo는 컴포넌트를 메모이제이션 한다. memo로 감싸진 컴포넌트를 저장한 후에 새로 렌더 되는 것과 저장된 것이 같다면 리렌더하지 않는다.

2. 변수 메모

  let countLet = useMemo(() => 0, []); // 이건 확실치 않다. 
  
  const aaa = useMemo(() => Math.random(), []);

위에는... 내가 쓴 거라서 확실치 않고 그리고 고정되지 않는 것 같기도(??????ㅎㅎ..)

useMemo는 연산된 결과를 담는 변수의 값을 저장한다. [] <의존성 배열 안의 적용할 변수가 변경되었을 때만 리렌더한다.
아래처럼 Math.random() 변수를 만들면 한 번 뽑은 숫자로 고정되어 변하지 않는다.


3. 함수 메모

const onClickCountLet = useCallback(() => {
    console.log(countLet + 1);
    countLet += 1;
  }, []);

  const onClickCountState = useCallback(() => {
    console.log(countState + 1);
    setCountState(countState + 1);
  }, []);

-> 메모이제이션 잘못 사용한 케이스
useCallback 안에 스테이트가 들어가면 스테이트까지 같이 메모해놓는다.
그래서 아무리 눌러도 리렌더가 되지 않고 숫자도 오르지 않는다.

setCountState((prev) => prev + 1);

이렇게 수정하면 정상적으로 작동한다.

  반응형 웹페이지

배달의 민족 홈페이지, 오늘의집
대부분 스타트업 반응형 트렌드는 반응형!
무조건 반응형으로 만들어야 되는 건 x
멘토님은 직방이랑 크몽을 좋아하신다,,, ! (?)

적응형 - 다음, 네이버, 쿠팡, 페이스북, 옥션, 크몽
화면에서 보여줘야 할 내용이 너무 많으면 반응형으로 만드는 것도 힘들고 UX(사용자 경험) 좋지도 않음
적응형 공통적인 규칙 - 작은 노트북에서도 볼 수 있게 핵심 콘텐츠가 어느 정도 사이즈로 고정되어있고, 나머지는 크게 중요하지 않은 부분들 붙어있다.

보통 1024~1280 정도로 폭이 정해진다.
반응형 어떤 크기를 줄일 것인지, 어떤 애를 밑으로 내릴 것인지… 그런 기획이 있어야 한다.
모바일/태블릿/pc 이렇게 나누는 편

예전엔 부트스트랩이 거의 기준이었어.
여기 들어가면 사이즈 기준이 나옴(문서 - 레이아웃 - 중단점)

const Wrapper = styled.div`
  width: 62.5rem;
  height: 62.5rem;
  background-color: #a7cfc9;

  @media ${breakPoints.tablet} {
    width: 500px;
    height: 500px;
    background-color: #fbe6a8;
  } // 여기오면 아래꺼가 위에꺼 덮어쓰는 식

  @media ${breakPoints.mobile} {
    width: 100px;
    height: 100px;
    background-color: #ffc5c4;
    display: none;
  }
`;

가로길이는 %로 준다.
높이는 고정값 주는 경우가 많다. 주더라도 스크롤해서 올리니까 …

전체 사이즈 한 번에 조절하고 싶을 때
em, rem

rem 쓰게 되면 바디 폰트 사이즈 바뀌면 그거에 맞춰서 비율이 같이 변해
바디의 영향을 받는 rem

pixel to rem
대부분 1rem = 16px이라네요…
1000px = 62.5rem

em은 자기 부모 태그의 영향을 받는다. 사용하기가 조금 애매하다.

  Critical-Rendering-Path

브라우저에 어떻게 그림이 그려질까?

더 오래 걸리는 작업 Reflow(레이아웃이라고 할 수 있음)
위치가 바뀌면, 크기가 바뀌면 색도 다시 칠해야 해
reflow 일어나면 repaint도 같이 일어난다!!!!


https://csstriggers.com/

---

* 문제 해결!
일단 조금씩 주석을 걸어서 뭐가 문젠지 확인해본다.
콘솔 로그 찍어서 함수에 잘 들어오는지 확인한다.
여기서 콘솔 로그가 두 번 찍혔고, 두 번 들어감을 알 수 있음!!
form에도 걸고 button에도 걸어놔서 함수가 두 번 실행돼서 생긴 오류 … 하핫;; ㅠㅠ

setState가 리렌더하려고 값을 비교할 때 레퍼런스값만 비교하기 때문에 (얕은 비교) 그래서 새로 만들어서 해주는건가요?
리액트 메모가 리렌더 될 때 같은 원리로 동작하는 것인지?

페이지네이션 테스트해보려고 이것저것 많이 샀다.
아무 말도 많지만 그 사이에서 최대한 의미 있는(?) 걸 사려고 했다...ㅎㅎㅎ
어차피 환불될 돈이지만 소즁한 내 골드.

플래너 쓰니까 확실히 뭘 했는지 알 수 있어서 좋다. 오늘 질문 드릴 거 두 개(imageUrls 얕은 복사, 대댓글 삭제시 팝업 뜨는 것) 다 질문했고, 도메인은 안 샀고(아직도 컨셉 제대로 못정함...), 상품 수정은 하다가 토스트 ui~form 디폴트 밸류, 수정한 것 없을 때 원래꺼 그대로 나와야하는 것에 문제가 있다. 상품 삭제는 했고, 목록에 이미지 불러오기, 구매목록 기능 만들었다. 페이지네이션은 추가는 했는데 아직 refetch에 문제가 있고, css도 고쳐야함... css는 모든 곳 다 고쳐야하긴하지만, 페이지네이션은 너무 대놓고 왼쪽으로 치우쳐져 있다.

상품 수정기능은 여쭤보고 해야할 것 같고 검색 기능은 아직 못 넣었다. 하고 싶은데 눈이 꿈뻑꿈뻑 무거워... 일기장도 다 써가서 노트 하나 사야하는데 노트도 못 고르고 있어! 귀엽고+작고+종이 코팅된+유선인 노트가 필요해... 이러다가 진짜 다 쓰겠어...!! 아니 근데 진짜 일기 중독수준으로 쓴 것 같다. 벌써 다 쓸줄은 몰랐어! 그리고 블로그도 글 100개가 넘었다. 별 내용 아닌 것도 쓰기도 하지만, 그래도 벌써 100개라니 뭔가 기쁨~~~~~ 예전에 네이버 블로그처럼 n번째 방문자 !!! ★ 이런,,, 몰래보기를 하지 못하게 하는 약간 나쁜데 두근거리는 기능이 생각났다. 100개 기념으로 뭔가 해야할 것 같다고.

그리고 난 정말 여기서 열심히 했는데 안된다?!이건 생각해본적이 없었다... 왠지 모르겠지만 그냥 시키는대로, 내가 열심히 하면 어떻게든 100%될 거라고 생각했다. 근데...! 구글링하다가 다른 블로그에서 정리해논걸 제목부터 읽을 엄두도 안 나는 나,,,,를 보고 진짜 이래도 되나? 싶었다. 나를...? 누가 써줄까? 약간의 미심쩍음. 근데 지금 할 수 있는 건 열심히 하는 것 뿐이고 의심해도 할 수 있는 건 없으니까 열시미 할거다 우하하~~~~~~

 

오늘 점심 봄날, 담다? 봄을, 담다...? 한식 뷔페! 내가 PF님과 떨어져 앉는 걸 선택해버렸다(고의는 아님,,,) 맨날 버리냐고 뭐라해놓고 정말 민망하네요. 그래서 2+1 미에로화이바라도 나눠먹었다... 꼭.. 꼭 이럴 때는 미니스톱 아이스크림 먹고 싶지,,,!!!!! 밥 먹고나면 안 먹고 싶어져서 안 사먹고ㅠ... 좀 먹어보고싶다~~!!!@!@! 금요일날 시험볼 때 먹어야겠다 히힛,,,

오늘은 정말 갱쥐들이 보고 싶었는데... 그리고 내 무릎에 앉혀놓고 공부하고 싶었는데 그러진 못했다. 시험 치고 조오금 마음의 여유가 생기면 그때 같이 공원에 가서 공부해야지! 넘 행복하겠다... ㅎ ㅎㅎ ㅎ ㅎㅎㅎㅎ 공원 + 강아지 ! 사랑해!

이렇게 쓰고도 일기장 30분 넘게 쓰는 나 자신 대단해^^ ,,,,,,, 학원에서 11시 40분에 하루를 마무리하는 사람은 나밖에 없지 않을까... 정말 내가 제일 열심히 하고 싶은데...! 그래도 1. 일기쓰고 자기 2. 1시 전후에 자기는 꼭 지켜야해. 잘하고 있을거야 아마두,,, ㅡㄴ데 스톱워치 내꺼 진짜 어디갔는지 모르겠다. 계속 열품타로만 체크하는데 열품타로하면 1분 1초까지 체크하진 못해서 불편하다ㅠㅠ 오늘은 10시간 15분 +- 30분 ,, 오차 범위가 너무 큰가?

아 맞다!!오늘 알고리즘 테스트... 뭔가 난 5주차가 제일 어려웠던 것 같다. 오늘 겁 먹었는데 한 줄 아니면 두 줄 안에 끝나는 문제들이었다. 줄수가 난이도에 비례하는 건 아니지만, 뭔가 간단한 문제...? 이러다가 다음주에 충격먹을까봐 걱정...^^ㅠ_ㅠ 아, 시험보다! 오늘 프로그래머스 인형뽑기 문제 푼 게 더 뿌듯했다. 오래걸리고 또... 다른 분들은 알고리즘에 시간 안 쓰시는 것 같아서, 불안했지만.... 하루에 한 두시간 정도는 알고리즘에 투자해도 되지 않을까...? 왜이렇게 눈치보냐~!!!그만 눈치보자,,,~~~