[🍎코딩애플 강의요약]Bootstrap 사용하기 🚀

🌈 KJ·2025년 6월 3일

codingapple

목록 보기

15/23

새로운 프로젝트 생성 & Bootstrap 사용하기 🚀

쇼핑몰 프로젝트 시작하기 🛍️

오늘부터 쇼핑몰 프로젝트를 새로 만들어봅시다! CSS 작성이 귀찮으니 React-Bootstrap 라이브러리를 사용해서 레이아웃을 쉽게 복사붙여넣기 방식으로 만들어보겠습니다.

새로운 React 프로젝트 생성 📁

1단계: 프로젝트 생성 🔧

작업폴더에서 Shift + 우클릭 → PowerShell/터미널 열기
터미널에 명령어 입력:
```
npm create vite@latest
```
프로젝트 폴더를 VSCode로 열기
초기 설정:
- CSS 파일들 내용 지우기
- App.js에서 불필요한 HTML 제거
미리보기 실행: npm run dev

React-Bootstrap 라이브러리 설치 및 설정 🎨

Bootstrap을 사용하는 이유 💡

버튼, 메뉴 등을 HTML/CSS로 직접 디자인할 필요 없음
예제 코드 복사붙여넣기만으로 레이아웃 생성 가능
Bootstrap을 React에 맞게 변형한 라이브러리

설치 방법 📦

1단계: 라이브러리 설치

npm install react-bootstrap bootstrap

2단계: CSS 파일 연결

index.html의 <head> 태그 안에 Bootstrap CSS 추가
또는 App.js에 다음 코드 추가:

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

React-Bootstrap 사용법 🛠️

버튼 만들기 🔘

import {Button} from 'react-bootstrap'

function App(){
  return (
    <div>
      <Button variant="primary">Primary</Button>
    </div>
  )
}

상단 내비게이션 바 만들기 🧭

import {Button, Navbar, Container, Nav} from 'react-bootstrap'

function App(){
  return (
    <div>
      <Navbar bg="dark" variant="dark">
        <Container>
        <Navbar.Brand href="#home">Navbar</Navbar.Brand>
        <Nav className="me-auto">
          <Nav.Link href="#home">Home</Nav.Link>
          <Nav.Link href="#features">Features</Nav.Link>
          <Nav.Link href="#pricing">Pricing</Nav.Link>
        </Nav>
        </Container>
      </Navbar>
    </div>
  )
}

중요한 규칙 ⚠️

대문자로 시작하는 컴포넌트는 반드시 상단에 import 해야 함
className 부여해서 CSS 커스터마이징 가능

보충 설명 💡

Vite vs Create React App 🔄

Vite: 최신 빌드 도구, 빠른 개발 서버와 HMR(Hot Module Replacement) 제공
Create React App: 기존 React 프로젝트 생성 도구
Vite가 더 빠르고 가벼워서 최근 많이 사용됨

Bootstrap 버전별 차이점 📊

Bootstrap 5: 최신 버전, jQuery 의존성 제거
React-Bootstrap: React 컴포넌트 형태로 제공되어 더 React답게 사용 가능
기존 Bootstrap: CDN이나 직접 설치하여 클래스명으로 사용

다른 UI 라이브러리 옵션 🎯

Material-UI (MUI): Google의 Material Design 기반
Ant Design: 엔터프라이즈급 UI 라이브러리
Chakra UI: 심플하고 모듈식 구조
Tailwind CSS: 유틸리티 기반 CSS 프레임워크

프로젝트 구조 최적화 팁 📁

src/
├── components/     # 재사용 가능한 컴포넌트
├── pages/         # 페이지 컴포넌트
├── styles/        # CSS 파일들
├── utils/         # 유틸리티 함수들
└── assets/        # 이미지, 폰트 등 정적 파일

성능 최적화 고려사항 ⚡

Tree Shaking: 필요한 컴포넌트만 import하여 번들 크기 최소화
Code Splitting: 라우트별로 코드 분할하여 초기 로딩 속도 개선
CSS-in-JS vs CSS Modules: 프로젝트 규모에 따른 스타일링 방식 선택

🌈 KJ

이전 포스트

[🍎코딩애플 강의요약]React 사이트 build 및 GitHub Pages 배포하기

다음 포스트

[🍎코딩애플 강의요약]Bootstrap 사용하기 🚀

codingapple

새로운 프로젝트 생성 & Bootstrap 사용하기 🚀

쇼핑몰 프로젝트 시작하기 🛍️

새로운 React 프로젝트 생성 📁

1단계: 프로젝트 생성 🔧

React-Bootstrap 라이브러리 설치 및 설정 🎨

Bootstrap을 사용하는 이유 💡

설치 방법 📦

React-Bootstrap 사용법 🛠️

버튼 만들기 🔘

상단 내비게이션 바 만들기 🧭

중요한 규칙 ⚠️

보충 설명 💡

Vite vs Create React App 🔄

Bootstrap 버전별 차이점 📊

다른 UI 라이브러리 옵션 🎯

프로젝트 구조 최적화 팁 📁

성능 최적화 고려사항 ⚡

[🍎코딩애플 강의요약]React 사이트 build 및 GitHub Pages 배포하기

[🍎코딩애플 강의요약]이미지 넣는 법 & public 폴더 이용하기 📸

0개의 댓글