23-6-26 月

스프링 단축키 꿀팁

alt 두번 누르면 그 창 이

alt +1 프로젝트 창 키고 끄기

▶ 인덴트 : Tab(인덴트), Shift+Tab(인덴트 취소)

인덴트는 들여쓰기를 말한다. Tab키는 들여쓰기를 Shift+Tab은 들여쓰기 취소를 할 때 눌러주면 된다.

▶ 자동 인덴트 : Ctrl+Alt+I

코드 전체에 자동 인덴트를 적용하고 싶다면 Ctrl+A키를 눌러 코드 전체 영역을 선택해 주고 그 다음 Ctrl+Alt+I키를 눌러주면 된다.

▶ 사용처 찾기 : Alt+F7(찾기), Ctrl+B(빠른 찾기)

함수를 사용하고 있는 사용처를 찾을 때 Alt+F7(찾기)키 혹은 Ctrl+B(빠른 찾기)키를 눌러주면 된다.

Alt + insert -> 겟셋 같은 소스 검색

▶ 꿀 팁 : Ctrl + shift + enter ( 자동 닫기, 괄호 완성 기능? 애매 하다 싶을 때 눌러주면 자동 마무리)

▶ 세팅 창 : Ctrl + alt + s

▶ 변수명 한번에 바꾸기 : shift + f6

▶ 메소드 안에 들어갈 변수명 확인 : Ctrl + p

▶ 람다로 변환 : alt + enter -> Replace with lambda

▶ Refactor This : Shift + Ctrl + alt + T

▶ lnline Method : Ctrl + alt + N

▶ Test 클래스 생성 : Ctrl + Shift + T

▶ 값 일괄 변경 : Ctrl + Shift + R

함수 합치는 메서드?

오늘 한 것

공부

리액트를 다루는 기술

프로젝트 대비

• 리액트 연동 중 오류 발생.
• 해결 할 수 없는 부분의 오류..

react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
render @ react-dom.development.js:29670
./src/index.js @ index.js:9
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
App.js:53 App constructor:undefined, undefined
App.js:53 App constructor:undefined, undefined
Board.js:114 Uncaught TypeError: Cannot read properties of null (reading 'boardList')
    at List.render (Board.js:114:1)
    at finishClassComponent (react-dom.development.js:19752:1)
    at updateClassComponent (react-dom.development.js:19698:1)
    at beginWork (react-dom.development.js:21611:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)
