부트스트랩으로 애플리케이션 개발 속도 향상

부트스트랩은 가장 훌륭하고 가장 많이 사용되는 HTML/CSS/JS 프론트엔드 프레임워크 중 하나입니다. 웹사이트를 만든 거의 모든 웹 개발자는 이 인기 있는 프레임워크에 대해 들어봤을 것입니다. 많은 기성 구성 요소와 리소스를 제공하므로 Bootstrap은 애플리케이션 개발 속도를 크게 높일 수 있습니다.

모든 훌륭한 개발자는 개발 프로세스에서 매 순간을 절약하는 데 관심이 있습니다. 효율적이라는 것은 더 빠른 배포를 의미합니다. 더 빠르고 더 자주 배포할수록 최종 사용자는 더 나은 제품을 더 빨리 얻을 수 있습니다. 따라서 프로세스와 전략을 계획하는 데 몇 시간 또는 며칠을 투자하면 몇 분이 아니라 많은 시간을 절약할 수 있습니다.

저는 개인적으로 지난 4년 동안 프로젝트의 90%에서 이 프레임워크로 작업했습니다. 이 기사에서는 Bootstrap의 뛰어난 기능을 놓치지 않고 애플리케이션 개발 속도를 높이는 데 도움이 되는 몇 가지 팁을 공유하고자 합니다.

부트스트랩 이해하기

시작하기가 매우 쉬운 프레임워크이지만 첫눈에 단순함에 속지 마십시오. 프로젝트에 돌입하기 전에 프레임워크를 사용하고 인프라의 핵심 부분과 흥미로운 구성 요소에 대한 정보를 얻는 데 시간을 할애하십시오. 이것은 10가지 가장 일반적인 부트스트랩 실수를 피하는 데 도움이 됩니다.

Bootstrap 사이트의 문서를 읽는 데 한 시간을 할애하거나 Toptal의 블로그 What is Bootstrap?의 훌륭한 게시물에서 자세히 알아보십시오. 무엇을, 왜, 어떻게에 대한 짧은 자습서. 그리고 scotch.io에서 당신이 모를 수도 있는 Bootstrap 3 Tips and Tricks의 훌륭한 기사입니다.

문서 읽기가 지루한 작업이라고 생각하고 대신 일부 코드를 읽고 싶다면 Bootstrap의 웹사이트에서 시작하는 것이 가장 좋습니다. 웹 검사기를 열고 사이트의 소스 코드를 스캔하고 모든 코드 블록과 해당 요소를 확인하십시오. 기본을 이해하는 가장 빠르고 좋은 방법 중 하나일 것입니다.

페이지 구조를 자세히 살펴보고 레이아웃이 구성되는 방법을 배웁니다.

 <div class="container"> <div class="row"> ... </div> </div>

... 브라우저 창의 크기를 조정하거나 Chrome의 Viewport Resizer를 사용하여 미디어 쿼리 유틸리티에 대해 자세히 알아보세요.

 /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }

 @media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }

… 그리고 언제 어떻게 사용하는지, 최고의 반응형 디자인 결과를 위해 컬럼 클래스에 익숙해지십시오.

 <div class="row"> <div class="col-sm-7 col-md-9 col-xs-6">Left column</div> <div class="col-sm-5 col-md-3 col-xs-6">Right column</div> </div>

"Try it Yourself" 예제와 함께 모든 CSS 클래스, 구성 요소 및 JavaScript 플러그인에 대한 완전한 부트스트랩 참조를 찾을 수 있는 W3Schools를 살펴보십시오.

• Bootstrap의 그리드 시스템 설명: Bootstrap의 그리드
• 기본 CSS 클래스: 타이포그래피, 버튼, 양식 및 양식 요소, 도우미 클래스, 이미지, 테이블
• 개별 구성 요소: 글리프콘, 드롭다운, 탐색

