웹 어플리케이션 빌드 프로세스_지금 내 프로젝트는 어떻게 빌드되는 중이지?

오늘 귓동냥으로 좀 더 알아봐야겠다고 생각한 부분은 빌드할 때 shell파일에 대한 전반적인 내용이다.
일을 하다보면 이미 세팅되어있던 방식대로 빌드하고 그때그때 에러만 수정하면서 배포하는 경우가 많아서 오늘은 기본적인 부분들부터 찾아보고 정리해보았다.
보충해야할 내용은 있겠으나 일단 조금씩 더 알아보고 기록해보쟈!
(잘못된 부분은 알려주세요!)

❓지금 내 프로젝트에서 빌드할때 shell파일은 어디에 어떻게?

• root의 shell 파일에 실행시키기 위해 필요한 명령어를 적어두고 빌드 전에 쉘스크립트대로 실행시킨 후 빌드한다.

• 그럼 내가 하는 프로젝트에는 shell파일이 어딨지?

• 현재 나는 직접 프로젝트의 yarn 명령어로 진행!

• yarn 명령어는 프로젝트 최상단의 package.json파일을 읽어서 실행되는데
  알게된 김에 dev, stg, production에 따라 명령어 정리하고 dev 스크립트도 단순화해보았다.
  

"build:base": "react-scripts --max_old_space_size=4096 build",
"build-dev": "env-cmd -f .env.development npm run build:base",

• env-cmd -f .env.development : .env.development파일의 환경 변수를 로드하라는 명령어
• react-scripts build : react 프로젝트에서 기본 빌드 스크립트임, 정적 파일로 빌드함
• --max_old_space_size=4096 : node.js의 메모리 제한을 4096MB로 늘린다는 명령어

❓위에서 “정적 파일로 빌드함”에 대해 조금 더 찾아보자면?

• React는 기본적으로 SPA(single page application)로 html, css, javascript로 변환하여 빌드한다는 의미

❓변환하는 과정을 조금 더 자세히 찾아보자면?

1️⃣ 어플리케이션 번들링 & 최적화 진행

• react 코드 (.jsx, .tsx) → javascript로 변환 (=컴파일 & 번들링)
• webpack으로 의존성과 자바스크립트 모듈을 하나의 파일 또는 여러 파일로 병합
• 필요하지 않은 코드 제거
• webpack은 번들링하는 도구이며, react-script에 들어가 있어서 이것만 있으면 됨,
  다만 의존하는 webpack 버전, 관련 패키지는 yarn.lock에서 확인 가능
• 코드 압축 + 난독화 → 파일 크기 최소화

2️⃣ HTML 파일 생성

• 최종적으로 SPA로 동작하기 위한 기본 HTML 파일(index.html) 생성
• 이 html에 번들링된 javascript 파일

* index.html
                
<div id="root">
// root 안에 react 컴포넌트가 렌더링 됨 
</div>

3️⃣ css & 기타 파일 처리

• css 파일은 최적화(압축), 필요한 경우 javascript에 포함됨
• 이미지, 폰트, JSON 파일 등 정적 자산은 최적화된 상태로 bulid/ 디렉토리에 복사

4️⃣ 최적화된 정적 파일들은 bulid/ 디렉토리에 저장되고 이 디렉토리가 서버로 배포

• 참고용
  • asset-manifest.json
  • 4번의 생성된 정적파일들의 맵핑 정보 저장, 서버에서 캐싱 & 정적파일 경로 관리로 사용
  • robots.txt: SEO & 웹 크롤링 설정 파일

      ```jsx
      build/
      ├── static/
      │   ├── css/
      │   │   └── main.12345.css
      │   ├── js/
      │   │   └── main.67890.js
      │   └── media/
      │       └── logo.abcdef.svg
      ```
      

5️⃣ CSR를 통해 실행됨

• 서버 (Nginix, Apache 등)에서 bulid/ 경로의 파일들을 전달
• 브라우저는 서버에게 받은 후 index.html을 읽고 javascript파일 로드 + 렌더링 + DOM에 삽입
• SPA 동작하여 라우팅, UI가 업데이트 됨