Today 공부
- 빌드
- React 프로젝트 생성 툴
- 빌드 툴
정적 웹사이트의 빌드
고도화된 클라이언트 웹 앱은 수많은 모듈로 이뤄져 있습니다. 이처럼 수많은 모듈을 하나로 묶어주는 작업을 번들링(bundling)이라고 하며, 이 과정에서 JSX 파일과 같이 브라우저에서 자체적으로 해석이 불가능한 다양한 보조 기술들을 브라우저가 해석할 수 있도록 만들어주는 작업들이 수반되었습니다. 이러한 과정을 통칭해 "소프트웨어 빌드"라고 부릅니다. 소프트웨어 빌드는, 소스코드를 실행 가능한 결과물로 변환하는 작업을 의미합니다.
다양한 모듈은 정적 파일들로 결과가 만들어져야만 하며, 따라서 이러한 빌드 과정은 배포에 필수적입니다.
React 프로젝트 생성 툴
React 생태계에는 다양한 프로젝트를 생성 툴이 존재합니다. 이러한 프로젝트 생성 툴의 대표적인 예
- Create React App
--> react-scripts라는 모듈이 사용
Create React App 등으로 생성한 React 프로젝트의 경우에는, npm build 명령어가 package.json 파일에 포함되어 있으며, 이는 모듈을 정적인 파일로 만들어주게 됩니다.
- Next.js
--> next 모듈이 사용
빌드 툴
- webpack : 모듈 번들러
- babel : TypeScript, JSX 등과 같이 브라우저가 지원하지 않는 언어를 JavaScript로 바꿔주는 컴파일러
- ESLint : 자바스크립트 Code convention 및 문법 검사기
- Sass, less: CSS Preprocessor