소스 코드를 확인하고 가능한 한 많은 클래스 이름을 익히십시오. 사용 사례(방법, 시기 및 이유)에 대해 알아보십시오. 이렇게 하면 HTML을 작성하고 UI 요소의 스타일을 지정할 때 더 빠르게 진행할 수 있습니다. 이러한 구성 요소에 대해 자세히 알아보면 불필요한 중복 코드가 많아 스타일시트가 부풀려지는 것을 방지하는 데 도움이 됩니다. 프레임워크 내에 이미 존재하는 것과 동일한 기능을 하는 새 구성 요소를 너무 많이 생성하는 대신 기존 구성 요소를 사용하고 재사용하여 간결하고 깔끔하게 유지하십시오.

이는 여러 개발자로 구성된 팀에서 작업할 때 특히 중요합니다. 새로운 디자인을 코드로 번역할 때 매번 같은 케이스에 대해 너무 많은 스타일을 생성하는 수많은 중복 코드를 작성하는 일이 없도록 하십시오. UI 개발을 일관되게 유지하고 UI 스타일 가이드로 문서화하면 생산적인 팀워크에 몇 가지 매듭을 추가할 수 있습니다. 또한 애플리케이션에 새로운 기능이나 페이지를 추가할 때 덜 불편하게 진행할 수 있습니다. 저는 수십 가지가 넘는 대규모 프로젝트에 참여했으며 그에 비해 프레임워크가 말 그대로 해킹당하고 새 CSS 코드가 추가될 때마다 다른 페이지의 UI가 중단되는 경우를 많이 보았습니다. 모든 사이트를 살펴보고 이러한 유형의 버그를 수정하는 것은 꽤 피곤할 것입니다. 뿐만 아니라 추가 개발자 시간과 QA 지원에 소요되는 비용과 모든 비용에 대해 생각해 보십시오.

시간을 낭비하는 가장 흔한 7가지 스타일링 실수

1. 텍스트나 div를 중앙에 놓을 때

div 및/또는 콘텐츠를 중앙에 배치해야 하는 경우 다음 클래스 중 하나를 사용할 수 있습니다.

텍스트 센터 사용

 <p class="text-center">I am centered text</p>

... 또는 중앙 블록

 <div class="center-block">I am centered text</div>

.center 또는 <center> 가 아닙니다.

2. 글꼴 크기를 변경할 때

더 작거나 더 큰 글꼴이 필요한 경우 다음 클래스 중 하나를 사용할 수 있습니다.

 <p class="lead">I'm bigger paragraph text.</p>

 <p class="small">I'm smaller paragraph text.</p>

더 크거나 작은 헤더가 필요한 경우 .h1 , .h2 , .h3 , .h4 , .h5 , .h6 , .small 을 잊지 마십시오 . 다음과 같이 사용하십시오.

 <h1 class="h2">Smaller Title with .h2</h1>

 <h3 class="h1">Bigger Title with .h1</h3>

 <h4 class="small">Smaller Title with .small</h4>

3. float를 지우거나 요소가 자식을 자동으로 지우도록 할 때

.clear와 같은 클래스를 만들 필요가 없습니다. 대신 부트스트랩의 .clearfix 를 사용할 수 있습니다.

 <div class="clearfix">...</div>

4. .row 클래스 여백을 종료할 때

자신의 스타일을 정의하는 대신 .clearfix를 사용하십시오(또는 인라인 스타일 사용).

 <div class="clearfix">...</div>

5. 정렬되지 않은 목록 및 기타 요소의 스타일을 해제하거나 인라인할 때

목록 항목에서 기본 목록 스타일 과 왼쪽 여백을 제거합니다. 이것은 직계 자식 목록 항목에만 적용됩니다. 중첩 목록에 동일하게 적용해야 하는 경우 해당 목록에도 클래스 이름을 추가해야 합니다.

 <ul class="list-unstyled"> <li>...</li> </ul> <ul class="list-inline"> <li>...</li> </ul>

마찬가지로 체크박스나 라디오 버튼의 경우 .checkbox-inline 및 .radio-inline이 있습니다.

그리고 왼쪽 정렬 및 인라인 블록 컨트롤에 대해 항상 .form-inline 을 양식에 추가할 수 있습니다( <form> 일 필요는 없음).

