프론트엔드 첫걸음

https://youtu.be/0awA5Uw6SJE Redux Toolkit Tutorial 9강 //import redux from 'redux'; const redux = require('redux'); const createStore = redux.createStore; const bindActionCreators = redux.bindActionCreators; const combineReducers = redux.combineReducers; //상수를 만들어 놓으면 액션 재사용시 오타 방지할 수 있다. //액션 정의 const CAKE_ORDERED = 'CAKE_ORDERED'; const CAKE_RESTOCKED = 'CAKE_RESTOCKED'; const ICECREAM_ORDERED..

https://youtu.be/0awA5Uw6SJE Redux Toolkit Tutorial 2-4강 npm init -y package.json 파일 생성 npm install redux redux package 설치 이 강의에서는 케잌샵 시나리오를 리덕스에 비유한다. Entities Activities 샵 - 선반에 케이크를 저장 주인 - 카운터에 있음 손님 - 매장 입구에 있음 손님 - 케이크를 주문함 주인 - 선반에서 박스를 포장함 (케이크 재고 파악등을 위해 ) 영수증을 만든다 리덕스 핵심개념 리덕스의 핵심개념을 케잌샵 시나리오에 비유하여 설명한다. 케이크 샵 시나리오 Redux 목적 샵 - 케이크를 안전하게 보관 Store - 애플리케이션의 State를 안전하게 유지한다. 애플리케이션의 Sta..

See the Pen overflow : hidden by JEONG (@cona) on CodePen. 부모요소와 자식요소의 border 가 겹쳤을때 자식요소의 margin이 작동하지 않는다. -margin collapse 이 때 margin collapse를 피하는 방법은 여러가지가 있다. 대표적으로 부모요소에 padding : 1px; 을 주거나 border: 1px solid black; 을 주는것이다. 그외에도 새로운 블록서식컨텍스트를 생성하는 방법이 있다. BFC가 생기는 조건 html root 태그 (body 태그는 만들어지지 않는다) none을 제외한 float position: fixed, absolute display: inline-block, table, table-cell, tabl..

https://youtu.be/0awA5Uw6SJE - Redux is for Javascript applications 리덕스는 리액트에 국한되는 것이 아니다. 앵귤러나 뷰, 자바스크립트에도 사용할 수 있는 자바스크립트 애플리케이션을 위한 라이브러리다. -Redux is a state container State는 앱의 모든 각각의 컴포넌트들이 공유하는 상태를 의미한다. 리덕스는 앱의 State를 저장하고 관리한다. -Redux is Predictalble 리덕스는 애플리케이션이 업데이트 될 때 State 관리를 쉽게 한다. 예측가능하고 테스트 가능한 코드를 작성하도록 돕는다. -Redux Toolkit Redux의 구성이 복잡하고, 코드를 작성하기 위한 코드(boilerplate code)가 많이 필..

() => { return } 의 생략은 () => 이다. 옳은 코드 {value => {value.color} } 잘못된 코드 {value => { {value.color} } } immer의 produce 함수는 return 반환하지 않는 void 함수이다. 옳은 코드 const onChange = useCallback( (e) => { const { name, value } = e.target; setForm( //immer+useState함수형 업데이트 produce((form) => { form[name] = value; }) ); }, // [form] [] //상태 form대신 함수받으니까 의존성배열에 form 넣을 필요 없음 ); 잘못된 코드 const onChange = useCallba..

리액트를 다루는 기술 15장 https://ko.reactjs.org/docs/context.html#caveats context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. context 사용 시점 - 전역적인 데이터 공유 - 로그인한 유저, 테마, 선호하는 언어 등 - context를 사용하면 컴포넌트를 재사용하기가 어려워지므로 꼭 필요할 때만 써야한다. React.createContext const MyContext = React.createContext(/*defaultValue*/{color: 'black'}); 새 컨텍스트를 만들 때는 creactContext함수를 사용하고, 함수의 파라미터로 해당 Context의 기본상태를 지정한다...

리액트를 다루는 기술 12장 1. immer 설치 yarn add immer 2. immer 사용 첫번째 파라미터로 수정하고 싶은 상태, 두번째 파라미터로 상태를 어떻게 업데이트할지 정의하는 함수를 받는다. 두번째 파라미터로 전달되는 함수 내부에서 원하는 값을 변경하면 , immer 함수가 불변성 유지를 대신하면서 새로운 상태를 생성해준다. import prodece from 'immer'; const nextState = produce(originalState, draft => { draft.somewhere.deep.inside 5;f }) 3. immer 사용 예시 import React, { useState, useCallback, useRef } from 'react'; import produc..

리액트를 다루는 기술 11장 8절 설치 yarn add react-virtualized TodoList.js react-virtualized 사용 전 import React from 'react'; import TodoListItem from './TodoListItem'; import './../css/TodoList.css'; const TodoList = ({ todos, onRemove, onToggle }) => { return ( {todos.map((todo) => ( ))} ); }; export default TodoList; react-virtualized 사용 후 import React, { useCallback } from 'react'; import { List } from 're..

불변성의 필요성 react에서 기존 데이터를 수정할 때 기존의 객체를 수정하는 대신 새롭게 객체를 만들어 교체해주는 방식으로 진행한다. 그래야 React.memo를 사용했을 때 props 변화 여부를 알아내 리렌더링 성능을 최적화할 수 있기 때문이다. const onToggleHandler = useCallback((id) => { dispatch({ type: 'REMOVE', id }); setTodos((todos) => todos.map((todo) => todo.id === id ? { ...todo, checked: !todo.checked } : todo, ), ); }, []); - { ...todo, checked: !todo.checked } 로 새롭게 객체를 만들어 줌 기존의 값을 수..

리액트를 다루는 기술 10장, 11장 1. 임의로 많은 데이터 입력하기 function createBulkTodos() { const array = []; for (let i = 0; i { const [todos, setTodos] = useState(createBulkTodos); const nextId = useRef(2501); useState 안에 넣는 초기값에 함수 createBulkTodos() 라고 넣지 않고, createBulkTodos 함수를 넣으면 컴포넌트가 처음 렌더링 될 때만 creat..