🔸 Config
- 애플리케이션을 빌드하기 위한 환경 설정 중 모듈 번들링은 무엇이고 왜 필요한가?
: 웹 애플리케이션 기능이 확대되면서 코드가 복잡해지는 결과가 발생하기 때문에, 이를 모듈로 분할 관리해야 할 필요가 있음
: 웹 브라우저 환경은 따로 모듈 번들링 기능을 제공하지 않기 때문에 번들링 과정이 추가적으로 필요함
- 애플리케이션을 빌드하기 위한 환경 설정 중 트리 쉐이킹은 무엇이고 왜 필요한가?
: 사용하지 않는 코드가 번들에 포함되는 경우, 이러한 코드는 번들의 용량을 불필요하게 키우기 때문에 번들 과정에서 제거해야 함
: 이처럼 쓸모없는 코드를 제거하는 트리 쉐이킹을 수행하면 실행 속도를 향상 시킬 수 있음, 그러나 웹 브라우저 환경은 기본적으로 트리 쉐이킹 기능을 제공하지 않음
- 애플리케이션을 빌드하기 위한 환경 설정 중 코드 분할은 무엇이고 왜 필요한가?
: 애플리케이션 규모가 커지면 번들이 함께 커지는 것을 방지하기 위해 코드를 분할해야 함
: 이를 위해 런타임 중에 나눠진 파일을 동적으로 불러와야 하지만, 웹 브라우저 환경에서는 코드 분할을 제공하지 않음
- 애플리케이션을 빌드하기 위한 환경 설정 중 소스맵은 무엇이고 왜 필요한가?
: 번들링한 코드는 사용자가 파악하기 어렵기 때문에, 소스맵을 사용하면 코드가 어떤 원본 파일을 참조하고 있는지에 대한 정보를 제공하여 이를 해결할 수 있음
- 툴 체인은 무엇인가?
: 특정 라이브러리, 프레임워크를 사용하여 애플리케이션 개발을 하기 위해 다양한 도구의 환경 설정을 서로 연결시켜놓는 것을 의미함
🔸 Webpack
- Webpack은 무엇이고 왜 사용하는가?
: Webpack 모듈 번들러를 사용하면 React를 사용한 애플리케이션 개발 빌드 환경을 구성할 수 있음
: 애플리케이션 개발에 필요한 다양한 확장자의 파일들을 번들링해주는 역할을 함
- Webpack 사용 시
target옵션을 왜 지정해야 하고, 어떻게 지정할 수 있는가?:
.browserslistrc파일에 따로 관련 내용을 설정하여target옵션으로 지정할 수 있음
- Webpack 구성 파일 설정 시
entry와output의 경로를 어떻게 절대 경로로 설정할 수 있는가?:
resolve메서드를 사용하여 경로를 지정할 수 있고, 경로에 따로 이름을 붙일 수 있음
webpack-cli패키지 설치 시 종속적으로 포함된webpack-merge는 어떻게 사용할 수 있는가?: 객체를 깊은 복사하여 합성해주는 역할, 이를 통해 Webpack의 다양한 구성 파일을 하나로 병합할 수 있음
- Webpack으로 소스맵을 어떻게 설정할 수 있는가?
:
devtool옵션의 값을 설정, 공식 문서에devtool을 검색하여 다양한 옵션 중 적절한 것을 적용하면 됨
Webpack으로 생성할 수 있는 개발 서버는 왜 사용하는가?
소스맵 생성 시 속도 이슈가 발생할 수 있으므로, 소스맵은 개발 서버에 등록하여 메모리 상에만 존재하도록 할 수 있음
