9/18

https://dev-momo.tistory.com/entry/React-Hooks

why hook

거대하고 복잡한 component해결 : useState를 통해 state를 재사용하고 비교적 덜 무거운 함수형 컴포넌트에 state사용

중복 로직 : component~를 useEffect를 통해 대체

this 미사용

CRUD : create read update delete

https://velog.io/@killi8n/4-2.-React-%ED%8E%98%EC%9D%B4%EC%A7%80-%EA%B5%AC%EC%A1%B0-%EC%83%9D%EC%84%B1.-2tjmc31cra

http://jeonghwan-kim.github.io/2018/07/16/react-app-overview.html

리덕스의 사용 및 구조

현재 구조에서 middleware는 어디서 사용되고 있는걸까?

→ 비동기 로직 구현 → 아직 사용 x

redux thunk - 비동기 로직 사용가능

https://velog.io/@velopert/eslint-and-prettier-in-react

조회>>npm info "eslint-config-airbnb@latest" peerDependencies

airbnb 설치>>yarn add eslint-config-airbnb

>>npx install-peerdeps --dev eslint-config-airbnb

CRA v2를 사용했을시 생략

prettier 설치>>yarn add prettier --dev --exact

>>yarn add eslint-config-prettier

format javascript → 맨위 설정 체크 해제

>> ./node_modules/.bin/eslint --init

Eslint 사용 로드 제공

props사용 eslint제외 - /* eslint-disable react/prop-types */

f1 => eslint fix 키를 통해 쉽게 수정 가능

redux object.assign특징

우리는 state를 변경하지 않았습니다. Object.assign()을 통해 복사본을 만들었죠. Object.assign(state, { visibilityFilter: action.filter })이라고 써도 여전히 틀립니다: 첫번째 인수를 변경하게 되니까요. 여러분은 반드시 첫번째 인수로 빈 객체를 전달해야 합니다. ES7로 제안된 object spread syntax을 써서 { ...state, ...newState }로 작성할수도 있습니다.

default 케이스에 대해 이전의 state를 반환했습니다. 알 수 없는 액션에 대해서는 이전의 state를 반환하는것이 중요합니다.

Object.assign에 관하여

Object.assign()은 ES6의 일부이지만, 대부분의 브라우저에서 구현되지 않았습니다. 폴리필을 사용하거나 Babel 플러그인이나 _.assign()같이 다른 라이브러리의 헬퍼를 사용해야 합니다.

switch와 보일러플레이트에 관하여

switch문은 진짜 보일러플레이트가 아닙니다. Flux의 진짜 보일러플레이트는 개념적인 부분입니다: 변경사항을 보내야 하고, 디스패쳐에 스토어를 등록해야 하고, 스토어가 객체가 되어야 합니다(그리고 유니버셜 앱을 만들때 그 복잡성이 드러나죠). Redux는 이러한 문제들을 이벤트 이미터 대신 순수 리듀서를 사용함으로써 해결했습니다.

많은 이들이 아직도 문서에 switch문을 사용하는가를 보고 프레임워크를 선택한다는건 불행한 일입니다. 만약 여러분이 switch를 싫어한다면 “보일러플레이트 줄이기”에 나온 것처럼 핸들러 맵을 받도록 직접 만든 createReducer 함수를 사용할 수 있습니다.

parser :오류점검 프로그램

​

eslient 오류 -> 파일을 옮길 때 생긴 오류

https://stackoverflow.com/questions/52586594/eslint-error-on-deployment-on-local-server-of-react-web-app

​

I searched where the eslint was with:

npm ls eslint

then I deleted it with:

npm uninstall ls eslint

Finally I ran

npm start

and it worked.

-> 에러 발생 : Error: Cannot find module 'eslint/lib/rules/no-unused-expressions'

-> eslint재설치

->npm install babel-eslint 를 하지말고 거기서 원하는 스펙 Ex)npm install babel-eslint@10.0.1로 설치!

eslint 도 수정하고 npm install하기

로그인 세션 느낌으로 관리 방법 찾기

hook redux관련 폴더 구조 관련 설명 및 골자 코드 공유

현재 이슈 있는 부분 (새로고침 하면 redux store 초기화됨, 내부에서 이동한 url은 view 잘 보이는데 해당 url 다이렉트로 입력하면 view 안 뜸, ex /user/53) 수정 + 로그인 적용된 nav 테스트 해보기

eslint 설정

파일상단에 /* eslint react/prop-types: 0 */

.eslintrc에

"rules": {

"react/prop-types": 0

}

문장위에 //옵션

​

how can i persist redux state tree on refresh

→ use middleware → redux-persist

https://stackoverflow.com/questions/37195590/how-can-i-persist-redux-state-tree-on-refresh

​

https://egghead.io/lessons/javascript-redux-persisting-the-state-to-the-local-storage

방법 설명

blacklist - 이놈만 지속성 제외

whitelist - 이놈만 지속성 유지

오류 발생