6. 버튼 크기 조정 시

더 크거나 작은 버튼이 마음에 드시나요? 크기를 추가 하려면 .btn-lg , .btn-sm 또는 .btn-xs 를 추가하세요.

7. 플로팅 및 항목을 오른쪽 또는 왼쪽으로 정렬할 때

클래스를 사용하여 요소를 왼쪽이나 오른쪽으로 띄웁니다. !important 는 특정성 문제를 피하기 위해 포함되었습니다. 클래스는 모든 CSS 전처리기와 함께 믹스인으로 사용할 수도 있습니다.

.right , .left , .left- float , .right-float 대신 .pull -right , .pull-left , .text-right , .text-left 를 사용하십시오.

 <div class="pull-left">...</div> <div class="pull-right">...</div>

텍스트 정렬 클래스를 사용하여 텍스트를 구성요소에 쉽게 재정렬합니다.

 <p class="text-left">Left aligned text.</p> <p class="text-right">Right aligned text.</p>

프레임워크 코어 파일을 직접 사용자 지정하지 마십시오.

큰 프로젝트에서 작업할 때 프레임워크를 효과적으로 사용하는 가장 좋은 방법은 프레임워크를 기반으로 구축하고 핵심 파일을 직접 사용자 지정하지 않는 것입니다. 이 개념은 프로젝트에 사용할 수 있는 다른 플랫폼 및 라이브러리와 유사합니다.

소규모 사이트를 구축 중이고 많은 변경이나 업데이트가 필요하지 않은 디자인 모형이 있는 경우 필요에 맞게 프레임워크를 사용자 지정하는 것이 더 나은 옵션임을 알 수 있습니다. 예를 들어 프레임워크 파일에서 직접 필요하지 않은 모든 항목을 제거하거나 모든 구성 요소, 변수 및 jQuery 플러그인을 쉽게 구성할 수 있는 Bootstrap의 사이트 사용자 정의 섹션으로 이동하여 원하는 대로 얻을 수 있습니다. 자신의 버전. 이 경우 사이트 개발 속도를 높이고 스타일 지정 또는 재정의를 처리하는 시간을 줄일 수 있습니다.

그러나 여러 개발자와 함께 대규모 사이트를 시작하거나 작업하는 경우에는 작업을 분리하고 잘 정리하는 것이 가장 좋습니다. 프레임워크 파일을 기본 사용자 정의 CSS 폴더 외부로 이동하고 비편집 비버전 폴더에 보관하고 Grunt 또는 Gulp 플러그인 grunt-uncss 또는 gulp-uncss를 활용하여 사용하지 않는 CSS를 제거하십시오. 별도로 유지하는 또 다른 대안은 CDN을 통해 제공하는 것입니다. 프레임워크의 코드를 손대지 않고 분리하면 최신 버전으로 업그레이드할 때 더 빠르고 더 나은 옵션을 제공합니다. 또한 빠른 연속 UI 변경으로 추가할 때 여러 확장성 및 스타일 문제를 최소화하거나 속도가 느려지는 것을 최소화하는 데 도움이 됩니다.

Yeoman 또는 Slush와 같은 스캐폴딩 도구와 Bower, Python의 pip, Node의 NPM 또는 Ruby Gems와 같은 패키지 관리자는 애플리케이션 경로에 파일을 추가하는 것 이상의 작업을 수행하므로 활용하십시오. 저는 Bower의 힘에 정말 감사합니다. 이것은 단지 한두 개의 파일을 다운로드하는 것 이상을 확실히 할 수 있습니다. 패키지 관리자를 사용하는 것은 프로젝트의 복잡성이 증가하고 타사 플러그인의 양과 유지 관리 방법이 미친 듯이 시간이 많이 소요될 가능성이 높기 때문에 좋은 생각입니다. Bower는 부트스트랩과 관련된 모든 것을 포함하여 각 플러그인과 종속성을 추적하는 데 도움이 됩니다.

애플리케이션 개발에 사용 가능한 부트스트랩 리소스 활용

