Todo
💻 Typescript 강의 : intro ~ 실습 게임 구현까지 ✔
💻 webpack강의 : file loader ~ webpack 마무리까지 ✔
💻 Redux 강의 : 소개~ redux-ssga F -select로 현재 상태 조회하기까지 ✔
💻 Typescript와 React 함께 사용하기 강의 : 소개~ 마무리까지 ✔
💡 프론트엔드 면접 준비 - google에서 면접 질문 수집하기 ✔
💡 프론트엔드 개발 올인원 패키지 with React 수료증 이메일 보내기 ✔
Error & Solution
What I learned
- 리액트 리덕스 할 일 목록 만들기 흐름
1. $ npx create-react-app learn-redux
$ cd learn-redux
$ yarn add redux
$ code .
2. Redux module 만들기
src/modules/counter.js
todos.js
index.js → root reducer
combineReducers 함수 사용해서 리듀서 합치기
3. Redux store 만들기
src/index.js
4. 리액트 프로젝트에 리덕스 적용할 때는 react-redux 라이브러리를 사용
$ yarn add react-redux
5. src/components/Counter.js
src/containers/CounterContainer.js
▶ 프리젠테이셔널 컴포넌트
리덕스 스토어에 직접적으로 접근하지 않고 필요한 값 또는 함수를 props로만
받아와서 사용하는 컴포넌트
▶ 컨테이너 컴포넌트
리덕스 스토어의 상태를 조회하거나, 액션을 디스패치 할 수 있는 컴포넌트
HTML 태그들을 사용하지 않고 다른 프리젠테이셔널 컴포넌트를 불러와서 사용
7. 크롬 웹 스토어에서 리덕스 개발자 확장 프로그램 설치
→ $ yarn add redux-devtools-extension
8. 할 일 목록 구현하기
components/Todos.js
containers/TodosContainer.js
App.js 렌더링- 리덕스 미들웨어
액션이 디스패치 된 다음, 리듀서에서 해당 액션을 받아와서 업데이트하기 전에 추가적인 작업을 할 수 있다. 주로 비동기 작업을 처리할 때 사용한다.
사용 흐름 정리는 내일...
Thinking
프론트엔드 면접 질문을 수집하면서 취업 준비에 또 다른 막막함을 느꼈다. 강의로 추가 공부도 하고 개인 포폴도 만들어야하는데 면접 준비를 잊고 있었다...!! 면접 질문들을 쭉 보는데 즉각적으로 대답할 수 있는 질문들이 몇 없다는 사실에 좌절.. 취업 준비 기간으로 둔 한달 동안 매일 3~4개씩이라도 준비해서 대비를 해야 겠다. 벼락치기로는 답이 없을 듯하다. Redux 어렵다 어려워.. 반복실습만이 답이겠지.. ㅇㅏ 자ㅇ ㅏ자..
