[TIL] 20210702 - 항해 26일차

뭔가 어질어질한 오늘😵

오늘 공부한 것

React 심화 강의 - 1일차

1. ProtoType
: 프로토 타입은 사실 '패턴'이다. 원본이 있고 복사해서 만드는 것.

• 자바스크립트의 모든 객체(함수 포함)는 프로토타입을 갖고 있다.
• 자바스크립트의 객체는 함수의 프로토타입 객체를 복사해서 만든다.
• 객체는 자기가 어디서 복제되어 생성되었는지 알고 있다.
• 부모 객체 = 프로토타입 객체
• 부모 객체를 참조하는 것 = 프로토타입 링크

프로토타입은 볼 때마다 새롭고 어렵다😅

[Javascript ] 프로토타입 이해하기

이전에도 읽고 보관해두었던 링크인데, 애초에 prototype이 어려워서 그렇지 글 자체는 제일 잘 정리되어 있는 것 같다.

2. 컴포넌트 쪼개기
기본 강의에서는 컴포넌트를 크게 가져갔다면, 이번에는 컴포넌트를 잘게 쪼개서 사용한다.

Page > 중간 Component > 최소단위 Component

컴포넌트를 어떤 식으로 쪼개가면 좋을 지, 또 폴더 구조는 어떻게 하면 좋을 지 튜터님의 방식을 따라해 볼 수 있어서 좋은 기회인 것 같다😁

3. image비율 맞추는 팁(반응형)
직사각형의 이미지를 화면 크기와 상관없이 비율을 맞추는 동시에 같은 부분의 이미지만 보여줄 수 있을지 사실 잘 몰랐다.

그런데 강의에서 엄청난 팁을 발견✨

const Outer = styled.div`
  width: 100%;
  min-width: 250px;
`;

const Inner = styled.div`
  width: 100%;
  padding-top: 75%;
  overflow: hidden;
  background-image: url("------");
  background-size: cover;
`;

이 중에 Inner에 있는 padding: 75%가 정말 혁신이었다.
padding은 부모의 너비를 기준으로 하기 때문에 padding-top의 너비는 Outer의 75%가 된다. 또한 height를 따로 주지 않았으므로 padding-top 자체가 height처럼 보이는 효과를 준다.

4. 클라이언트에서 쓸 수 있는 저장소

1) 쿠키
2) 세션 스토리지 : 브라우저를 닫으면 제거됨
3) 로컬 스토리지 : 사용방법은 세션 스토리지와 같지만 브라우저를 종료해도 데이터가 사라지지 않는다.

이전에는 무조건 access token을 쿠키에 저장했다. (쿠키밖에 없었다.)
요즘에는 로컬 스토리지에 많이 저장하는 추세로 바뀌고 있다.

왜 쿠키보다 로컬스토리지에 access token을 저장하고 있을까?
1. 쿠키는 모든 HTTP 통신에 함께 들어간다.(쿠키가 불필요할 때도!)
2. 로컬스토리지는 쿠키보다 더 많은 정보를 저장할 수 있다.

하지만 access token을 무조건 로컬스토리지에 저장하는 것이 좋은 것만은 아니니 상황과 목적에 따라 달라져야 한다!

5. 수많은 패키지들
이번 강의에서는 수 많은 패키지를 설치했다.
redux, react-redux, redux-thunk, redux-logger, history, connected-react-router, immer, redux-actions

아는 게 반, 모르는 게 반이다😟

• redux-logger
  
  액션이 발생할 때마다 console에 예쁘게 변화를 찍어주는 미들웨어.
  개발 단계에서만 필요하기 때문에 아래와 같이 환경이 "development'일 때만 보이도록 만들어준다👩🏻‍🎓

  const env = process.env.NODE_ENV;

  if (env === "development") {
    const { logger } = require("redux-logger");
    middlewares.push(logger);
  }

• history
  리덕스 액션 생성 함수에서도 history를 쓸 수 있도록 만들어준다.
  보통 <Route path="/login" component={Login} />처럼 라우팅을 해 주면 Login컴포넌트에서는 props에 자연스럽게 history를 받아왔다.
  하지만 리덕스에서는 history를 사용할 수 없는데 그걸 가능하게 해준다.

  // 일반적으로 history 사용
  const Login = (props) => {
    const handleClick = (e) => {
      history.goBack();  
    }
    
    const sendMain = () => {
      history.push("/")
    }
  }

  // history 라이브러리 이용
  const loginAction = (user) => {
  return function (dispatch, getState, { history }) {
    dispatch(logIn(user));
    history.push("/");
    };
  };

• connected-react-router
  위에 언급한 history 객체를 관리하며 필요에 의해 꺼내쓸 수 있는 라이브러리다.

  1. 리덕스에서 router상태를 동기화 한다.
  2. 함수형 컴포넌트를 지원한다.
  3. redux-thunk나 redux-saga를 통해 히스토리 객체를 dispatch 할 수 있다.

  import {connectRouter} from "connected-react-router";

  const rootReducer = combineReducers({
    user: User,
    router: connectRouter(history),
  });

• immer
  불변성 관리에 도움을 주는 라이브러리.
  리듀서를 작성할 때 불변성을 해치지 않기 위해 코드를 작성하는 것이 어려워지는 순간이 있다.
  그 때 immer를 사용하면 훨씬 간단하게 리듀서를 생성할 수 있다.
  기존에는 새 배열을 만들기 위해 [...state.users, action.user]와 같은 식으로 return 해주었다면 아래처럼 그냥 push를 이용하여 배열을 바꾸어도 문제가 되지 않는다.
  produce로 인해 state 자체에 push되는 것이 아니라 state' 라고 할 수 있는 복제 본에 push가 되고 그 배열로 state에 대입되기 때문이다.

  import produce from "immer";

  function reducer(state, action) {
    switch(action.type) {
      case "CREATE_USER":
        return produce(state, draft => {
          draft.users.push(action,user);
        }
    }
  }

• redux-actions
  리덕스의 액션 관리를 좀 더 편하게 하기 위한 라이브러리다.
  redux-actions에는 createAction과 handleActions 함수가 있다.
  말 그대로 createAction은 액션 함수를 만들 때 아주 쉽도록 도와주고, handleActions는 리듀서에서 switch문 대신 사용할 수 있도록 해 준다.

  import {createAction, handleActions} from "redux-actions";
 
  // createAction
  const login = createAction(LOG_IN, (user) => ({user}));

  // handleActions
  export default handleActions({
    [LOG_IN]: (state, action) => state // format만 확인
  })

오늘 회고

심화 강의를 이틀 만에 들으려니 정말 쉽지 않다😂
우선 모르는 개념이나 라이브러리가 쏟아지고, 신경써야 할 점도 많아졌다.
이제는 코드가 한 눈에 들어오지 않는 지경....

여태까지는 복습의 느낌이 더 강해서 모르는 것은 많이 찾아보고 내 것으로 만들 시간이 많았다면 지금은 진도를 일단 쫓아가는 것이 급하다.

그러다보니 이해하지 못하거나 더 궁금한 내용들이 마음의 짐처럼 남는다.

과제 주간에 마음의 짐을 모두 털고 다 내 지식으로 만들 수 있기를 바랄 뿐이다😞