Rental Application (React & Spring boot Microservice) - 22 : HomePage

#1 React 애플리케이션 생성

• React 설치
  잘 정리된 url 링크를 걸어 두겠습니다.
  https://online.codingapple.com/unit/react1-install-create-react-app-npx/

제 환경 기준 /home/biuea/Desktop/MyRentalPlatform/ 경로에서 터미널로 다음의 명령어로 react app을 만들어주도록 하겠습니다.

npx create-react-app client-app

그리고 vscode를 이용해서 앞으로 react 서버를 만들도록 하겠습니다.

그리고 터미널로 이동해서 npm start명령어를 입력하시면 3000번 포트로 react 서버가 실행되는 모습을 보실 수 있습니다.

#2 설정

웹 페이지를 구축하기에 앞서 지속적으로 사용될 lib 디렉토리부터 만들도록 하겠습니다. 모든 디렉토리는 src를 root로 기준을 잡고 만들도록 하겠습니다.

• ./src/lib/styles/palette.js

const palette = {
    gray: [
        '#f8f9fa',
        '#f1f3f5',
        '#e9ecef',
        '#dee2e6',
        '#ced4da',
        '#adb5bd',
        '#868e96',
        '#495057',
        '#343a40',
        '#212529',
    ],
    yellow: [
        '#FFB400',
        '#FFBE0A',
        '#FFC314',
        '#FFC81E',
        '#FFCD28',
        '#FFD232',
        '#FFD73C',
        '#FFDC46',
        '#FFE150',
        '#FFE65A',
    ],
    blue: [
        '#0000FF',
        '#0064FF',
        '#0078FF',
    ],
    red: [
       '#FF0000',
       '#EB0000',
       '#FF3232',
       '#CD1039', 
    ]
};

export default palette;

라우팅 패키지를 설치하도록 하겠습니다.

npm install --save react-router-dom

rental-application의 가장 메인이 될 홈페이지부터 작업을 해보겠습니다.

• ./src/pages/HomePage.js

import React from 'react';

const HomePage = () => {
    return(
        <>
            HomePage!
        </>
    );
};

export default HomePage;

그리고 App.js 파일의 코드를 전부 지운 후 다음과 같이 작성하도록 하겠습니다.

• App.js

import React from 'react';
import { Route } from 'react-router-dom';
import HomePage from './pages/HomePage';

const App = () => {
    return(
        <>
            <Route 
                component={ HomePage }
                path="/"
                exact
            />
        </>
    );
};

export default App;

그리고 index.js파일을 다음과 같이 작성하여 Router를 감싸주도록 하겠습니다.

• index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

해당 경로로 라우팅이 잘 작동하는지 npm start로 서버를 구동하도록 하겠습니다.

React 서버가 정상적으로 작동하고 라우팅 기능 또한 잘 수행됨을 볼 수 있습니다.

#3 HomePage

그러면 HomePage의 css를 만들어보도록 하겠습니다. react에서 css 관련 작업을 할 때 다음의 라이브러리를 설치하면 유용하니 설치하도록 하겠습니다.

npm install --save styled-components

styled-components는 css를 하나의 컴포넌트로 사용하게 해주는 라이브러리입니다. 직접 해보면서 styled-components를 알아보도록 하겠습니다.

• ./src/components/common/HeaderTemplate.js

import React from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import palette from '../../lib/styles/palettes';
import Shortcut from './Shortcut';
import home_outline from '../../static/img/home-outline.svg';
import clipboard_outline from '../../static/img/clipboard-outline.svg';
import person_outline from '../../static/img/person-outline.svg';

const HeaderBox = styled.div`
    width: 100%;
    height: 130px;
    position: fixed;
    background-color: white;
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.1);
`;

const Title = styled.div`
    float: left;
    width: 30%;
    height: 130px;
    font-weight: bold;
    font-size: 40px;
    display: flex;
    justify-content: left;
    align-items: center;
    padding-left: 30px;
    a {
        color: ${palette.blue[0]};
    }
`;

const Nav = styled.div`
    float: left;
    width: 60%;
    height: 130px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
`;

const HeaderTemplate = () => {
    return(
        <HeaderBox>
            <Title>
                <Link to="/">
                    Rental Platform
                </Link>
            </Title>
            <Nav>
                <Shortcut
                    path="/"
                    src={ home_outline }
                />
                <Shortcut
                    path="/posts"
                    src={ home_outline }
                />
                <Shortcut
                    path="/user/myPage"
                    src={ home_outline }
                />
            </Nav>
        </HeaderBox>
    );
};

export default HeaderTemplate;

• ./src/components/common/Shortcut.js

import React from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';

const Icon = styled.img`
    width: 40px;
    height: 40px;
    margin-left: 20px;
    margin-right: 20px;
`;

const Shortcut = ({ path, src }) => {
    return (
        <Link to={ path } >
            <Icon src={ src } />
        </Link>    
    );
}

