210405_TIL

seungyeon·2021년 4월 5일
0

TIL

목록 보기
48/64

IM: DAY 43

Redux : DAY ONE
몹시몹시 행복한 날 💕💕💕

오늘 한 일

  • Redux 학습
  • cmarket-redux sprint (기본 과제 제출 완료)
  • 사이드 프로젝트: super-village 작업

Redux Achievement goals

  • 상태 관리 라이브러리가 왜 필요한지 이해할 수 있다.
  • Redux (혹은 Flux Pattern)에서 사용하는 Action, Reducer 그리고 Store의 의미와 특징을 이해할 수 있다.
  • Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해할 수 있다.
  • Presentational 컴포넌트와 Container 컴포넌트의 개념을 이해할 수 있다.
  • Redux hooks(useSelector, useDispatch)를 사용해 store 를 업데이트할 수 있다.

기억할 것

Redux

오늘 학습한 리덕스에 대한 내용들을 블로그 글로 정리해보았다.
👉 [React] Redux 기초

Object.assign()

열거할 수 있는 하나 이상의 source 객체로부터 target 객체로 속성을 복사할 때 사용. target 객체를 반환한다.

Object.assign(target, ...sources)
const target = { a: 1, b: 2 }; // mutable -- 여기에 source가 병합되어 리턴된다.
const source = { b: 4, c: 5 }; // immutable

const returnedTarget = Object.assign(target, source);

console.log(source); // output: { b: 4, c: 5 }
console.log(target); // output: { a: 1, b: 4, c: 5 }
console.log(returnedTarget); // output: { a: 1, b: 4, c: 5 }

Element.getBoundingClientRect()

화면(viewport)을 기준으로 특정 엘리먼트의 위치 값을 구하는 방법
DOM 메소드 Element.getBoundingClientRect()을 사용하면 된다. 사용법은 아래와 같다.
대부분의 브라우저에서 모두 지원한다. (IE 에서는 x, y 값 구할 수 없음)

const domRect = element.getBoundingClientRect();
/*
domRect = { x, y, left, right, top, bottom, width, height };
*/

내일 할 일

  • Toy Problem
  • cmarket-redux sprint
    • Presentational 컴포넌트와 Container 컴포넌트의 개념 학습
    • Redux hooks(useSelector, useDispatch)를 사용해 store 업데이트 하기
    • Pair: cmarket-hooks 설명하기

🔖 북마크

0개의 댓글