Bootstrap의 인기와 함께 기사, 자습서, 타사 플러그인 및 확장, 템플릿, 테마 빌더 등 유용한 리소스가 풍부합니다. 따라서 영감을 찾고 있든 코드 조각을 찾고 있든 진행 속도를 높이는 데 필요한 모든 것이 있습니다.

사용 가능한 리소스가 너무 많으면 모든 사람이 이를 활용하고 프로젝트를 통해 사용할 것이라고 생각할 수 있지만 믿거나 말거나 그렇지 않습니다. 일부 개발자는 멋진 코드 조각이나 리소스를 건너뛰어 시간을 낭비하고 프로젝트 진행 속도를 늦춥니다. 맹목적으로 복사해서 붙여넣기만 해서는 안 되지만 좋은 부분을 이해하고 코딩 스타일과 기술 요구 사항에 맞게 채택해야 합니다. 좋은 자원을 찾아 선별하여 효과적으로 활용하는 능력도 기술이며 다년간의 경험과 지식이 필요합니다.

아래에서 시작하는 데 유용한 리소스 목록을 찾을 수 있습니다.

템플릿, 테마 및 플러그인

Bootstrap 제작자의 공식 테마: theme.getbootstrap.com.

프리미엄 부트스트랩 테마 및 템플릿이 있는 마켓플레이스: wrapbootstrap.com, themeforest.net, creativemarket.com/themes/bootstrap.

무료 부트스트랩 테마 및 템플릿: startbootstrap.com, www.bootstrapzero.com, shapebootstrap.net/free-templates.

"Big Badass List" - 319개의 유용한 부트스트랩 리소스 목록: bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources/

AngularJS

AngularUI 팀이 순수 AngularJS로 작성한 BootstrapUI.

ReactJS

React-Bootstrap은 재사용 가능한 프런트 엔드 구성 요소의 라이브러리입니다. Facebook의 React.js 프레임워크를 통해 훨씬 깔끔한 코드로 Twitter Bootstrap의 모양과 느낌을 얻을 수 있습니다.

장고

Django와 부트스트랩 3 통합: https://github.com/dyve/django-bootstrap3

지킬

Jekyll-Bootstrap은 Jekyll 기반 블로그를 위한 전체 블로그 스캐폴드입니다.

워드프레스

최신 프론트 엔드 개발 워크플로를 갖춘 WordPress 스타터 테마 Sage. HTML5 Boilerplate, gulp, Bower 및 Bootstrap을 기반으로 합니다.

머티리얼 디자인

부트스트랩용 머티리얼 디자인은 즐겨 사용하는 프런트 엔드 프레임워크에서 새로운 Google 머티리얼 디자인을 사용할 수 있게 해주는 부트스트랩 3용 테마입니다.

결론

부트스트랩은 애플리케이션 개발 프로세스를 가속화하고 속도를 높이기 위해 많은 훌륭한 도구와 리소스를 제공하는 가장 유용한 프레임워크 중 하나입니다.

멋진 UI를 디자인하고 코딩할 때 많은 시간/일의 작업을 절약할 수 있습니다. 모든 구성 요소와 플러그인은 더 쉽게 사용하고 사용자 정의할 수 있도록 라이브 예제와 코드 블록으로 철저하게 문서화되어 있습니다. 많은 개발자들이 적극 권장하며 프로토타이핑과 프로덕션 모두에서 매우 인기가 있습니다. 모바일 친화적인 반응형 웹사이트를 만들기에 아주 좋은 도구입니다. 부트스트랩은 다양한 유형의 프로젝트를 위한 훌륭한 출발점을 제공하며, 디자이너에게 이를 넘기고 "멋지게 만들어라!"라고 말할 수 있는 옵션을 제공합니다. 코드를 해킹할 필요 없이. 가장 중요한 것은 먼저 구조를 개발하고 나중에 글꼴, 색상 및 멋진 스타일을 다룰 수 있다는 것입니다. 시간을 할애하여 그것이 무엇을 할 수 있는지 연구하고 가장 좋은 방법으로 현명하게 사용하여 원하는 곳에 더 빨리 도달할 수 있도록 하십시오.