클라우딩 어플리케이션 엔지니어링 TIL Day 43, 44 - React & Bootstrap 웹 프로젝트 제작 (1~2) Bootstrap 사용 방법 및 실습

# 들어가며

지난번까지 React.js를 학습하며 간단한 일기장 프로젝트를 만들어보았다

이제 React와 연계해서 배우면 좋을 것들에 대해서 알아보자

 

구현을 편하게 만들어 서비스 기능을 개발하는 데 집중할 수 있도록

 Styling, state management, API Calls, Froms 등의 여러 라이브러리가 존재한다

따라서 이번 시간부터는 스타일링에 집중하여 현업에서 쓰이는 CSS 라이브러리로 어떻게 화면을 빠르게 만드는가에 대해 학습해보겠다

즉, 이미 구현되어 있는 것을 잘 활용하는 방법을 배워볼 것이다

 

# CSS 라이브러리

1. matrial ui (mui)

- 구글 개발

- 문서화가 잘 작성되어있음잘 작성되어 있는 문서

- 가장 많이 쓰이는 라이브러리

2. antDesign

- 알리바바 개발

- mui와 유사하지만 디자인 패턴과 원칙이 있음

- 두번째로 인기있는 라이브러리

3. react bootstrap

- 예전부터 사용하던 부트스트랩에 리액트에 쓰기 쉽게 구축

- 반응형 및 모바일 웹 구축에 유리

 

# 요즘 웹 개발 트렌드

웹 개발 트렌드란?

많은 사람들이 따르는 패턴 또는 방식을 뜻한다

산업의 변화로 인해 나타나는 유행이라고 할 수 있다

 

기술의 발전으로 단순한 웹 페이지에서 다양한 기능이 추가된 웹 애플리케이션으로 발전했다

그럼 각 년도별로 웹 개발 핵심 키워드에 대해서 알아보자

 

# 2020 ~ 2022 핵심 키워드

메타버스

3D 렌더링 기술 - Three.js, Babylon.js

물리엔진 - ammo.js, bullet.js

네트워킹 - photon engine, webRTC

디자인 - Blender

스타일 - claymorphism

이처럼 새로운 라이브러리, 툴 등의 새로운 트렌드가 나오고 있는 것을 알 수 있다

또한 NFT, 언택트, web 3.0도 주요 키워드이다

 

2023년의 핵심 키워드는 AI였다

 

그럼 2024년 웹 개발 트렌드는 어떻게 될까?

아마도 AI의 유행이 계속 될 듯 하다

또한 AI 기술을 활용한 기능이 웹에 접목될 것으로 예상된다

 

# 프론트엔드 개발자 성장 방법

1. 다른 시각으로 생각하기

어떻게 만들까부터 생각하지 않기

왜 만드는지부터 생각하기

2. 화면 개발, css 작업

물리적인 시간이 많이 드는 것이 당연하다

반복하다보면 재미가 없는 것이 당연하다

그럼에도 사용자, 클라이언트가 가장 먼저 보는 화면이기 때문에 서비스에 직접적인 영향을 줌을 기억하자

3. 궁금증과 고민 가지기

각 네이밍의 어원이 뭘까?

성능에 대한 고민과 interaction에 대한 고민을 가지자

---

# Bootstrap 소개 및 공식 문서 살펴보기

https://react-bootstrap.netlify.app/

React Bootstrap | React Bootstrap

React Bootstrap 공식 홈페이지에 들어가서 살펴보자!

npm install react-bootstrap bootstrap

으로 설치해주자

자세한 사용방법은  getting started 에서 확인 가능하다

 

# 대표적인 Bootstrap 컴포넌트

- accordion

- alert

-button

-card

-breakcrumbs

 

아래는 다양한 디자인 패턴을 살펴보기 좋은 사이트이다

https://www.patterns.dev/

Patterns.dev

 

---

# Boorstrap 설치 및 사용해보기

본격적인 프로젝트 진행을 위해 React 프로젝트를 생성하자

npx create-react-app 프로젝트명

react 프로젝트가 생성되면 이번 실습의 핵심인 Bootstrap을 설치한다

npm install react-bootstrap bootstrap

정상적으로 설치 완료된 것 확인할 수 있다

index.js 파일에 bootstrap css 적용 위한 import 추가해주어야 한다

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

 

우선 가장 대표적인 Accordion 컴포넌트를 가져와서 사용해보자

아코디언 컴포넌트를 사용한 모습이다

코드의 가독성을 위해 map을 사용해서 코드를 수정할 수도 있다

//더미데이터
const data = [
  {
    id: 1,
    name: "텍스트1",
    content: "안녕하시렵니까?",
  },
  {
    id: 2,
    name: "텍스트2",
    content: "안녕하시렵니까?",
  },
  {
    id: 3,
    name: "텍스트3",
    content: "안녕하시렵니까?",
  },
];

//수정된 코드
{data.map((e, i) => (
        <Accordion defaultActiveKey="0">
          <Accordion.Item eventKey={i}>
            <Accordion.Header>{e.name}</Accordion.Header>
            <Accordion.Body>{e.content}</Accordion.Body>
          </Accordion.Item>
        </Accordion>
      ))}

 

