[스파르타 _ 리액트 과정] 33일차

et Ji·2022년 12월 14일
0

TIL

목록 보기
38/40

📅 학습 일자 : 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) 기본 폴더 구조 생성
    Untitled

  • 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코드 이미지 바로가기 어플
  • 프로젝트를 할 때는, 실제 서비스되고 있는 웹/앱의 기능을 자세히 살펴보고 참고해보라. 생각보다 구현해야할 기능이 많다.
    • 예) 아이디 찾기, 장기간 미방문 고객에게 메일링 서비스 등
  • 자료 공유가 활발한 영어권의 글, 코드 작성법을 많이 볼 것.

🎯 문제와 해결

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

⁉️ 어려웠던 내용

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

❎ 한 번 더 공부할 내용

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

🔗 출처 및 참고자료

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

0개의 댓글