70일차

1. CORS에 대하여 정리 하시오.

CORS란 도메인이 다른 서버끼리 리소스를 주고 받을 때 보안을 위해 설정된 정책입니다.

웹 사이트 A가 API 서버 B에서 데이터를 가져오려 할 때,
API 서버 B에서 CORS 허용 설정이 되어 있지 않으면 웹 브라우저에서 API 접근이 거부될 수 있습니다.

2. CORS를 스프링 서버단에서 해결하는 방법은?

• Controller 에서 @CrossOrigin 어노테이션 추가하기

• WebMvcConfigurer 를 이용해서 처리하기

• CorsFilter 로 직접 response에 header 를 넣어주기

3. /lego 사이트에서 json으로 넘어오는 페이징관련변수(3개)를 이용 하여 페이징을 완성 하시오.

LegoListPage

import React, { useEffect, useState } from "react";
import boardService from "../../services/BoardService";
import { Link } from "react-router-dom";
import axios from "axios";
import LegoPagingnation from "../board/LegoPagingnation";

const LegoListPage = () => {
  let initPaging = {
    // ✔ 화면에 보여질 페이지 그룹
    // ✔ 화면에 보여질 첫번째 페이지
    // ✔ 화면에 보여질 마지막 페이지
    // ✔ 총 페이지 수
    startPage: 1,
    endPage: 10,
    total: 0,
    prev: false,
    next: false,
    pageNum: 1,
    amount: 10, //고정
  };

  const [boards, setBoards] = useState([]);
  const [paging, setPaging] = useState(initPaging);

  useEffect(() => {
    console.log("use Effective 실행");
    initBoards();
  }, []);

  const initBoards = (pageno = "1") => {
    let url =
      "https://sample.bmaster.kro.kr/contacts?pageno=" +
      pageno +
      "&pagesize=10";
    axios
      .get(url)
      .then((response) => {
        console.log(response);
        setBoards(response.data.contacts);

        initPaging.pageNum = response.data.pageno;
        initPaging.total = response.data.totalcount;
        initPaging.endPage = initPaging.total / response.data.pagesize;
        initPaging.startPage = 1; //endPage - 9;

        setPaging(initPaging);
      })
      .catch((e) => {
        console.log(e);
      });
  };

  const deleteBoard = (e) => {
    const { name, value } = e.target;
    console.log(name + "::" + value);

    setBoards(boards.filter((board) => board.no !== value));
  };

  const onClickPaging = (e) => {
    e.preventDefault(); // 기존에 링크 동작을 하지 말아라
    console.log(e.target.text);
    initBoards(e.target.text);
  };

  return (
    <div className="container mt-3">
      <div className="container-fluid">
        <h1 className="h3 mb-2 text-gray-800">게시판</h1>
        <p className="mb-4">
          DataTables is a third party plugin that is used to generate the demo
          table below. For more information about DataTables, please visit the{" "}
          <a target="_blank" href="https://datatables.net">
            official DataTables documentation
          </a>
          .
        </p>

        {/* <!-- 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.no}>
                        <td>{board.no}</td>
                        <td>{board.name}</td>
                        <td>{board.tel}</td>

                        <td>{board.address}</td>
                        <td>
                          <img src={board.photo} alt="" />
                        </td>
                        <td className="text-center">
                          <button
                            className="btn btn-success"
                            value={board.no}
                            onClick={deleteBoard}
                          >
                            삭제
                          </button>
                        </td>
                      </tr>
                    ))}
                </tbody>
              </table>
            </div>
            {/* 페이징           */}
            {paging != null ? (
              <LegoPagingnation
                paging={paging}
                onClickPaging={onClickPaging}
              ></LegoPagingnation>
            ) : null}

            <hr />
          </div>
        </div>
      </div>
    </div>
    // <!-- /.container-fluid -->);
  );
};

export default LegoListPage;

LegoPagingnation

import React from "react";
import { Link } from "react-router-dom";

//https://getbootstrap.com/docs/5.0/components/pagination/

const LegoPagingnation = ({ paging, onClickPaging }) => {
  console.log(paging);

  const startQuery =
    "https://sample.bmaster.kro.kr/contacts?pageno=1" +
    "&" +
    "pagesize=" +
    paging.amount;

  const endQuery =
    "https://sample.bmaster.kro.kr/contacts?pageno=10" +
    "&" +
    "pagesize=" +
    paging.amount;

  console.log(startQuery);

  const rendering = () => {
    const row = [];

    for (let i = paging.startPage; i <= paging.endPage; i++) {
      console.log(
        "https://sample.bmaster.kro.kr/contacts?pageno=" +
          i +
          "&" +
          "pagesize=" +
          paging.amount
      );

      const query =
        "https://sample.bmaster.kro.kr/contacts?pageno=" +
        i +
        "&" +
        "pagesize=" +
        paging.amount;

      row.push(
        <li className="page-item">
          <Link to={query} onClick={onClickPaging} className="page-link">
            {i}
          </Link>
        </li>
      );
    }

    return row;
  };

  return (
    <nav aria-label="Page navigation example">
      <ul className="pagination justify-content-center">
        {paging.prev == true && (
          <li className="page-item">
            <Link
              to={startQuery}
              onClick={onClickPaging}
              className="page-link"
              aria-label="Previous"
            >
              &laquo;
            </Link>
          </li>
        )}

        {rendering()}
        {/* <li className="page-item">
          <a className="page-link" href="#">
            1
          </a>
        </li>
        <li className="page-item">
          <a className="page-link" href="#">
            2
          </a>
        </li>
        <li className="page-item">
          <a className="page-link" href="#">
            3
          </a>
        </li> */}

        {paging.next == true && paging.endPage > 0 && (
          <li className="page-item">
            <Link
              to={endQuery}
              onClick={onClickPaging}
              className="page-link"
              aria-label="Next"
            >
              &raquo;
              {/* <span aria-hidden="true">&raquo;</span> */}
            </Link>
          </li>
        )}
      </ul>
    </nav>
  );
};

export default LegoPagingnation;