minseob

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

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

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

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

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

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

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

<p>사소한 질문에도 친절한 답변 감사합니다 ㅎㅎ !&nbsp;</p>
<p>열심히 수강하겠습니다~</p>

React, ReactDOM

<p>안녕하세요 !</p>
<p>새로운 폴더에서 진행을 하였는데,&nbsp;</p>
<p>전역에 설치되어있는 node_modules와 충돌이 있는것 같습니다 ㅠㅠ&nbsp;</p>
<p>(finder에서 컴퓨터로 이동하고,&nbsp; 사용자로 이동하면 존재하는 node_modules입니다 !!)</p>
<p>해당 폴더를 아예 삭제해 버리는것이 문제가 되지 않을까요 !?</p>
<p></p>

<p>같은 에러가 발생했는데&nbsp;</p>
<p>어떻게 해결하셨는지 궁금하네요 ! ...</p>
<p>별도에 설치되었던걸 삭제하고 yarn start시 해결되기는 하는데 이런식으로 해결하는 것이 맞는지 궁금합니다 ㅠㅠ</p>

<p>궁금했던 점이 완벽하게 해결되었습니다 ㅠㅠ&nbsp;</p>
<p>감사합니다 !!&nbsp;</p>

minseob

投稿