코드 스플리팅, 토스트 전역으로 뿌리기

JSDoc 문법 직접 사용해보기.

https://www.youtube.com/watch?v=ORmnc-hLrYs
(코딩애플 참고)

유지보수 할때 혹은 협업할 때 이런식으로 달아주면 도움이 되지않을까 싶어서 한번 써보았다.
단점은 코드가 길어진다는 단점이 있는데, 협업을 위해서라면 괜찮지않을까? 궁금하다

코드 스플리팅

https://ko.reactjs.org/docs/code-splitting.html
(리액트 공식 문서 참고)

코드스플리팅을 통해 로딩 속도를 빠르게 할 수 있다고 하셔서 한번 도전해보았다.

일단 바로 코드를 썼기때문에 그 부분에 대해선 지저분함이 있어서 다른 파일을 하나 선언하고 함수를 만들어서 코드스플리팅을 트라이 해봐야겠다.

코딩애플에서 배운
https://www.youtube.com/watch?v=j0XGpSLvgmE
네트워크 디버깅을 활용하여 체킹하였더니,

• 변경 전
  DOMContentLoaded: 1.28초
  로드: 1.68초

• 변경 후DOM
  ContentLoaded: 1.37초
  로드: 1.72초

성능이 떨어졌다.
내가 추측하기에 애매하게 하나만쓰면 효과가 떨어진다고 생각이 들어서
여러개를 더 해봤는데 오히려 성능이 떨어졌다.
좀 더 탐구가 필요한 부분이다.

토스트 전역으로 뿌리기

토스트를 일일이 하나씩 선언하는게 번거롭고 코드가 지저분해지는거 같아서 전역기능으로 변경하였다.

const withLayout = (Component: FC): JSX.Element => {
  return (
    <>
      <Header />
      <Component />
      <Footer />
      <ToastContainer />
     </>
   );
 };

그런데 APP.tsx 선언하였더니, 줄이 길어지고 직관적이지 못한거같아서 파일을 따로 파서 선언하였다.
전역적으로 toast를 사용한 코드들을 줄여 줄 수 있었고, app.tsx 직관적으로 수정 하였다.

벨로그를 배우는 중인데 스크린샷이 이상해서 찾아보니 이런 기능이 있었다.
앞으로 스크린샷을 좀 더 이쁘게 찍을 수 있겠다.

벨로그 사용법을 좀 더 공부해야겠다.