[VSCode] React + nodejs + mySQL로 게시판 만들기 2편 - 게시판 UI 만들기

리액트 개발환경은 세팅했으니 이제 게시판 UI를 만들어보자.

 

게시판은 목록 조회, 글쓰기, 상세 조회, 수정하기, 삭제하기 기능만 만들고, 중간 상태 점검을 한 후에 추가 기능을 구현하겠다.

 

먼저, react-bootstrap에서 제공하는 컴포넌트를 사용하여 UI를 만들어보자.

 

react-bootstrap 설치

npm i react-bootstrap bootstrap

기본 bootstrap은 필수 설치 요소는 아니지만, Bootstrap Sass 파일을 사용자 정의할 계획이거나 스타일시트에 CDN을 사용하지 않으려면 기본 bootstrap도 설치하는 것이 도움이 될 수 있다.

 

App.tsx에 bootstrap css 추가

App.tsx 파일 상단에 아래 코드를 추가한다.

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

 

반응형

 

목록 조회 컴포넌트 생성

1. src 폴더 내에 BoardList.tsx 파일을 생성하고, 아래 코드를 입력한다.

import { Component } from "react";
import Table from "react-bootstrap/Table";

/**
 * BoardList class
 */
class BoardList extends Component {
    /**
     * @return {Component} Component
     */
    render() {
        return (
            <Table striped bordered hover>
                <thead>
                    <tr>
                        <th>번호</th>
                        <th>제목</th>
                        <th>작성자</th>
                        <th>작성일</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>게시글1</td>
                        <td>artistJay</td>
                        <td>2022-03-19</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>게시글2</td>
                        <td>artistJay</td>
                        <td>2022-03-19</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>게시글2</td>
                        <td>artistJay</td>
                        <td>2022-03-19</td>
                    </tr>
                </tbody>
            </Table>
        );
    }
}

export default BoardList;

 

2. App.tsx 파일 상단에 아래 코드를 추가한다.

import BoardList from 'BoardList';

 

3. App.tsx 파일의 return 부분에 방금 만든 컴포넌트를 추가한다.

function App() {
  return (
    <div className="App">
      <BoardList></BoardList>
    </div>
  );
}

 

4. 화면에 테이블이 잘 보이는 지 확인

5. 목록에 checkbox와 '글쓰기', '수정하기', '삭제하기' 버튼을 추가하기 위해 BoardList.tsx 파일을 수정한다.

import { Component } from "react";
import Table from "react-bootstrap/Table";
import Button from "react-bootstrap/Button";

/**
 * BoardList class
 */
class BoardList extends Component {
    /**
     * @return {Component} Component
     */
    render() {
        return (
            <div>
                <Table striped bordered hover>
                    <thead>
                        <tr>
                            <th>선택</th>
                            <th>번호</th>
                            <th>제목</th>
                            <th>작성자</th>
                            <th>작성일</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <input type="checkbox"></input>
                            </td>
                            <td>1</td>
                            <td>게시글1</td>
                            <td>artistJay</td>
                            <td>2022-03-19</td>
                        </tr>
                        <tr>
                            <td>
                                <input type="checkbox"></input>
                            </td>
                            <td>2</td>
                            <td>게시글2</td>
                            <td>artistJay</td>
                            <td>2022-03-19</td>
                        </tr>
                        <tr>
                            <td>
                                <input type="checkbox"></input>
                            </td>
                            <td>3</td>
                            <td>게시글2</td>
                            <td>artistJay</td>
                            <td>2022-03-19</td>
                        </tr>
                    </tbody>
                </Table>
                <Button variant="info">글쓰기</Button>
                <Button variant="secondary">수정하기</Button>
                <Button variant="danger">삭제하기</Button>
            </div>
        );
    }
}

export default BoardList;

 

6. 수정된 UI를 확인한다.

 

 

목록 화면은 어느 정도 된 것 같으니 글 작성 화면 컴포넌트도 만들어보자.

 

 

그전에..

컴포넌트 작성 중 ESLint에서 아래와 같은 에러가 발생하는 경우 해결방법

Delete `␍` eslint (prettier/prettier)

 

해당 컴포넌트를 열고, 우측 하단에 CRLF로 보이는 부분을 클릭 > LF로 변경해주면 된다.

 

 

그럼 다시 본론으로 와서 글 작성 컴포넌트 만들기

1. src 폴더 아래 Write.tsx 파일을 생성하고, 아래 코드를 입력한다.

import { Component } from "react";
import Form from "react-bootstrap/Form";

/**
 * Write class
 */
class Write extends Component {
    /**
     * @return {Component} Component
     */
    render() {
        return (
            <div>
                <Form>
                    <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
                        <Form.Label>제목</Form.Label>
                        <Form.Control type="email" placeholder="name@example.com" />
                    </Form.Group>
                    <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
                        <Form.Label>내용</Form.Label>
                        <Form.Control as="textarea" />
                    </Form.Group>
                </Form>
                <Button variant="info">작성완료</Button>
                <Button variant="secondary">취소</Button>
            </div>
        );
    }
}

export default Write;

 

2. App.tsx 파일의 <BoardList></BoardList> 태그 아래에 아래 코드를 삽입한다.

<Write></Write>

 

3. 화면을 확인한다.

 

 

나중에는 router 등을 사용하여 페이지 단위로 컴포넌트를 만들겠지만, 우선 지금처럼 UI는 구성하고 기능 위주로 작업을 하려고 한다.

 

현재 UI만으로도 기본적인 CRUD는 모두 진행을 할 수 있으므로 게시판 UI는 끝내겠다.

이제 서버환경을 구성할 차례다.

 

크게 한 건 없지만 조금 쉬었다가 다음 포스팅에서 하겠다.