render @ Board.js:114
finishClassComponent @ react-dom.development.js:19752
updateClassComponent @ react-dom.development.js:19698
beginWork @ react-dom.development.js:21611
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
flushSync @ react-dom.development.js:26201
legacyCreateRootFromDOMContainer @ react-dom.development.js:29575
legacyRenderSubtreeIntoContainer @ react-dom.development.js:29601
render @ react-dom.development.js:29685
./src/index.js @ index.js:9
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
react-dom.development.js:18687 The above error occurred in the <List> component:

    at List (http://localhost:3000/static/js/bundle.js:390:1)
    at div
    at div
    at div
    at div
    at Board (http://localhost:3000/static/js/bundle.js:233:5)
    at div
    at App (http://localhost:3000/static/js/bundle.js:113:5)
    at CookieWrapper (http://localhost:3000/static/js/bundle.js:9126:45)
    at withCookies(App)
    at CookiesProvider (http://localhost:3000/static/js/bundle.js:9045:24)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
update.callback @ react-dom.development.js:18720
callCallback @ react-dom.development.js:13923
commitUpdateQueue @ react-dom.development.js:13944
commitLayoutEffectOnFiber @ react-dom.development.js:23391
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
performSyncWorkOnRoot @ react-dom.development.js:26117
flushSyncCallbacks @ react-dom.development.js:12042
flushSync @ react-dom.development.js:26201
legacyCreateRootFromDOMContainer @ react-dom.development.js:29575
legacyRenderSubtreeIntoContainer @ react-dom.development.js:29601
render @ react-dom.development.js:29685
./src/index.js @ index.js:9
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
Board.js:114 Uncaught TypeError: Cannot read properties of null (reading 'boardList')
    at List.render (Board.js:114:1)
    at finishClassComponent (react-dom.development.js:19752:1)
    at updateClassComponent (react-dom.development.js:19698:1)
    at beginWork (react-dom.development.js:21611:1)
    at beginWork$1 (react-dom.development.js:27426:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)
    at renderRootSync (react-dom.development.js:26434:1)
    at performSyncWorkOnRoot (react-dom.development.js:26085:1)
    at flushSyncCallbacks (react-dom.development.js:12042:1)

다른 걸로 다시

build 로 스프링부트랑 리액트 연결 하는 방법 --!

• 같은 화면단에서 열 수 있음
• 스프링부트 run 하면 리액트 실행
• 9090 으로 리액트랑 제대로 연결 하려면 build 파일 안에 있는 것들을 static 경로로 이동해줘야 함
• \target\classes\static 경로 기억!!

리액트에서 cookie 사용

• yarn i react-cookie

리액트에서 부트스트랩 사용

• yarn install react-bootstrap bootstrap

화면 그리기

• 3 일차 첫 번째 시간

• App.js

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Board from "./Board";
import { instanceOf } from "prop-types";
import { withCookies, Cookies } from "react-cookie";

class App extends Component {
  static propTypes = {
    cookies: instanceOf(Cookies).isRequired,
  };

  static defaultProps = {
    menu1: true,
    menu2: false,
    boardType: "board",
  };

  constructor(props) {
    super(props);
    const { cookies } = this.props;

    console.log(
      "App constructor:" + cookies.get("menu1") + ", " + cookies.get("menu2")
    );

    this.state = {
      menu1:
        cookies.get("menu1") !== "" ? cookies.get("menu1") : this.props.menu1,
      menu2:
        cookies.get("menu2") !== "" ? cookies.get("menu2") : this.props.menu2,
      boardType:
        cookies.get("boardType") !== ""
          ? cookies.get("boardType")
          : this.props.boardType,
    };
    this.handleCreate = this.handleCreate.bind(this);
  }

  handleCreate(data) {
    console.log("App handleCreate:" + data.boardType);
    const { cookies } = this.props;

    cookies.set("menu1", data.menu1, { path: "/" });
    cookies.set("menu2", data.menu2, { path: "/" });
    cookies.set("boardType", data.boardType, { path: "/" });

    /* this.setState({
      menu1: data.menu1,
      menu2: data.menu2,
      boardType: data.boardType
    }); */
  }

  render() {
    return (
      <div>
        <Board
          key={this.state.boardType}
          boardType={this.state.boardType}
          menu1={this.state.menu1}
          menu2={this.state.menu2}
          onCreate={this.handleCreate}
        />
      </div>
    );
  }
}

export default withCookies(App);

• index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "bootstrap/dist/css/bootstrap.min.css";
import { CookiesProvider } from "react-cookie";

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

• board.js

import React, { useState, Component, Fragment } from "react";

class Board extends Component {
  constructor(props) {
    super(props);
    this.state = {
      menu1: this.props.menu1,
      menu2: this.props.menu2,
      boardType: this.props.boardType,
      boardData: {
        id: "",
        title: "",
        contents: "",
        fname: "",
      },
    };
  }

  componentDidMount() {
    console.log("-------------------------- : " + this.props.boardType);
  }

  componentWillUnmount() {
    console.log("----------------Board Unmount");
  }

  render() {
    //console.log('===Board render:'+this.props.boardType);
    //console.log("menu1:"+this.state.menu1);
    //console.log("menu2:"+this.state.menu2);
    return (
      <div className="card">
        <h1>react board</h1>
        <div className="card-header">
          <ul className="nav nav-tabs">
            <li className="nav-item">
              <a
                className={"nav-link " + (this.state.menu1 ? "active" : "")}
                onClick={this.menuClick}
              >
                싱글이미지 게시판
              </a>
            </li>
            <li className="nav-item">
              <a
                className={"nav-link " + (this.state.menu2 ? "active" : "")}
                onClick={this.menuClick2}
              >
                멀티이미지 게시판
              </a>
            </li>
          </ul>
        </div>
        <div className="card-body">
          <div className="row">
            <div className="col-lg-4">
              <List
                key={this.state.boardType}
                boardType={this.state.boardType}
                onCreate={this.handleCreate}
              />
            </div>
            <div className="col-lg-5">
              <Detail
                key={this.state.boardType + this.state.boardData.id}
                id={this.state.boardData.id}
                title={this.state.boardData.title}
                contents={this.state.boardData.contents}
                date={this.state.boardData.date}
                fname={this.state.boardData.fname}
                boardType={this.state.boardType}
                onCreate={this.handleCreate2}
              />
            </div>
            <div className="col-lg-3">
              <Image
                key={
                  this.state.boardType +
                  this.state.boardData.id +
                  this.state.boardData.fname
                }
                boardType={this.state.boardType}
                fname={this.state.boardData.fname}
              />
            </div>
          </div>
        </div>
        <div className="card-footer">
          SpringBoot + MySQL + <strong>React</strong> + bootstrap4 게시판 만들기
        </div>
      </div>
    );
  }
}

class List extends Component {
  render() {
    const divStyle = {
      minHeight: "500px",
      maxHeight: "500px",
      overflowY: "auto",
    };

    return (
      <div className="card" style={divStyle}>
        <table className="table">
          <thead>
            <tr>
              <th>게시물 리스트</th>
            </tr>
          </thead>
          <tbody>
            {/* <tr>
                        <td>게시물 1</td>
                    </tr>
                    <tr>
                        <td>게시물 2</td>
                    </tr> */}
            {/* {this.state.boardList} */}
          </tbody>
        </table>
      </div>
    );
  }
}

class Detail extends Component {
  render() {
    const divStyle = {
      minHeight: "500px",
      maxHeight: "1000px",
    };
    const divCenter = {
      textAlign: "center",
    };

    return (
      <div className="card bg-light text-dark" style={divStyle}>
        <form name="form1" action="">
          <div className="form-group">
            <label className="control-label">제목:</label>
            <div>
              <input
                type="text"
                className="form-control"
                placeholder="제목을 입력하세요"
              />
            </div>
          </div>
          <div className="form-group">
            <label className="control-label">내용:</label>
            <div>
              <textarea className="form-control" rows="10"></textarea>
            </div>
          </div>
          <div className="form-group">
            <label className="control-label">이미지첨부: jpg,gif,png</label>
            <div>
              <input type="file" className="form-control" name="file" />
            </div>
          </div>
          <input type="hidden" name="id" />
        </form>
        <div style={divCenter}>
          <div className="btn-group">
            <button type="button" className="btn btn-primary">
              저장
            </button>
            <button type="button" className="btn btn-secondary">
              취소
            </button>
            <button type="button" className="btn btn-danger">
              삭제
            </button>
            <button type="button" className="btn btn-info">
              그림삭제
            </button>
          </div>
        </div>
      </div>
    );
  }
}

class Image extends Component {
  render() {
    const divStyle1 = {
      minHeight: "500px",
      maxHeight: "500px",
      overflowY: "auto",
      display: "block",
    };
    const divStyle1_1 = {
      minHeight: "500px",
      maxHeight: "1000px",
      display: "none",
    };
    const divStyle2 = {
      minHeight: "500px",
      maxHeight: "500px",
      overflowY: "auto",
      display: "block",
    };
    const divStyle2_1 = {
      minHeight: "500px",
      maxHeight: "1000px",
      display: "none",
    };
    const imgStyle = {
      width: "100%",
    };

    return (
      <Fragment>
        <div className="card bg-light text-dark">
          <img alt="image"></img>
        </div>
        <div className="card bg-light text-dark">
          <span></span>
        </div>
      </Fragment>
    );
  }
}

export default Board;

• 껍데기만 그리고 오류 안나는 방향으로 진행 하기 위한 셋팅
• 리액트는 요즘 함수형태로 쓰지만 강의 에서 클래스르를 쓰므로 따라 치는 중생은 클래스로 씁니다.
• 나중에 바꾸는 방법 연구.

운동

궁금한 것

• Dirty checking - Spring Data JPA

내일 할 것

공부

프로젝트

운동

해결하려고 노력 중

-- 더 공부할 것

-- 모르는 것