create-react-app2 CRA 와 Vite CRA 의 사용을 최소화해야 한다는 컬럼과 공식문서에서 추천하지 않는다는 것을 보고 직접 설정을 할 줄 알아야겠구나 싶어서 CRA 가 무얼 해주는지 먼저 알아야겠어서 정리해본다. CRA (Create React App) 손쉽게 최신 리액트 앱을 설정할 수 있도록 하는 명령 초기 환경을 일일히 설정하지 않고도 리액트 프로젝트를 시작할 수 있도록 셋업을 해준 틀과 같다. npx create-react-app 프로젝트명 으로 만들어주었다. Less to Learn - 자동 최적화 Only One Dependency - 복잡한 버전 불일치 없이 원활하게 작동하는지 확인 No Lock-In - ESLint, Webpack, Babel 등 다양한 패키지를 포함 HMR(Hot Module Reloading) - 코.. 2023. 6. 19. SOAPLE 처음 만난 리액트 (1 ~ 5, 6 ~ 7, 8 ~ 9) SPA (Single Page Application) 모던 웹의 패러다임, 단일 페이지로 기존 서버 사이트 렌더링과 비교하여 배포가 간단하며 네이티브 앱과 비슷한 사용자 경험을 제공할 수 있다. 웹 앱에 필요한 모든 정적 리소스를 한번에 다운로드하여 페이지 간 이동 시 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소시킬 수 있다. 전체 페이지가 아닌 변경되는 부분만 갱신하므로 새로고침이 발생하지 않아 네이티브앱과 유사한 UX를 제공할 수 있으므로 모바일 웹에 최적화 된 방식이기도 하다. 하지만 필요한 모든 정적 리소스를 최초에 1번만 다운로드하기 때문에 초기 구동속도가 느린 편이며 SEO(검색엔진 최적화) 문제가 존재한다. SPA은 서버 렌더링 방식이 아닌.. 2023. 3. 5. 이전 1 다음
