[문제] React 게시판 TO DO LIST

1. npx create-react-app react-pse-board 로 새로운 폴더 생성하기

 

2. README.md 파일 클릭한채로 새폴더 만들기 - 파일명은 .prettierrc (Extensions 메뉴에서 Prettier - Code formatter 다운 받아두기!)

 

3. .prettierrc 폴더 안에 아래 코드 넣기

{

    "singleQuote": true,

    "semi": true,

 

    "tabWidth": 2,

    "trailingComma": "all",

    "printWidth": 80

}

 

4. FIle - Preference - Settings 가서 Format on Save 클릭해서 체크하기

 

5. F1 누르고 format document with 검색 -> Configure Default Formatter 선택 -> Prettier-Code formatter 선택

6. package.json 파일을 클릭한 후 하단의 TERMINAL 창에 npm install react-bootstrap bootstrap 입력, 엔터를 눌러

bootstrap5를 사용하기 위한 설정을 다운받는다.

"dependencies": {

    "@testing-library/jest-dom": "^5.16.2",

    "@testing-library/react": "^12.1.2",

    "@testing-library/user-event": "^13.5.0",

    "bootstrap": "^5.1.3",

    "react": "^17.0.2",

    "react-bootstrap": "^2.1.2",

    "react-dom": "^17.0.2",

    "react-scripts": "5.0.0",

    "web-vitals": "^2.1.4"

  },

부트스트랩 버전이 5.1.3으로 잘 받아졌는지 위와 같은 부분을 확인하기.

 

7. src 폴더 아래에 components 라는 이름으로 폴더 생성하기

 

8. components 폴더 안에 Header.js 파일 생성하기

 

9. Extensions 메뉴(촤측의 퍼즐? 모양 같은 아이콘)가서 html to JSX 다운받아두기...

 

10. Header.js에서 rsc입력 후 enter (또는 아래 코드처럼 작성해주기)

import React from 'react';

const Header = () => {

    return (

        <div>

           

        </div>

    );

};

export default Header;

 

 

11.  App.js가서 return 부분에 div태그만 남겨두고 삭제하기! (div태그의 className도 삭제하기)

 

12. App.js 상단에 부트스트랩을 위한 css import해주기

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

 

 

13.  App.js에 Header.js 적용하기

import Header from "./components/Header";

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

function App() {

  return (

    <div>

      <Header/>

    </div>

  );

}

export default App;

 

14.  Header.js에 navbar를 위한 코드 넣어주기...(return 안에)

부트스트랩 코드는 아래 사이트 참고

https://react-bootstrap.github.io/

React-Bootstrap

만약 위 사이트에서 원하는 코드가 없을 경우 아래 사이트 참고

https://getbootstrap.com/docs/5.0/getting-started/introduction/

Introduction

※ 다만 위의 사이트에서 코드를 가져올 경우 태그안에 속성값이 class로 적여있는데 react의 경우 class는 중복?을 방지하기 위해 className으로 사용한다. 직접 class를 className으로 바꿔줘도 되지만 9번에서 html to JSX를 설치했을 경우에는 바꿀 범위를 드레그 한 후 마우스 우클릭 -> Convert HTML to JSX를 클릭하면 자동 변환된다.

 

       <nav className="navbar navbar-expand-lg navbar-dark bg-dark">

            <div className="container-fluid">

                <a className="navbar-brand" href="#">

                게시판

                </a>

                <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">

                <span className="navbar-toggler-icon" />

                </button>

                <div className="collapse navbar-collapse" id="navbarNavAltMarkup">

                <div className="navbar-nav">

                    <a className="nav-link active" aria-current="page" href="#">

                    Home

                    </a>

                </div>

                </div>

            </div>

       </nav>

 

 

15. src 폴더 안에 pages 폴더 만들기

 

16. pages폴더 안에 BoardTablesList.js 파일 만들기.

rsc 엔터를 해준 뒤 return에 게시판 목록 생성을 위한 테이블 태그 생성해서 넣어주기.

    return (
        <div className="container mt-3">
          {/* // <!-- Begin Page Content --> */}
          <div className="container-fluid">
            {/* <!-- Page Heading --> */}
            <h1 className="h3 mb-2 text-gray-800">게시판</h1>
            <br/>
    
            {/* <!-- DataTales Example --> */}
            <div className="card shadow mb-4">
              <div className="card-header py-3">
                <h6 className="m-0 font-weight-bold text-primary">
                  DataTables Example
                </h6>
              </div>
              <div className="card-body">
                <div className="table-responsive">
                  <table
                    className="table table-bordered"
                    id="dataTable"
                    width="100%"
                    cellspacing="0"
                  >
                    <thead>
                      <tr>
                        <th>번호</th>
                        <th>이름</th>
                        <th>제목</th>
                        <th>날짜</th>
                        <th>히트</th>
                        <th className="text-center">삭제</th>
                      </tr>
                    </thead>
                    <tbody>
                      {boards &&
                        boards.map((board) => (
                          <tr key={board.bid}>
                            <td>{board.bid}</td>
                            <td>{board.bname}</td>
    
                            <td>
                              <Link to={"/board/" + board.bid}>{board.btitle}</Link>
                            </td>
    
                            <td>{board.bdate}</td>
                            <td>{board.bhit}</td>
                            <td className="text-center">
                              <button
                                className="btn btn-success"
                                value={board.bid}
                                onClick={deleteBoard}
                              >
                                삭제
                              </button>
                            </td>
                          </tr>
                        ))}
                    </tbody>
                  </table>
                </div>
                <hr />
                <Link to="/write">
                  <button type="button" className="btn btn-primary">
                    글쓰기
                  </button>
                </Link>
              </div>
            </div>
          </div>
          {/*<!-- /.container-fluid --> */}
        </div>
      );

 

