[React] - 18) 프로젝트 빌드하기(+코드 스플리팅)

안녕하세요, 오늘은 완성된 프로젝트를 빌드하는 것에 대해 포스팅하겠습니다.

 

사실 프로젝트를 빌드하는 것은 간단합니다, 예제 프로젝트를 하나 만들어서 다음과 같이 진행해 봅시다.

 

$ yarn create react-app build-test
$ cd build-test
$ yarn build

 

그러면 이제 프로젝트 루트 폴더에 다음과 같은 파일이 생성될 것입니다.

 

프로젝트가 Index.html으로 빌드되었습니다. 이 yarn build 명령어 하나로,

프로젝트에서 사용되는 자바스크립트 파일 안에서 불필요한 주석, 경고 메시지 , To-do, 공백 등이 삭제되어 파일 크기를 최소화하고,

브라우저에서 JSX 문법이나 다른 자바스크립트 문법이 원활히 시행되도록, 브라우저에 맞게 변하기도 합니다.

 

그리고, 기본적으로 yarn create react-app으로 프로젝트를 만들면 로고 이미지 파일이 포함되었죠?

그런 이미지, 사운드 같은 정적 파일이 있다면 해당 파일을 위한 경로도 생성됩니다. 실제로 저 static 폴더를 열어 보면,

js, css로 나뉘어 수많은 자바스크립트 파일이 하나로 합쳐지고, css 파일들도 하나로 합쳐지게 됩니다.

 

이러한 작업을 해주는 것이, 리액트를 처음 사용할 때 만났던 웹팩이라는 것인데요.

웹팩 설정에서 Chunks 기능이 작동하여 여러 파일들을 따로 분리시켜 효율적으로 캐싱해 줍니다.

실제로 static을 열어보면 자주 바뀌는 코드, main 코드 등등이 알아서 나뉘어 효율적으로 분리되어 있을 것입니다.

 

이렇게 파일을 분리하는 작업을 '코드 스플리팅'이라고 합니다.

지금은 CRA(create-react-app)으로 만들어진 아주아주 작고 기본적인 코드만 빌드되었기 때문에 파일의 크기가 아주 작습니다만,

프로젝트의 규모가커지면 A페이지에서 B,C,D 페이지에서 사용할 정보까지 모두 로드하면서 파일 크기가 비효율적으로 커집니다.

 

이런 문제점을 해결해 주는것이 코드 비동기 로딩입니다.

코드 비동기 로딩이란 당장에 필요한 코드만 로드하고 필요하지 않은 것은 나중에 로드하는 방법인데요.

이를 이용하면 A 페이지에 접근할때는 A 페이지에 필요한 코드만 로딩하고, B에서 필요한 코드는 A->B로 넘어갈 때 로딩하게 됩니다.

 

이 점은 다음에 포스팅 하도록 하겠습니다.