다양한 컴포넌트를 사용해보면서 react-bootstrap 에 대해서 살펴보고 적용해보며 공부하자

또한 Bootstrap과 같은 css 라이브러리는 개발 시간을 단축시켜 주기 때문에 필요하다면 적극적으로 활용해보자

---

# Bootstrap 으로 기본적인 이벤트 화면 만들어보기

Bootstrap 을 사용해서 실습을 진행해보자

개발을 진행하기에 앞서 디자인을 보고 어떻게 컴포넌트를 나누면 좋을지 고민해보아야 한다

자세한 코드와 디자인은 수업 자료이기 때문에 중요한 내용만 간략하게 기록해보겠다

 

# Bootstrap의 Card 컴포넌트 활용

{productList.map((e, i) => (
                  <Card style={{ minWidth: 240, borderRadius: 16 }}>
                    <Card.Img src={e.img} className={styles.product__image} />
                    <Card.Body style={{ padding: 0 }}>
                      <div className={styles.product}>
                        <div className={styles.content}>
                          <div>
                            <p>{e.type}</p>
                            <h3>{e.productName}</h3>
                          </div>
                          <div className={styles.price__layout}>
                            <p className={styles.percent}>{e.percent}%</p>
                            <p className={styles.price}>
                              {e.price.toLocaleString()}원
                            </p>
                          </div>
                        </div>
                      </div>
                    </Card.Body>
                  </Card>
                ))}

Card 컴포넌트 적용

# 완성된 화면

---

# 컴포넌트화

컴포넌트를 나눌 때 주의점을 알아보자

우선 컴포넌트를 나누는 방법은 크게 두가지가 있다

1. 기능 단위로 분리

2. 스타일 단위로 분리

 

# 기능 단위로 분리

- 컴포넌트의 단위가 명백

- 유지보수 용이

 

# 스타일 단위로 분리

- 각각의 스타일들을 css와 함께 컴포넌트로 분리

- 공통된 컴포넌트로 나누고 각각의 style, type, theme 지정

- 종류가 많아지면 코드가 길어질 수 있음

 

둘 중에 뭐가 더 좋은 방법이라는 것은 없다

전체 프로젝트의 디자인을 보고 공통된 부분은 컴포넌트, 중복배제, 재사용 등의 기준에 맞게 분리해야 한다

DRY 원칙을 지키자

DRY 원칙,
즉 “반복하지 마라 (Don't Repeat Yourself)”
라는 말 역시 좋은 소프트웨어 개발 습관의 근원이라 할 만하다.
“모든 지식 조각은 딱 한 번만 나와야 한다 ”라는 말이다.

 

리액트스러운 건 어떤 것일까?

하나의 컴포넌트 안에 컴포넌트들이 들어가는 것이다

<Layout>
	<Header />
    <EventImage />
    <ProductList />
    <Button />
</Layout>

과 같은 형태를 리액트스럽다고 표현한다

 

그럼 기존의 EventByBootstrap 컴포넌트의 코드들을 컴포넌트화해서 코드의 가독성을 향상시켜보자

컴포넌트 단위로 분리

const EventByBootstrap = () => {
  return (
    <article className="layout">
      <div>
        <div className={styles.page__style}>
          <section className={styles.header}>
            <button className={styles.header__btn}>
              <img src={arrow_left} alt="왼쪽 화살표" />
            </button>
            <h1 className={styles.header__title}>크리스마스 특별할인전</h1>
            <button className={styles.header__btn}>
              <img src={share} alt="공유하기" />
            </button>
          </section>
          <EventMainSection />
          <section>
            <ul className={styles.filter__list}>
              <li className={styles.filter__btn}>남성의류</li>
              <li className={styles.filter__btn}>여성의류</li>
              <li className={styles.filter__btn}>가전제품</li>
            </ul>
            <div className={styles.top__sales}>
              <h2>실시간 인기 TOP5</h2>
              <ProductList />
              <Button className={styles.show__all__btn}>전체 상품 보기</Button>
            </div>
          </section>
          <section className={styles.coupon__section}>
            <h2>
              어디서든 사용 가능한
              <br />
              15% 쿠폰을 드려요!
            </h2>
            <p>쿠폰 지급 기간 : ~12월 31일까지</p>
          </section>
        </div>
      </div>
    </article>
  );
};

코드가 간략해진 것을 확인할 수 있다 (리액트스러워졌다)

---

# 새로 알게된 점

이번 시간은 Bootstrap을 활용한 리액트 프로젝트를 개발해보았다

Bootstrap처럼 기존의 것을 가져와서 사용하는 것에 익숙하지 않았기 때문에 이번 시간을 통해서

잘 가져다가 쓰는 법의 중요성을 알고 잘 가져다가 쓰는 연습을 할 수 있었다

개발 기간이 항상 넉넉하지만은 않기 때문에 이러한 CSS 라이브러리를 잘 가져와서

필요한 부분에 원하는 대로 가져와서 쓰는 연습이 더 필요할 것 같다