17. src폴더 안에 services 폴더 생성하기

 

18. services 폴더 안에 http=common.js 파일 만들기.

 

19. http=common.js 파일 안에 아래 코드 넣기

import axios from "axios";

export default axios.create({
  baseURL: "http://146.56.137.240:8282/hjs",
  headers: {
    "Content-type": "application/json",
  },
});

axios 보충 내용..

axios - ajax와 같은 역할을 한다고 생각하자...

 

https://joshua1988.github.io/vue-camp/vue/axios.html#%E1%84%8B%E1%85%A2%E1%86%A8%E1%84%89%E1%85%B5%E1%84%8B%E1%85%A9%E1%84%89%E1%85%B3-%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8E%E1%85%B5

Axios | Cracking Vue.js

 

https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9

[AXIOS] 📚 axios 설치 & 특징 & 문법 💯 정리

 

 

20. services 폴더 안에 BoardService.js 파일 만들고 안에 아래의 코드 넣기

import http from "./http=common";

// 게시판 목록 불러오기
const getAll = () => {
    return http.get("/rboard/list");
};

// 삭제
const remove = (id) => {
    return http.delete(`/rboard/${id}`);
    // 따옴표가 아니라 Esc 키 아래 있는 것
    // ${}를 사용하기 위한 ES6 문법

}

export default{
    getAll,
    remove,
};

 

21. BoardTablesList.js에 게시판 내용을 불러오기 위한 함수 만들어주기

const [boards, setBoards] = useState([]);

    // 첫 렌더링 때 한번만 실행
    useEffect( () => {
      // getBoards();
      allBoards();
    },[]);
	
    /* services 폴더를 만들지 않을 경우
    const getBoards = async () => {
        const response = await axios.get(
          "http://146.56.137.240:8282/hjs/rboard/list"
        );
        console.log(response.data);
        setBoards(response.data);     
    };
   */

    const allBoards = () => {
      console.log('allBoards()----------------');

      BoardDataService.getAll()
      .then( (response) => {
        setBoards(response.data);
        console.log(response.data);
      })
      // 성공하게 되면 함수를 실행해라

      // 실패했을 경우
      .catch((e) => {
        console.log(e);
      });

 

+ 삭제 함수까지 추가한 BoardTablesList.js 전체 코드

import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import BoardDataService from '../services/BoardService.js';

const BoardTablesList = () => {

    const [boards, setBoards] = useState([]);

    // 첫 렌더링 때 한번만 실행
    useEffect( () => {
      // getBoards();
      allBoards();
    },[]);

    const getBoards = async () => {
        const response = await axios.get(
          "http://146.56.137.240:8282/hjs/rboard/list"
        );
        console.log(response.data);
        setBoards(response.data);     
    };

    const allBoards = () => {
      console.log('allBoards()----------------');

      BoardDataService.getAll()
      .then( (response) => {
        setBoards(response.data);
        console.log(response.data);
      })
      // 성공하게 되면 함수를 실행해라

      // 실패했을 경우
      .catch((e) => {
        console.log(e);
      }); 

      // then을 사용하면 async, await가 없어도 된다.
    };

    const deleteBoard = (e) => {
      console.log('deleteBoard()');

      //const {name, value} = e.target;
      const bid = e.target.value;

      BoardDataService.remove(bid)
      .then( (response) => {
        console.log(response.data);
        // allBoards();
        setBoards(boards.filter((board) => board.bid !== parseInt(value)));
        // 위 아래 둘다 같지만 속도면에서 아래것이 더 빠름.
      })
      .catch((e) => {
        console.log(e);
      })
      
    }


    return (
        <div className="container mt-3">
          {/* // <!-- Begin Page Content --> */}
          <div className="container-fluid">
            {/* <!-- Page Heading --> */}
            <h1 className="h3 mb-2 text-gray-800">게시판</h1>
            <br/>
    
            {/* <!-- DataTales Example --> */}
            <div className="card shadow mb-4">
              <div className="card-header py-3">
                <h6 className="m-0 font-weight-bold text-primary">
                  DataTables Example
                </h6>
              </div>
              <div className="card-body">
                <div className="table-responsive">
                  <table
                    className="table table-bordered"
                    id="dataTable"
                    width="100%"
                    cellspacing="0"
                  >
                    <thead>
                      <tr>
                        <th>번호</th>
                        <th>이름</th>
                        <th>제목</th>
                        <th>날짜</th>
                        <th>히트</th>
                        <th className="text-center">삭제</th>
                      </tr>
                    </thead>
                    <tbody>
                      {boards &&
                        boards.map((board) => (
                          <tr key={board.bid}>
                            <td>{board.bid}</td>
                            <td>{board.bname}</td>
    
                            <td>
                              <Link to={"/board/" + board.bid}>{board.btitle}</Link>
                            </td>
    
                            <td>{board.bdate}</td>
                            <td>{board.bhit}</td>
                            <td className="text-center">
                              <button
                                className="btn btn-success"
                                value={board.bid}
                                onClick={deleteBoard}
                              >
                                삭제
                              </button>
                            </td>
                          </tr>
                        ))}
                    </tbody>
                  </table>
                </div>
                <hr />
                <Link to="/write">
                  <button type="button" className="btn btn-primary">
                    글쓰기
                  </button>
                </Link>
              </div>
            </div>
          </div>
          {/*<!-- /.container-fluid --> */}
        </div>
      );
};

export default BoardTablesList;