기억하기 위한 기록

롸? 나왜 빈화면..? 후... 빈화면 해결방법을 가져오겠음..

1. npm i redux react-redux redux-saga redux-devtools-extension redux-actions 패키지 설치 2. 설치되지 않은 패키지들 추가로 설치 npm i @types/react-redux @types/redux-actions -D 3. 뉴폴더 & 뉴파일 src > redux > modules 폴더 생성 modules > auth.ts(인증관리) , reducer.ts(root 리듀서) 파일 생성 redux > create.ts 파일생성 (스토어를 만드는 역할을 하는 파일) 4. 스토어를 만드는 로직 작성 (create.ts)

라우팅을 설정하는 중에 오류가 났다. 먼저는 Switch 부분에서도 오류가 났었는데, 서칭해보니 버젼 때문에 일어나는 문제 같아서 Switch를 Routes로 변경하니 해결되었다. 그다음은 exact, component에서도 오류가 났다. 그래서 온라인강의 질문에 물어보니 해당 문제도 버전 문제같다고 했다. 코드 수정 전 코드수정 후 오류 없이 라우팅 할 수 있었다. 다만 notfound페이지만 로드되지 않는게 왜때문인지 아직 모르겠다.

리액트는 렌더링시 오류가 발생할 경우 오류가 발생했떤 일부 컴포넌트만 렌더링을 하지않는 것이 아니라 전체 화면 모두를 아예 렌더링하지 않는다. 잘못된 화면을 사용자에게 보여주는 것 보다는 아예 보여주지 않는것이 더 나은 사용자 경험이라는 판단에서이다. 오류를 만나면 흰화면을 보여주는 것이 그 떄문이다. 예기치 못한 오류가 발생할 경우에 대한 대비책으로서 적어도 흰화면보다는 준비도니 시스템 장애화면을 보여주는 것이 조금더 나은 UX임에는 분명하다. 이렇게 시스템 장애 화면을 따로 정의하여 보여주고자 한다면, 아래 ErrorBoundary 컴포넌트를 이용할 수 있다. ErrorBoundary는 클래스 컴포넌트의 componentDidCatch 생명주기 함수를 이용하여 아래와 같이 작성할 수 있다. 나는 먼저..