클라이언트 빌드

1. 클라이언트 빌드

웹 애플리케이션의 클라이언트 측 코드(HTML, CSS, JavaScript 등)를 준비하는 과정이다. 소스 코드의 컴파일, 번들링, 변환, 최적화, 테스트, 배포 등을 포함한다. 이 때 사용자에게 빠르고 효율적인 웹 앱을 제공할 수 있도록 여러 기술이 적용된다.

2. 빌드 과정(w/Babel&Webpack)

1. 컴파일(Compilation): Sass ➜ CSS, TypeScript ➜  JavaScript, ES6+ ➜ ES5 이하(transpiling). 소스 코드를 기계어로 변환.
2. 번들링(Bundling): 모든 코드, 자원 및 의존성을 하나의 번들로 결합하는 작업. 작게 분할된 코드 모듈(code splitting)과 자원들로 진입점(entry point)을 기준으로 한 의존성 트리를 구축함. 이 때 사용되지 않는 코드는 번들에 포함되지 않음(tree shaking). 또한 HTML, 이미지, 폰트, 파일 등의 정적 자산도 포함함. node_modules 폴더도 번들링에서 제외되고 애플리케이션에 직접적으로 필요한 모듈만 트리에 포함됨. 그리고 node_modules 내의 패키지와 초기 로딩에 필요치 않은 모듈은 런타임에 필요시 동적으로 불러오게 됨(Lazy Loading).
3. 최적화(Optimization): 번들링에서 적용된 코드 스플리팅, 트리 셰이킹 등의 기법과 각종 파일 압축으로 파일 크기를 줄임. 여기에는 웹팩의 UglifyJS 플러그인(JS 압축), 이미지 최적화 도구, CSS 압축 도구 등이 사용됨.
4. 캐싱(Caching): 이전에 다운로드한 파일을 재사용하여 네트워크 요청을 줄이는 방법으로 빌드 시간을 최적화.서버 설정이나 웹 서비스 워커를 통해 처리됨.
5. 폴리필 적용
6. 코드 실행

3. 중요성

• 성능 최적화: 코드를 압축하고 작게 번들링하는 방법으로 최적화. 작은 파일을 최소한의 수로 요청하여 빠른 페이지 로딩과 사용자 경험을 제공함
• 크로스 브라우징 문제 해결: 다양한 브라우저에 대응할 수 있도록 코드의 호환성을 높임
• 개발 효율성: 빌드 프로세스 자동화로 개발 친화적임
• 디버깅 및 테스트: 테스트 버전의 코드를 생성하여 디버깅 및 테스트를 용이하게 함으로써 코드 퀄리티 향상

4. 빌드 도구

1) 바벨(Babel)

• 컴파일러(Compiler):
  • 고수준 프로그래밍 언어로 작성된 코드를 저수준 프로그래밍 언어로 번역하는 역할
  • 바벨은 모던 자바스크립트 코드를 구형 브라우저에서도 동작할 수 있는 코드로 변환해주는 도구. 과거의 자바스크립트 버전을 지원하지 않는 브라우저에서도 최신 기능을 사용할 수 있게 해줌
• 기능: 
  • 트랜스파일링(Transpiling): 구형 브라우저에서도 코드가 실행될 수 있도록 최신 JavaScript 문법으로 작성된 코드를 하위 버전의 JavaScript로 변환하는 과정
  • 폴리필(Polyfilling): 구형 브라우저에서도 최신 기능을 사용할 수 있도록 추가 기능을 제공함. 예를 들어, Promise, fetch API 등의 최신 메서드를 함수로 구현하여 여러 브라우저 상황에 같은 기능을 사용할 수 있도록 함
• 설정 파일 (`.babelrc`)

2) 웹팩(Webpack)

• 번들러(Bundler):
  • 여러 개의 모듈을 하나로 묶어주는 도구. 각 파일이나 모듈간의 의존성을 파악하여 하나의 번들로 만들어줌으로써 여러 개의 파일을 하나로 합치고, 프로젝트의 구조를 단순화함.
  • 웹팩은 모듈 번들러로, 프로젝트의 모든 자원을 모듈로 보고 그 의존 관계를 파악하여 하나 또는 여러 개의 번들 파일로 묶어주는 역할을 함. 이를 통해 필요한 모든 파일들을 관리하고, 브라우저에서 사용할 수 있는 정적 파일로 변환해 줌.
• 기능: 다양한 기능을 통해 성능 최적화를 지원함
  
  • 모듈 번들링(Module Bundling): 프로젝트의 모든 자원을 모듈로 취급하고, 그 의존 관계를 파악하여 번들 파일로 묶어줌
  • 코드 분할(Code Splitting): 애플리케이션의 코드를 여러 청크(chunk)로 분할하여 로딩 성능을 최적화함
  • 트리 셰이킹(Tree Shaking): 사용되지 않는 코드를 제거하여 번들 크기를 최소화하는 기능을 제공함. 이를 통해 불필요한 코드를 제거하고 최종 번들의 크기를 줄일 수 있음
  • 레이지 로딩(Lazy Loading): 코드 스플리팅과 함께 사용하면 효과적임. 필요한 시점에만 모듈을 로딩해서 애플리케이션의 초기 로딩 시간을 줄여주는 역할을 함
  • 로더 플러그인(Loader Plugin): 다양한 로더와 플러그인을 제공하여 개발자가 프로젝트에 필요한 기능을 추가하고 확장할 수 있게 함
• 설정 파일 (`webpack.config.js`)

3) Parcel

웹 애플리케이션 번들러

5. 빌드 방식

1. 정적 빌드(Static Build): 소스 코드가 변경되지 않는 한, 빌드 결과물이 변하지 않는 방식
2. 동적 빌드(Dynamic Build): 소스 코드가 변경될 때마다 빌드 결과물이 다시 생성되는 방식

6. 같이 보기

• 프리티어(Prettier): 코드 포매터
• 린트(Lint): 웹 표준 준수를 위한 정적 분석 도구. ESLink는 JS용 린트