Bootstrap 설정하기

웹 애플리케이션을 개발할 때 UI 키트를 사용하면 인터페이스를 쉽게 만들 수 있습니다. 우리는 노트 작성 앱을 위해 Bootstrap을 사용할 것입니다. Bootstrap은 React와 직접 사용할 수 있지만, React Bootstrap 패키지를 함께 사용하는 것이 더 좋습니다. 이렇게 하면 마크업을 더 간단하게 구현하고 이해할 수 있습니다.

또한 애플리케이션에서 몇 가지 아이콘이 필요합니다. 이를 위해 React Icons 패키지를 사용할 것입니다. 이 패키지를 사용하면 React 앱에 아이콘을 표준 React 컴포넌트로 포함할 수 있습니다.

React Bootstrap 설치하기

Change indicator packages/frontend/ 디렉토리에서 다음 명령어를 실행하세요.

$ npm install bootstrap react-bootstrap react-icons
$ npm install -D @types/bootstrap @types/react-bootstrap

이 명령어는 React 앱의 package.json에 패키지와 의존성을 설치합니다.

부트스트랩 스타일 추가하기

React Bootstrap은 표준 부트스트랩 스타일을 사용하므로 스타일 시트를 가져오기만 하면 됩니다.

Change indicator src/main.tsx 파일에서 import "./index.css"위에 다음 코드를 추가하세요.

import "bootstrap/dist/css/bootstrap.min.css";

또한 모바일 브라우저에서 폼 필드에 포커스가 갔을 때 확대되지 않도록 스타일을 조정할 것입니다. 확대를 방지하려면 최소 폰트 크기를 16px로 설정해야 합니다.

Change indicator 이를 위해 src/index.css에 다음 코드를 추가하세요.

select.form-control,
textarea.form-control,
input.form-control {
  font-size: 1rem;
}
input[type="file"] {
  width: 100%;
}

또한 모바일에서 페이지가 넘치거나 스크롤바가 생기는 것을 방지하기 위해 파일 입력 타입의 너비를 설정했습니다.

이제 브라우저로 이동하면 스타일이 약간 바뀐 것을 확인할 수 있습니다. 이는 부트스트랩이 브라우저 간 일관된 스타일을 제공하기 위해 Normalize.css를 포함하기 때문입니다.

다음으로 애플리케이션을 위한 몇 가지 라우트를 만들고 React Router를 설정할 것입니다.