기여하기
기여하기 (Contribute)
Bootstrap 소스에 직접 기여하고 싶을 때, 로컬에서 도구를 설정하고 빌드·테스트를 실행하는 방법을 정리한 문서예요.
출처: 문서
본문
도구 설정 (Tooling setup)
Bootstrap은 문서를 빌드하고 소스 파일을 컴파일할 때 npm scripts를 사용해요. package.json에는 코드 컴파일, 테스트 실행 등을 위한 스크립트가 들어 있어요. 이 스크립트들은 우리 저장소와 문서 밖에서 사용하도록 만들어진 것이 아니에요.
빌드 시스템을 사용하고 문서를 로컬에서 실행하려면 Bootstrap 소스 파일과 Node가 필요해요. 아래 단계를 따라 하면 바로 시작할 수 있어요.
- 의존성을 관리하는 데 사용하는 Node.js를 다운로드해서 설치하세요.
- Bootstrap 소스를 다운로드하거나, Bootstrap 저장소를 fork해서 clone하세요.
- 루트
/bootstrap디렉터리로 이동해서npm install을 실행해 package.json에 나열된 로컬 의존성을 설치하세요.
완료되면 명령줄에서 제공되는 다양한 명령을 실행할 수 있게 돼요.
npm 스크립트 사용하기 (Using npm scripts)
package.json에는 프로젝트를 개발하기 위한 수많은 태스크가 포함되어 있어요. 터미널에서 npm run을 실행하면 모든 npm 스크립트를 볼 수 있어요. 주요 태스크는 다음과 같아요.
| 태스크 | 설명 |
|---|---|
npm start |
CSS와 JavaScript를 컴파일하고, 문서를 빌드한 뒤 로컬 서버를 시작해요. |
npm run dist |
컴파일된 파일로 dist/ 디렉터리를 만들어요. Sass, Autoprefixer, terser를 사용해요. |
npm test |
npm run dist를 실행한 뒤 로컬에서 테스트를 실행해요. |
npm run docs-serve |
문서를 빌드하고 로컬에서 실행해요. |
스타터 프로젝트로 npm을 통해 Bootstrap을 시작해 보세요! Sass & JS 예시 템플릿 저장소에서 자신의 npm 프로젝트에 Bootstrap을 빌드하고 커스터마이즈하는 방법을 볼 수 있어요. Sass 컴파일러, Autoprefixer, Stylelint, PurgeCSS, Bootstrap Icons가 포함되어 있어요.
Sass
Bootstrap은 Sass 소스 파일을 CSS 파일로 컴파일할 때 Dart Sass를 사용해요(빌드 과정에 포함되어 있어요). 만약 자체 에셋 파이프라인으로 Sass를 컴파일한다면 같은 방식을 권장해요. 예전에는 Bootstrap v4에서 Node Sass를 사용했지만, LibSass와 그 위에 만들어진 패키지(Node Sass 포함)는 이제 더 이상 사용되지 않아요(deprecated).
Dart Sass는 반올림 정밀도(rounding precision)를 10으로 사용하고, 효율성 때문에 이 값을 조정할 수 없어요. 우리는 minification 같은 생성된 CSS의 후처리 과정에서도 이 정밀도를 낮추지 않아요. 만약 낮추기로 선택한다면 브라우저 반올림 문제를 피하기 위해 최소 6 정도의 정밀도는 유지하는 걸 추천해요.
Autoprefixer
Bootstrap은 빌드 시점에 일부 CSS 속성에 벤더 접두사(vendor prefix)를 자동으로 추가하기 위해 Autoprefixer를 사용해요(빌드 과정에 포함되어 있어요). 이렇게 하면 주요 CSS를 한 번만 작성해도 되고, v3에 있던 것 같은 벤더 믹스인을 제거할 수 있어서 시간과 코드를 아낄 수 있어요.
Autoprefixer를 통해 지원하는 브라우저 목록은 GitHub 저장소의 별도 파일에서 관리해요. 자세한 내용은 .browserslistrc를 참고하세요.
RTLCSS
Bootstrap은 컴파일된 CSS를 RTL로 변환할 때 RTLCSS를 사용해요. 기본적으로 가로 방향에 영향을 받는 속성(예: padding-left)을 반대쪽으로 바꿔 주는 방식이에요. 이 방식을 사용하면 CSS를 한 번만 작성하고, RTLCSS의 제어(control) 및 값(value) 지시어로 약간의 수정만 하면 돼요.
로컬 문서 (Local documentation)
문서를 로컬에서 실행하려면 Astro가 필요해요. Astro는 현대적인 정적 사이트 생성기로, Markdown과 React 컴포넌트를 조합해서 문서를 빌드할 수 있게 해 줘요. 시작 방법은 다음과 같아요.
- 위 도구 설정을 진행해서 모든 의존성을 설치하세요.
- 루트
/bootstrap디렉터리에서 명령줄에npm run docs-serve를 실행하세요. - 브라우저에서 http://localhost:9001을 열면 끝이에요.
Astro 사용에 대해 더 알고 싶다면 문서를 읽어 보세요.
문제 해결 (Troubleshooting)
의존성 설치에 문제가 생기면 이전 의존성 버전(전역 및 로컬)을 모두 제거한 뒤 npm install을 다시 실행해 보세요.