리액트는 라이브러리
리액트의 생성방식은 여러가지이다. 프론트엔드 어플리케이션의 전체 틀이되는 프레임워크가 아니라 라이브러리이기 때문이다. 웹사이트를 구성하는 중요 부품중 하나라는 말이다. 즉, 리액트를 사용하는 방법은 여러가지라는 것이다. nextjs 같은것이 대표적인 예이다.
vite로 리액트를 시작할 수도 있고, create-react-app을 사용해서 시작할 수도 있다. 컴퓨터를 만드는데 여러 업체가 조립해서 판매하는 것과 비슷하다. 즉 서로 다른 구성을 가진 프로젝트일 수 있고 템플릿처럼 제공하는 것이다.
리액트의 구동 과정:
- 프로젝트 생성:
create-react-app또는vite와 같은 도구를 사용하여 리액트 프로젝트를 생성한다. - 의존성 설치:
npm install또는yarn install명령어를 사용하여 필요한 패키지를 설치한다. - 트랜스파일링: Babel을 사용하여 JSX와 최신 자바스크립트 문법을 구형 브라우저에서도 호환되는 형태로 변환한다.
- 번들링: Webpack과 같은 모듈 번들러를 사용하여 여러 개의 자바스크립트 파일을 하나의 파일로 묶는다.
- 서버 실행:
npm start또는yarn start명령어를 사용하여 개발 서버를 실행한다. - 브라우저에서 로드: 브라우저에서 개발 서버에 접속하여 리액트 애플리케이션을 로드한다.
- 렌더링: 리액트는 가상 DOM을 생성하고, 변경 사항을 실제 DOM에 반영하여 사용자 인터페이스를 렌더링한다.
빌드된 결과물
dist 폴더 또는 build 폴더에 빌드된 결과물이 생성된다. 이 폴더는 배포를 위한 최종 결과물로, HTML, CSS, JavaScript 파일이 포함되어 있다. 이 파일들은 최적화되어 있으며, 압축되어있다. 브라우저에서 직접 로드할 수 있다.
루트경로의 public과 소스코드내부에 assets 폴더는 정적 파일을 포함하고 있다. 이 파일들은 빌드 과정에서 복사되어 dist 폴더에 포함된다. 예를 들어, 이미지 파일이나 폰트 파일 등이 여기에 포함된다. public은 HTML 파일과 같은 정적 파일을 포함하고, assets는 CSS와 JavaScript 파일을 포함한다. 차이점은 public은 빌드 과정에서 변경되지 않는 정적 파일을 포함하고, assets는 빌드 과정에서 최적화로 변경되는 파일을 포함한다.