export default Shortcut;

헤더 부분에서 네비게이션 역할을 해 줄 아이콘을 위한 컴포넌트입니다.

위의 코드와 같이 style-components는 css를 컴포넌트로 만들어 사용할 수 있습니다. 아이콘 이미지들은 git에 올려두겠습니다.
https://github.com/biuea3866/MyRentalService

index.css에 기본적인 css를 적어주도록 하겠습니다.

• ./src/index.css

...

#root {
  min-height: 100%;
}

html {
  height: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: inherit;
}

...

그러면 HomePage.js를 다음과 같이 바꿔주고 헤더가 잘 적용이 되는지 살펴 보겠습니다.

• ./src/pages/HomePage.js

import React from 'react';
import HeaderTemplate from '../components/common/HeaderTemplate';

const HomePage = () => {
    return(
        <>
            <HeaderTemplate />
        </>
    );
};

export default HomePage;

헤더 템플릿이 잘 적용이 되는 모습을 볼 수 있습니다.

이어서 메인페이지를 작업하도록 하겠습니다. 메인페이지에는 아이콘으로 카테고리를 분류하여 아이콘 클릭시 해당 카테고리에 관한 게시글을 보여지게 하도록 하겠습니다.

• 후에 게시글 페이지 작업을 하면서 post-service 데이터베이스에 카테고리 속성을 추가하도록 하겠습니다.

• ./src/components/home/common/IconBlockTemplate.js

import React from 'react';
import styled from 'styled-components';
import { Link } from 'react-router-dom';

const IconBlock = styled.div`
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 130px;
    text-align: center;
    margin-left: 20px;
    margin-right: 20px;
`;

const Area = styled.img`
    width: 80px;
    height: 80px;
`;

const Text = styled.span`
    width: 80px;
    height: 50px;
`;

const IconBlockTemplate = ({
    to,
    src,
    text
}) => {
    return(
        <Link to={ to }>
            <IconBlock>
                <Area src={ src }>
                </Area>
                <Text>
                    { text }
                </Text>
            </IconBlock>
        </Link>
    );
};

export default IconBlockTemplate;

하나의 카테고리를 만드는 컴포넌트입니다. 이 컴포넌트를 이용하여 한 줄에 4개의 카테고리씩 만들어보도록 하겠습니다.

• ./src/components/home/ArticleTemplate.js

import React from 'react';
import styled from 'styled-components';

const ArticleTemplateBlock = styled.div`
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    padding-top: 130px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
`;

const ArticleBox = styled.div`
    padding: 2rem;
    width: 80%;
    border-radius: 2px;
`;

const ArticleTemplate = ({ children }) => {
    return(
        <ArticleTemplateBlock>
            <ArticleBox>
                { children }
            </ArticleBox>
        </ArticleTemplateBlock>
    );
};

export default ArticleTemplate;

• ./src/components/home/ArticleForm.js

import React from 'react';
import styled from 'styled-components';
import IconBlockTemplate from './common/IconBlockTemplate';
import book_outline from '../../static/img/book-outline.svg';
import laptop_outline from '../../static/img/laptop-outline.svg';
import bicycle_outline from '../../static/img/bicycle-outline.svg';
import barbell_outline from '../../static/img/barbel-outline.svg';

const ArticleFormBlock = styled.div`
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
`;

const ArticleTable = styled.table`
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
`;

const TableLine = styled.tr``;

const ArticleForm = () => {
    return(
        <ArticleFormBlock>
            <ArticleTable>
                <TableLine>
                    <IconBlockTemplate
                        to="#"
                        src={ book_outline }
                        text="책"
                    />
                    <IconBlockTemplate
                        to="#"
                        src={ laptop_outline }
                        text="가전제품"
                    />
                    <IconBlockTemplate
                        to="#"
                        src={ barbell_outline }
                        text="운동기구"
                    />
                    <IconBlockTemplate
                        to="#"
                        src={ bicycle_outline }
                        text="자전거"
                    />
                </TableLine>
            </ArticleTable>
        </ArticleFormBlock>
    );
};

export default ArticleForm;

우선 간단하게 카테고리는 한 라인 정도만 만들고, HomePage에 컴포넌트를 넣어서 결과를 확인해보도록 하겠습니다.

• ./src/pages/HomeScreen.js

import React from 'react';
import HeaderTemplate from '../components/common/HeaderTemplate';
import ArticleForm from '../components/home/ArticleForm';
import ArticleTemplate from '../components/home/ArticleTemplate';

const HomePage = () => {
    return(
        <>
            <HeaderTemplate />
            <ArticleTemplate>
                <ArticleForm />
            </ArticleTemplate>
        </>
    );
};

export default HomePage;

다음 포스트에서는 마이페이지를 만들어 보도록 하겠습니다.

참고

• React 설치
  https://online.codingapple.com/unit/react1-install-create-react-app-npx/

• 리액트를 다루는 기술 - 저자: 김민준