Category: React

2020
0
TILReact

ReactStudy-10

React Re-Study : 10 SPA 프로젝트 배포 이해하기 serve 패키지로 React Wep App 배포하기 AWS S3 버킷 에 React Wep App 배포하기 node.js express로 React Wep App 배포하기 NginX 서버사이드 렌더링 이해하기 Optimizing Performance React Study with

0
TILReact

ReactStudy-09

React Re-Study : 9 Unit Test facebook/jest jest 3가지 문법 it (= test), describe, expect .not.to jest는 기본으로 한 테스트가 5초로 설정되어 있다. react-component-test 실습 컴포넌트 테스트 짜보기 Button 컴포넌트 enzyme 컨테이너 테스트

0
TILReact

ReactStudy-08

React Re-Study : 8 Ducks Pattern 규칙 connect with hooks 기존방식 -> src/containers/BooksContainer.jsx Hooks방식 -> src/containers/BooksContainer.jsx react-router와 redux함께 쓰기 redux-saga 제너레이터 re

0
TILReact

ReactStudy-07

React Re-Study : 7 시작하기 앞서 정리하기 프리젠테이셜 컴포넌트 와 컨테이너 컴포넌트 프리젠테이셔널 컴포넌트 컨테이너 컴포넌트 이 구조의 장점 어떤걸 컨테이너로 만들어야할까? Async Action with Redux 비동기 처리를 위한 액션 추가 및 dispatch (예시) 리덕스 미들웨어 미들웨어 만들어보기 Redux Dev

0
TILReact

다시 공부하는 React -06-

React Re-Study : 6 Flux 문제점 해결책 Redux 개요 Redux 만들기 Action - 액션 액션 생성자 리덕스의 액션은 어떤 일을 하는가? 액션의 준비과정 Reducer - 리듀서 createStore - 스토어를 만드는 함수 store 사용법 로직을 추가하기 action을 정의 action 생성자를 생성

0
TILReact

다시 공부하는 React -05-

React Re-Study : 5 클래스형 컴포넌트의 단점 Basic Hooks useState useEffect 의존성 배열과 cleanup 의존성 배열을 안쓰고 인자 받기 Custom Hooks useHasMounted vs withHasMounted HOC Hook Additional Hooks - 추가 훅 useReducer useMe

0
TILReact

다시 공부하는 React -04-

React Re-Study : 4 Controlled Component 와 Uncontrolled Component 상태를 가지고 있는 엘리먼트 Controlled Component 와 Uncontrolled Component 구분하기 Q. 만약 input엘리먼트를 hover 시 포커스를 먹일 수 있는 방법은? High Order Component

0
TILReact

다시 공부하는 React -03-

React Re-Study : 3React Component Styling React의 가장 큰 문제. CSS의 스타일이 컴포넌트간 침범이된다. 컴포넌트 스타일링 방법들 Style Loaders PostCSS CSS, SASS CSS SASS SASS 와 SCSS 의 차이 CSS Module, Sass Module CSS Module

0
TILReact

다시 공부하는 React -02-

React Re-Study : 2 Component Lifecycle 변경 전 (< v16.3) Component 생성 및 마운트 Component props, state 변경 componentWillReceiveProps shouldComponentUpdate (✸) componentWillUpdate componentDidUpdate C

0
TILReact

다시 공부하는 React -01-

React Re-Study : 1 리액트를 위한 JS 문법정리 에러는 에러 객체를 상속받아서 throw 한다. (throw new Error) let 은 변경 가능, const 는 불가능 arrow function 함수.bind(this) 디스트럭처링 callback Promise 객체 Generator 객체 React 프로젝트 프로젝트 구성 지식