Bootstrap
The most popular HTML, CSS, and JS library in the world.
getbootstrap.com
웹페이지의 디자인이 필요할 때 css 을 이용하여 모든 요소를 제작하는 것도 좋은 방법이겠지만, 해당 작업에 시간을 많이 투자할 수 없거나, css 및 브라우저 환경간의 차이를 반영한 디자인에 익숙하지 않다면 차라리 이미 존재하는 툴을 이용하는 것이 나을 것이다. 이때 부트스트랩을 이용하면 프론트엔드 환경의 디자인을 간단하게 처리할 수 있다.
부트스트랩은 반응형 + 모바일 디자인을 위한 css 및 js 파일을 제공하는 라이브러리로, 간단하게 웹을 디자인 하는 경우 미리 만들어져 있는 포맷을 가져다가 사용하면 되기 때문에 사용하기 쉽고 시간이 절약된다. 기본적으로 부트스트랩을 사용하는 방식은 크게 2가지 방식이 있는데, 1) 해당 파일들을 직접 설치하여 이용하거나 2) CDN(Content Delivery Network) 으로부터 파일을 다운받는 방식이다. 두가지 방식 모두 어차피 css 파일 및 js 파일을 가져와서 사용하는 방식이라 큰 차이가 없으므로, 조금이라도 서버의 부하를 줄이는 두번째 방식을 주로 이용한다.
1. 부트스트랩을 서버에 설치하는 방식
부트스트랩을 서버에 설치하고, 해당 css 파일 및 js 파일을 서버로부터 사용자에게 전달하는 방식이다. 해당 파일이 서버에 존재하기 때문에 CDN의 네트워크 환경에 제약받지 않는다는 장점이 있다. 단, 서버측에서 사용자에게 전송할 파일의 양이 많아지므로, CDN 방식에 비해 서버의 부하가 커진다는 단점이 존재한다.
다양한 프로그래밍 언어를 기반으로 한 프론트엔드 프레임워크가 존재하기 때문에, 부트스트랩은 npm · yarn · nuget( C# ) 등 대응되는 언어의 패키지 매니저를 통한 설치를 지원한다.
npm install bootstrap
Install-Package bootstrap # C# nuget을 통한 설치물론 파일을 공식 홈페이지에서 직접 다운로드 하여 사용해도 큰 차이가 없으므로, 적당히 골라 사용하면 된다.
npm을 이용하여 설치한 경우, bootstrap 모듈로부터 css 파일 및 js 파일을 로드할 수 있다. 모듈은 _app.js 파일 내부에서 global.css 파일을 로드하듯이 가져오면 된다.
// _app.js 파일 내부에 선언
/*01*/ import bootstrap from 'bootstrap'; // 모듈 전체 로드하기
/*02*/ import 'bootstrap\dist\css\bootstrap.min.css'; // 개별 모듈 따로 로드하기대부분의 경우 부트스트랩 전체 모듈이 필요하지 않다. 따라서 필요에 따라 모듈을 어떻게 로드할지 결정하자.
2. CDN에서 파일을 로드하는 방식
우리의 서버에서 직접 부트스트랩 파일을 전달하는 대신, link 및 script 태그를 이용하여 사용자 측에서 파일을 CDN으로부터 다운로드하게 만든다. 서버는 부트스트랩 파일을 가지고 있지 않으므로, 해당 파일들을 사용자에게 전달할 때 발생하는 서버의 부하를 없앨 수 있다. html을 이용하여 페이지를 만들 때 주로 사용하는 방식이다.
link 태그는 html 상에서 head 태그 내에서 선언하기 때문에 nextjs의 <Head> 태그 내부에 css 파일을 로드하는 코드를 작성하며, script 태그의 경우 body 내부에 선언하므로 <Component {...pagesProps} /> 위 혹은 아래에 작성한다.
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import Head from 'next/head'
function MyApp({ Component, pageProps }: AppProps) {
return <>
<Head>
{/* bootstrap 코드 */}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossOrigin="anonymous" />
</Head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossOrigin="anonymous" defer></script>
<Component {...pageProps} />
</>
}
export default MyApp
이후 필요에 따라 공식 문서를 참고하며 코드를 작성하면 된다.
'javascript > nextjs' 카테고리의 다른 글
| [nextjs13] fetch API (0) | 2023.05.10 |
|---|---|
| [nextjs] pre-rendering & getStaticProps · getServerSideProps (0) | 2022.02.09 |
| [nextjs] File system routing (0) | 2022.02.07 |
| [nextjs] _app · _document · _error (0) | 2022.02.06 |
| [nextjs] SSR을 위한 리액트 프레임워크 (0) | 2022.02.02 |
