0. 주제 선정하게 된 배경 :
react 프로젝트 생성할때 CRA를 사용하기도, VITE를 사용하기도 하기 때문에
성능 차이 말고는 사용하는 이유가 별로 다르지 않다고 생각했다.
1. CRA가 하는 역할 :
1-1. 초기 프로젝트 설정
: React앱의 "초기 프로젝트 구조"와 "필수 파일들"을 자동으로 생성해줌
(1) 초기 프로젝트 구조 :
- public 폴더
- src 폴더
- 패키지 관리 파일(package.json)
- 기타 구성 파일 (webpack.config.js, babel.config.js, eslint)
(2) 필수 파일들 :
- index.html
- index.js
- App.js
- package.json
1-2. 개발 서버 제공
: 내장된 개발 서버 제공, 수정내용도 실시간으로 업데이트해줌
개발 서버는 어떤 역할을 하는걸까?
(1) 로컬 호스트에서 실행
: 개발자의 로컬 호스트에서 실행을 함
(2) 실시간 재로딩
: 코드를 수정하고 저장한 후에 브라우저가 자동으로 새로 고쳐짐 (전체 페이지 리로드)
(3) 에러 및 경고 표시
(4) HMR(Hot Module Replacement) 💡💡💡
: 코드를 수정하고 저장한 후, 변경된 모듈만 교체 (변경된 모듈만 교체)
개발 중인 애플리케이션을 다시 로드하지 않고도
모듈 단위로 변경사항을 즉시 적용할 수 있도록 도와주는 기능
일반적으로 개발 환경에서는 코드를 수정하고 저장한 후에 브라우저를 새로고침해서 변경사항을 확인함.
그러나,
HMR를 사용하면 변경된 모듈만 즉시 새로운 모듈로 교체해서
애플리케이션의 상태를 유지한 채로 변경사항을 반영할 수 있다.
// 작동원리
1. 코드 수정 : 개발자가 코드를 수정하고 저장
2. 변경 감지 : 개발 서버가 수정된 파일을 감지하고 해당 파일의 변경사항을 식별
3. 모듈 교체 : 변경된 모듈을 새로운 모듈로 교체. (단, 애플리케이션의 현재 상태 유지 = 초기화시키지 않음)
4. 화면 갱신 : 변경된 모듈만 화면에 다시 렌더링함1-3. 빌드 자동화
: webpack 사용
webpack의 역할
(1) 모듈 번들링
: js, css, image 등의 자원들을 하나의 최적화된 파일로 생성
(2) 로더(Loader)
: babel로더를 사용해서 ES6+코드를 ES5로 변환하고, CSS로더를 사용해서 js코드내에서 css파일을 import할 수 있음
예시 - import './style.css;'
(3) 코드 최적화
: 코드를 압축하고 최적화해서 번들 크기를 최소화함
(4) 환경별 빌드
3. 챗지피티를 활용하여 대화식으로 학습한 내용 :
