header-img
Info :
2
list_img
React :: 빌드 파일 분석 툴 (번들 사이즈 최적화)
TODAY
리액트를 배포하려면 npm run build 를 해야하고, 그 결과로 나온 build 된 js 파일이 생성되게 된다.근데... 이 번들이라고 하는 js 파일의 크기가 크면,SEO 의 단점이라고 할 수 있는 '첫 로딩 속도'가 부각되므로, 번들 사이즈 관리가 중요해지게 됨. 종종 이 번들 사이즈를 검토해주어야 하는데, 이게 얼마나 큰지 또 어디를 확인해야하는지를 어떻게 알 수 있을까? ...흔히 알려져 있는 빌드 파일 분석 툴인 webpack-bundle-analyzer 가 있다. 직관적인 시각 요소를 제공해주지만.. 이거는 또 eject 를 해야하는 위험이 있고,한 번 eject 를 해버리면 되돌리기가 어려워진다. 여기서 잠깐. Ejecteject 의 장점- CRA(Create-React-App) 에서 ..
list_img
React :: 동적 라우팅 (feat. DB 데이터 사용)
2023.11.07
응용 프로그램에서 하던 "메뉴관리"의 개념을 웹에도 도입하는 것이 목적이었음. 사용자(관리자)는 프로그램 내에서 메뉴와 관련된 데이터를 DB에 insert 할 수 있고, 이렇게 만들어진 Data 로 라우팅에도 적용되고, 메뉴바에도 적용되는.. 그런 형태가 최종이었음. React 생명주기 특성 상 어렵다는 답변을 받기만 하던 찰나.. 정 안되면 이 라우팅 시스템을 정리하거나 쉽게 만들어보자는 마음으로 시작하게 되었다. 첫 아이디어 는 react-router-dom v5 문법으로 구현한 아래의 모습 2023.11.03 - [FRONTEND/React] - React :: (Next.js 사용 없이) 해당 폴더의 파일을 동적 라우팅. 아무래도 가장 최신 버전을 써야한다는 생각도 있었고, 외주업체에서 만들어준 ..