소개
게시글
질문&답변
2021.01.15
CRA를 사용하지 않았을 경우 React.lazy에 대해...
아 좋은 방법을 제시해주셔서 감사합니다 !! 코드 분할이 이루어지고 있어서인지는 모르겠지만 Light House로 performance를 측정했을 때 꽤나 유의미해 보이는 차이가 확인되기는 하였습니다 !! 다만 network탭에서 lazy loading되는 파일이 확인되지 않다보니, 분할이 안되고 있다고 판단하였습니다 ! ... 제시해주신 두가지 방법으로 더 시도해봐야겠습니다 ㅎㅎ 많은 도움이 되었습니다 ! 정말 감사합니다 ~ 앞으로 나올 강의 또한 유익하게 수강하겠습니다 !
- 1
- 4
- 233
질문&답변
2021.01.15
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 ;
- 1
- 4
- 233
질문&답변
2020.11.08
filter에서 index가 todo객체의 id에 mapping 되는 이유가 궁금합니다 !
아 따로 연관지어 설명해주시지는 않았는데 index가 optional한 매개변수인걸 몰랐네요 .. todo객체의 key값중 하나로 맵핑된다고 착각했습니다..! 사용전에 MDN을 한번 참고하는 습관을 들여야겠네요ㅠㅠ _라는 인수를 통해 가독성을 높여주는 꿀팁도 잘 배워갑니다! 친절한 답변 감사합니다 ㅎㅎ
- 2
- 2
- 199
질문&답변
2020.11.02
7분20초 자꾸 이렇게 뜨면서 오류나오네요
넵 global로 설치되어있는 node_mmodules와 버전이 자꾸 충돌하더라구요 ㅠㅠ 말씀하신대로 해당 모듈만 지우고나니 잘 동작하는 것 같습니다 ㅎㅎ 감사합니다 !!
- 0
- 8
- 178
질문&답변
2020.11.02
React, ReactDOM
사소한 질문에도 친절한 답변 감사합니다 ㅎㅎ ! 열심히 수강하겠습니다~
- 1
- 2
- 170