최종프로젝트 9일차 - 리엑트 공부 시작, 리엑트 부트스트랩 사용

최종프로젝트 9일차 - 리엑트 공부 시작, 리엑트 부트스트랩 사용

 

 

스벨트에서 리엑트로 바꾸면서 리엑트 공부를 새로 시작했습니다. 처음엔 비슷한 점이 많아보여서 배우기 쉽겠다 싶었는데 막상 코드를 만져보고 수정해보니 전혀 아니었습니다. 그리고 리엑트 부트스트랩도 사용해보았습니다.

 

 

리엑트가 쉽다고 누가 그런거지

 

주말 같지 않은 토요일 아침 평소보다는 조금 늦은 시간 일어나서 씻고 밥먹고 또 컴퓨터 앞에 앉았습니다. 오늘은 프로젝트 프론트엔드 작업하는 것을 목표로 시작했습니다. 스벨트에서 리엑트로 바뀌었으니 리엑트에 대한 공부부터 시작해야 했습니다.

 

팀원들이 추천해준 아래 영상을 먼저 정주행하고 미리 팀원이 작성한 코드를 깃허브에서 클론했습니다.

 

 

분명 한시간이면 끝난다고 영상은 그랬지만 체감시간은 배 이상이었습니다. 생각보다 이해하는데 시간 걸렸습니다. 어

찌저찌 개념을 잡고 코드로 넘어가보니 그래도 같은 강의를 들어서 그런지 비슷한 구조의 코드들이 보였습니다. 

 

// App.js - 애플리케이션의 최상위 컴포넌트
import React from 'react';
import Layout from './components/Layout';
import Home from './pages/Home';

function App() {
  return (
    // Layout 컴포넌트는 앱의 기본 레이아웃을 정의합니다.
    // 예를 들어 헤더, 네비게이션 바, 콘텐츠 영역, 푸터 등을 포함할 수 있습니다.
    <Layout>
      // Home 컴포넌트는 애플리케이션의 홈페이지 콘텐츠를 렌더링합니다.
      <Home />
    </Layout>
  );
}

export default App;

// components/Layout.js - 공통 레이아웃을 정의하는 컴포넌트
import React from 'react';

const Layout = ({ children }) => {
  return (
    <div className="layout">
      <header>헤더 영역</header>
      <nav>네비게이션 바</nav>
      <main>{children}</main> // children prop을 통해 하위 컴포넌트가 렌더링됩니다.
      <footer>푸터 영역</footer>
    </div>
  );
}

export default Layout;

// pages/Home.js - 홈페이지 콘텐츠를 렌더링하는 컴포넌트
import React from 'react';

const Home = () => {
  return (
    <div className="home">
      홈페이지 콘텐츠가 여기에 들어갑니다.
    </div>
  );
}

export default Home;

 

위 코드는 전체적인 리엑트 어플리케이션의 구조를 나타내고 있습니다. App.js는 애플리케이션에서 최상위 컴포넌트로 전체 앱에서 진입점 역할을 합니다. Layout.js 처럼 공통 레이아웃을 정의하는 컴포넌트를 만들어 활용할 수도 있습니다. 마지막으로 Home 컴포넌트로 홈페이지의 실제 컨텐츠를 렌더링할 수 있습니다. 이렇게 하면 좋은 점은 다른 페이지들이 공통 컴포넌트 안에서 자신의 컨텐츠를 표출할 수 있게 됩니다.

 

그렇게 여러 공부를 거치고 프로젝트에 적용해보고 있습니다.

 

 

카드 목록 조회하는 것에서 부터 많은 난관이 있지만 계속 여러 방법들을 시도해 보고 있습니다. 참고로 카드 목록은 아래의 방식으로 작성되었습니다.

 

import styled from 'styled-components';
import React, { useEffect,useState } from "react";
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";


  // 경기장 카드를 가로로 정렬하기 위한 컨테이너
  const StadiumsContainer = styled.div`
    display: flex;
    flex-wrap: wrap;
    gap: 20px; // 카드 간의 간격
    justify-content: center; // 중앙 정렬
  `;

  
  
  // 가상의 경기장 데이터 (예시)
  const stadiumList = [
    { id: 1, name: "스타디움 1", location: "서울" },
    { id: 2, name: "스타디움 2", location: "부산" },
    { id: 3, name: "스타디움 3", location: "대구" },
    { id: 4, name: "스타디움 3", location: "대구" },
      
      ...
      
      <StadiumsContainer>
        {stadiumList.map((stadium) => (
          <Card key={stadium.id} style={{ width: '18rem', marginBottom: '20px' }}>
            <Card.Body>
              <Card.Title>{stadium.name}</Card.Title>
              <Card.Text>위치: {stadium.location}</Card.Text>
              <Button variant="primary">예약</Button>
            </Card.Body>
          </Card>
        ))}
      </StadiumsContainer>

 

Grid system | React Bootstrap

 

여기서 리엑트 부트스트랩을 사용하고 있는데 역시 참고할 만한 디자인이 많았습니다.

 

▼ 이전 진행한 프로젝트들 ▼

 

내일배움캠프 Node트랙 심화 프로젝트 역할 및 진행사항

 

내일배움캠프 NestJS 프로젝트 코드리뷰 - 온라인 공연 예매 서비스