11/6

react-redux-kit

아래 내용은 어제 멘토링 받은 내용을 재정리한 내용

1. 선언

import React from "react";
import { render } from "react-dom";
-import { createStore } from "redux";
+import { configureStore } from "redux-starter-kit";
import { Provider } from "react-redux";
import App from "./components/App";
import rootReducer from "./reducers";

-const store = createStore(rootReducer);
+const store = configureStore({
+   reducer: rootReducer,
+});

import { createSlice } from 'redux-starter-kit'

• 어떤 공용 스테이트가 필요한가 (비동기라면 loding, error, data 구분하면 좋다.)
• "이 스테이트는 어떤 상황에서 어떻게 변해야하는가"를 기준으로 reduces 정의
  • key 는 액션이름
  • value는 reducer function . 여기서는 state를 직접 변경해도 된다. 내부적으로 immer.js 사용해서 immutable하게 처리됨
•  

const usersSlice = createSlice({
  name : 'users',
  initialState: {
    data : [],
    isLoading : false,
    error : null
  },
  reducers: {
    startLoading: state => {state.isLoading = true},
    successLoading: (state, action) => {
      const { users } = action.payload;
      state.isLoading = false;
      state.data = users;
      state.error = false;
    },
    failLoading:  (state, action) => {
      state.isLoading = false;
      state.data = []; //옵션 상황에 따라...
      state.error = action.payload.error;
    }
  }
});


export const fetchUsers = () => {
  return async (dispatch)=>{
    dispatch(usersSlice.startLoading());
    fetch('http:/ss').then((userArray)=>{
      dispatch(usersSlice.successLoading({
        users : userArray
      }))
    }).catch(()=>{
      dispatch(users.failLoading())
    });
  }
}

컴포넌트에서 slice로 만든 action과 state 사용하기

import { useDispatch, useSelector } from 'react-redux'
export default function UsersInterface() {
  // const [users, usersFromRedux, isDataInitialized] = useUsers();
  // const isDataInitializedFromRedux = useSelector(state => state.users.isDataInitialized)
  const dispatch = useDispatch();
  const usersData  = useSelector(state => state.users.data);
  const isLoading = useSelector(state => state.users.isLoading);

  useEffect(()=>{
    dispatch(fetchUsers());
  },[dispatch])
  
  return (
    <>
      {isLoading ? (
        <Users users={usersData} />
      ) : (
        "로딩 중..."
      )}
    </>
  );
}

redux
product
receipt

component

component를 재사용하고싶은데 한 경우는 product로 데이터를 넣엇다가 불러와야하고 한 경우는 receipt로 데이터를 넣었다가 불러와야 한다면 데이터자체는 인자로 넘기면 된다는 생각이 듭니다. 하지만 dispatch의 type이 달라질텐데 이런경우의 재사용은 어떻게 이루어져야할까요?

ref와 state의 차이점 :
ref는 렌더링을 발생시키지않는다

ef.current = 1;

useRef는 (useState - rendering발생)
Ref는 레퍼런스자체는 같다 but current는 다르다
값을 기억해야하는데 렌더링이 필요없을대 사용
ex)enter -> 
payload가 뭔지 알아보자!
connect 와 selector간의 차이

 

redux saga

https://velog.io/@jeonghoheo/Redux-Saga%EC%9D%98-%EA%B8%B0%EB%B3%B8

 

위에 코드들은 현재 임시 저장정도로 해논느낌이고 주말에 다시 정리해야겠다

구글 기술 세미나
"서치 콘솔 이야기" 정확하게 검색하면 무조건 뜬다
구글 서치 콘솔 등록 - 고객센터
구그 ㄹ서치 콘솔 site:betterweb.or.kr :내가 원하는 웹애서만 검색이된다
daterange: 2019-11-01..2019-11-03
link:www.betterweb.or.kr :다른사이트에서 내페이지로 링크되어있는것을 찾아준다
겨울 * 요리 : 와일드 카드
1tb * (1.15 ^ 4)
filetype: pdf :원하는 파일
hl=[loanguage code] gl=[country code] : url에 붙여서 사용하면된다!
모바일 친화성 테스트 : 소유하지않은것 테스트
서치 콘솔 : 소유한 사이트를 사용해봐야한다.
스크롤 다운을 통한것은 못보지만 spa는 대부분 볼 수 있다.
제 3자 접근불가
트래픽분석하여 사용자특정못하도록
http://hacks.mozilla.or.kr : 꼭 읽어보자
해결방법
믿을만한 리졸버만 사용, https, 최소 데이터만 전송
lighthouse : 
ssr + hydration
react-snap
google web master 채녈에 라이브러리별로 설명이되어있다
audits
seo
lazy loading : 
과거  - 사용자들이 스크롤하면 되는것
intersectionobserver를 사용하면 된다. 해당컨텐츠가 할때
img태그에 아예 lazy로딩 지원loading="lazy"
구글봇은 ssr을 하지안는것을 권장