React - Project 진행일지 1

프론트엔드로 프로젝트를 진행하면서 사용하거나 일어난 일들을 작성할 예정

 

 

5인 프로젝트를 진행하게 되었다.

 

사용 기술스택으로는

Front : React

Back : Spring boot Gradle

DB : MongoDB, MySQL

API : FastAPI

 

이렇게 구성하였다.

 

Front-end에서는 

React + js 기반으로 작성을 진행 할 예정이다

 

사용하는것

Vite / React / JavaScript

 

React 라이브러리

react-router-dom / axios / styled-components / d3 / d3-cloud

라이브러리는 추후 필요에따라 추가삭제 할 예정

 

 styled-components 를 사용하여

현재 페이지가 Home일 때 Home버튼의 css 속성이 바뀌게 작성하려고 진행하였다

 

import styled, { css } from "styled-components"

해당 코드를통해 css를 따로 import 해주고

 

 

const MenuItem = styled.div`

    width: 25%;

    max-width: 200px;

    min-width: 100px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    color: ${(props) => props.color || "#000000"};

    background-color: ${(props) => props.background || "#ffffff"};

    &:hover {

    background: #F0BE4D;

    color: white;

    transition: 0.5s;

    }

    ${(props) =>

        props.onPage &&

        css`

            background: #F0BE4D;

            color: white;

        `

    }

`;

css 속성의 수치로 ${(props) => props.color || "#000000"}; 이렇게 작성하여 기본값으로 뒤의 수치를 잡아주고

 

${(props) => props.onPage && css` background: #F0BE4D; color: white; ` }

이부분을 통해 onPage 속성값을 가지게 되면 css가 변경되도록 작성하고

변경할 속성값을 css`` 안에 작성하여 전달하기로 하였다.

 

 

export default function Header({...props}) {

    return (

                ..............

                    <MenuItem {...props} onPage>Home</MenuItem>

                    <MenuItem>News</MenuItem>

                    <MenuItem>Category</MenuItem>

                    <MenuItem>Board</MenuItem>

                ..............

    )

}

함수의 인수로 {...props} 값을 받아오고

해당값을 적용할 컴포넌트에 부여하여 onPage를 통해 제어하였다.

 

이후 페이지이동을 하면  onPage를 해당 페이지의 MenuItem 컴포넌트에 부여하는 방식으로 제어 할 예정

 

+추가

지그재그모양의 카드형 게시판을 만들기위해 Material-UI를 설치하였다

npm install @mui/material @emotion/react @emotion/styled

공식사이트

https://mui.com/material-ui/getting-started/installation/

Installation - Material UI

 

 

[plugin:vite:import-analysis] Failed to resolve import "@mui/lab/Masonry" from

해당오류가 발생하면

npm install @mui/lab

를 통해 설치를 진행해준다.

 

 

메인페이지에 위와같이 출력하기위해서 해당코드를 사용하였다.

import Masonry from '@mui/lab/Masonry';

        <Masonry

            columns={3}

            spacing={2}

            defaultHeight={300}

            defaultColumns={3}

            defaultSpacing={2}

        >

            {heights.map((height, index) => (

                <Item key={index} style={{ height: `${height}px` }}>

                    {imageUrl[index] && <ItemImage src={imageUrl[index]} />}

                    <ItemTextBox> test</ItemTextBox>

                </Item>

            ))}

        </Masonry>

columns={3}  컬럼갯수

spacing={2}  여백사이즈

defaultHeight={300}  기본heingt값

defaultColumns={3}  기본 컬럼갯수

defaultSpacing={2}  기본여백사이즈

 

 

    const heights = [600, 300, 600, 900, 600, 600];

해당리스트로 item 의 사이즈를 정해주고

index를 통해서 heights 및 imageurl을 넣어준다

 

이미지가 없는경우에는 undefined를통해 빈 값으로 반환한다.

 

 

 

Bar 차트를 사용하기 위해서 mui 에서 사용

 

 

npm install recharts

해당 코드로 recharts를 설치해준다.

 

import React from 'react';

import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

const data = [

  { name: 'Category 1', value: 10 },

  { name: 'Category 2', value: 20 },

  { name: 'Category 3', value: 30 },

];

const MyBarChart = () => {

  return (

    <BarChart width={500} height={300} data={data}>

      <CartesianGrid strokeDasharray="3 3" />

      <XAxis dataKey="name" />

      <YAxis />

      <Tooltip />

      <Legend />

      <Bar dataKey="value" fill="#8884d8" />

    </BarChart>

  );

}

export default MyBarChart;

예시코드로 해당코드처럼 작성해준다.

 

https://mui.com/x/react-charts/bars/

React Bar chart - MUI X

해당 사이트를 통해 사용법을 알 수 있었음.

 

<BarChart width={500} height={550} data={data}>

차트의 크기를 지정해주고 받은 데이터를 명시해준다.

 

<CartesianGrid strokeDasharray="3 3" />

그리드를 생성하여 그리드 라인의 스타일을 제어

 

      <XAxis dataKey="name" />

X축에 바의 이름을 표기해준다.

 

<YAxis />

Y축에 수치값을 통해 자동으로 5등분하여 숫자를 표기해준다.

 

<Tooltip />

막대를 hover시에 해당 막대의 정보를 알려주는 Tooltip박스 생성

 

      <Bar dataKey="value" fill="#AEECFF" />

bar 막대를 생성해준다.

 

      <Legend />

dataKey를 통해 설정한 value값을 통해서 하단부분에 색상으로 명시하여 표기