CRA를 사용하지 않았을 경우 React.lazy에 대해...

아 좋은 방법을 제시해주셔서 감사합니다 !! 코드 분할이 이루어지고 있어서인지는 모르겠지만 Light House로 performance를 측정했을 때 꽤나 유의미해 보이는 차이가 확인되기는 하였습니다 !! 다만 network탭에서 lazy loading되는 파일이 확인되지 않다보니, 분할이 안되고 있다고 판단하였습니다 ! ... 제시해주신 두가지 방법으로 더 시도해봐야겠습니다 ㅎㅎ 많은 도움이 되었습니다 ! 정말 감사합니다 ~ 앞으로 나올 강의 또한 유익하게 수강하겠습니다 !

CRA를 사용하지 않았을 경우 React.lazy에 대해...

아 옮기다가 오타가 있었네요 ㅠㅠ 죄송합니다 !! Suspense와 Lazy를 사용할 때는 CRA로 만든 프로젝트가 아닌 경우에도 웹팩 설정이 따로 필요없다고 받아들여도 괜찮을까요!? 따로 웹팩 설정을 하지않고 진행한 후 네트워크 탭을 통해 확인해보았는데, 제대로 스플리팅이 이루어지지 않는것 같아서요 ! (강의에서처럼 해당 라우트에 접근하는 시점에 chunk파일을 받아와야하는데 딱히 받아오지 않는걸 보니 첫 로딩때 다 받아오는것 같습니다 ㅠㅠ) 바쁘시겠지만 조금만 더 상황을 구체적으로 말씀드리고 조언을 구하고 싶은데 ... 한번만 더 읽어봐주시면 정말 큰 도움이 될 것같습니다 .. ! 아래와 같이 작성한 후 기대한 것은 라우트의 path에 해당하는 주소로 접근할 경우에 그에 해당하는 컴포넌트가 동적으로 로딩되는 것이었습니다. ( 강의에서 리스트페이지와 뷰페이지처럼 ...) 제가 고려한 사항은 아래와 같이 두 가지였습니다. 1. default로 export된 컴포넌트여야 한다. 2. chunk파일로 스플릿되기 위해 webpack에 어떤 설정이 필요한가? 2번 사항에 대해서는 따로 설정해줄 것이 없다라고 하셨고, 1번 사항은 잘 지켜서 export 하였는데 어떠한 오류도 없지만 제대로 동적로딩이 이루어지지도 않는 것 같습니다... 혹시 제가 빼먹은 고려사항이 있을까요 !? 서칭을 해봐도 lazy를 사용할 때에 대한 답을 찾기가 힘들어서 결국 또 질문드립니다ㅠㅠ 감사합니다 !! import React, { lazy, Suspense } from 'react'; import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; import PaymentProvider from './store/PaymentMethod/paymentMethodContext'; import DateInfoProvider from './store/DateInfo/dateInfoContext'; import TransactionInfoProvider from './store/AccountBook/accountBookDataContext'; import ThemeProvider from './store/Theme/themeContext'; import './app.scss'; import GithubLoginProcess from './pages/Login/GithubLoginProcess'; import NaverLoginProcess from './pages/Login/NaverLoginProcess'; const LoginPage = lazy(() => import('./pages/Login')); const CalendarPage = lazy(() => import('./pages/Calendar')); const AccountBookListPage = lazy(() => import('./pages/AccountBook')); const TransactionPage = lazy(() => import('./pages/transaction')); const ChartPage = lazy(() => import('./pages/Chart')); const SettingPage = lazy(() => import('./pages/SettingPage')); const App = () => { if (!localStorage.getItem('theme')) { localStorage.setItem('theme', 'dark'); } return ( ThemeProvider> DateInfoProvider> TransactionInfoProvider> PaymentProvider> Router> Suspense fallback={div>Loading...div>}> Switch> Route path="/" component={AccountBookListPage} exact /> Route path="/login" component={LoginPage} exact /> Route path="/auth/github" component={GithubLoginProcess} exact /> Route path="/auth/naver" component={NaverLoginProcess} exact /> Route path="/calendar" exact> CalendarPage /> Route> Route exact path="/transaction" component={TransactionPage} /> Route path="/chart" component={ChartPage} exact /> Route path="/setting" component={SettingPage} exact /> Switch> Suspense> Router> PaymentProvider> TransactionInfoProvider> DateInfoProvider> ThemeProvider> ); }; export default App;

filter에서 index가 todo객체의 id에 mapping 되는 이유가 궁금합니다 !

아 따로 연관지어 설명해주시지는 않았는데 index가 optional한 매개변수인걸 몰랐네요 .. todo객체의 key값중 하나로 맵핑된다고 착각했습니다..! 사용전에 MDN을 한번 참고하는 습관을 들여야겠네요ㅠㅠ _라는 인수를 통해 가독성을 높여주는 꿀팁도 잘 배워갑니다! 친절한 답변 감사합니다 ㅎㅎ

7분20초 자꾸 이렇게 뜨면서 오류나오네요

넵 global로 설치되어있는 node_mmodules와 버전이 자꾸 충돌하더라구요 ㅠㅠ 말씀하신대로 해당 모듈만 지우고나니 잘 동작하는 것 같습니다 ㅎㅎ 감사합니다 !!

React, ReactDOM

사소한 질문에도 친절한 답변 감사합니다 ㅎㅎ ! 열심히 수강하겠습니다~