📅 학습 일자 : 22. 12. 14

📜 진행 내용

• [과제] 리덕스로 투두리스트 만들기
• [특강] 좋은 개발자의 비밀

---

💡 배운내용

▣ [과제] 리덕스로 투두리스트 만들기

■ 프로젝트 세팅

• 프로젝트 폴더 생성
• 리액트 프로젝트 세팅
  • CRA 사용
    • 터미널 : yarn create-react-app .
      • . 대신 폴더명을 넣어, 프로젝트 폴더 생성과정을 동시에 해도 된다.
        • yarn create-react-app 프로젝트폴더명
• 라이브러리, 패키지 추가
  • Styled-commponents
    • 터미널 : yarn add styled-components
    • 컴포넌트 파일 : import styled from "styled-components";
  • redux 설치
    • 터미널 : yarn add redux react-redux
      • = yarn add redux
        yarn add react-redux

■ 폴더 구조 세팅

• 1) 기본 폴더 구조 생성
  

• 2) src/configStore.js

  src/configStore.js 에 아래 코드 입력

  import { createStore } from "redux";
  import { combineReducers } from "redux";
  
  /*
  1. createStore()
  리덕스의 가장 핵심이 되는 스토어를 만드는 메소드(함수) 입니다. 
  리덕스는 단일 스토어로 모든 상태 트리를 관리한다고 설명해 드렸죠? 
  리덕스를 사용할 시 creatorStore를 호출할 일은 한 번밖에 없을 거예요.
  */
  
  /*
  2. combineReducers()
  리덕스는 action —> dispatch —> reducer 순으로 동작한다고 말씀드렸죠? 
  이때 애플리케이션이 복잡해지게 되면 reducer 부분을 여러 개로 나눠야 하는 경우가 발생합니다. 
  combineReducers은 여러 개의 독립적인 reducer의 반환 값을 하나의 상태 객체로 만들어줍니다.
  */
  
  const rootReducer = combineReducers({}); 
  const store = createStore(rootReducer); 
  
  export default store;

• 3) index.js

  디렉토리의 가장 최상단에 있는 index.js에 아래 코드 입력

  // 원래부터 있던 코드
  import React from "react";
  import ReactDOM from "react-dom/client";
  import App from "./App";
  import reportWebVitals from "./reportWebVitals";
  
  // 우리가 추가할 코드
  import store from "./redux/config/configStore";
  import { Provider } from "react-redux";
  
  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(
  
  	//App을 Provider로 감싸주고, configStore에서 export default 한 store를 넣어줍니다.
    <Provider store={store}> 
      <App />
    </Provider>
  );
  
  // If you want to start measuring performance in your app, pass a function
  // to log results (for example: reportWebVitals(console.log))
  // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
  reportWebVitals();

▣ [특강] 좋은 개발자의 비밀

• 궁금한 부분을 질문할 때, 내가 작업한 코드/공부한 내용 정리와 문제를 해결하기 위해 시도한 방법들과 그 결과들을 정리해서 물을 것.
• 에러메세지를 만났을 때, 바로 검색을 하지말고 먼저 에러 메세지를 읽고 고민한 흔적을 글로 남겨볼 것.
• 내가 만들어낸 것에 대한 스토리텔링을 TIL, WIL에 녹여라. 미래의 내가 봤을 때도 도움이 되고 포트폴리오에도 도움이 된다.
• 실생활에서 필요한 서비스 중에서도 시도해볼만한 작은 프로젝트를 찾아서 만들어보라.
  • 예) 코로나 방문 QR코드 이미지 바로가기 어플
• 프로젝트를 할 때는, 실제 서비스되고 있는 웹/앱의 기능을 자세히 살펴보고 참고해보라. 생각보다 구현해야할 기능이 많다.
  • 예) 아이디 찾기, 장기간 미방문 고객에게 메일링 서비스 등
• 자료 공유가 활발한 영어권의 글, 코드 작성법을 많이 볼 것.
  • medium.com 추천

---

🎯 문제와 해결

• 리덕스로 투두리스트를 만드려니까 에러의 연속이다.
  • 제대로 해결된 게 없어서,, 해결을 하면서 해결방법을 정리해야겠다.

⁉️ 어려웠던 내용

• 리덕스로 투두리스트 만들기

❎ 한 번 더 공부할 내용

• 리덕스로 투두리스트 만들기

---

🔗 출처 및 참고자료

• 스파르타 코딩클럽 - 리액트 숙련 강의